Це насправді не протистояння. Cloudflare Tunnel (cloudflared) і PortPreview живуть у різних кімнатах. Cloudflare Tunnel тримає сервіс постійно онлайн за краєм Cloudflare — Zero Trust, іменовані тунелі, кастомні домени. PortPreview — для наступних двадцяти хвилин вашої dev-сесії: тестування вебхуків, мобільний QA, поділитися гілкою з дизайнером. Вибір між ними здебільшого залежить від того, яка задача у вас насправді.
У чому Cloudflare Tunnel хороший
cloudflared побудовано для одного: вивести сервіс в інтернет, не відкриваючи жодного вхідного порту й не розкриваючи ваш origin IP. Запустіть його на сервері, прив’яжіть іменований тунель до імені хоста на вашому домені Cloudflare, і трафік потече через край Cloudflare до вашого origin вихідним з’єднанням, яке ініціювала ваша машина.
Що він робить добре:
- Продакшен-маршрутизація. Функція іменованого тунелю довговічна. Можна запустити cloudflared як сервіс, і ім’я хоста продовжує працювати між перезапусками.
- Політики доступу Zero Trust. Захистіть тунель за SSO, MFA чи IP-allowlist для експонування внутрішніх інструментів.
- Кастомні домени. Принесіть власний домен на Cloudflare. Тунель термінується на
ваш-домен.com, а не на піддомені вендора. - WARP-маршрутизація. Дістаньтеся приватних сервісів з будь-якого пристрою в мережі Cloudflare без налаштування VPN.
Нічого з цього не про налагодження вебхуків.
Де Cloudflare Tunnel стає незручним для dev
Режим quick tunnel (cloudflared tunnel --url localhost:3000) — найближче, до чого cloudflared підходить до dev-інструмента, і він працює. Ви отримуєте URL *.trycloudflare.com, що вказує на ваш локальний порт. Але:
- URL ротується щосесії, як у більшості dev-тунелів.
- Немає вбудованого інспектора запитів. Ви бачите те, що логує ваш dev-сервер, і нічого більше. Захоплення payload вебхука для повтору пізніше вимагає прикручування окремого проксі чи логера.
- Налаштування іменованих тунелів (версія зі стабільним URL) включає акаунт Cloudflare, DNS-записи та конфіг-файл. Виправдано для довговічного сервісу; надмірно для сесії ітерацій вебхука.
Де вписується PortPreview
PortPreview — це CLI для тунелювання localhost для dev-циклу. Одна команда, публічний HTTPS-URL, захоплення й повтор запитів вбудовані.
npx portpreview 3000
Ми оптимізуємо момент між «я змінив обробник вебхука Stripe» і «я знаю, чи він працює». Цей момент має тривати секунди. Захопіть payload, полагодьте обробник, повторюйте, поки не стане зеленим, усе без повторного запуску upstream-події.
Пліч-о-пліч
| Потреба | Cloudflare Tunnel | PortPreview |
|---|---|---|
| Швидка сесія налагодження вебхука | Можливо (quick tunnel) | Зроблений для цього |
| Захоплення й повтор запитів | Ні | Так |
| Стабільне іменоване ім’я хоста | Так (з налаштуванням) | Не головний фокус |
| Кастомний домен | Так | Піддомен тунелю |
| Політика доступу Zero Trust | Так | Ні |
| Складність налаштування | Низька для quick, середня для named | Одна команда |
| Працювати вічно як сервіс | Так | Спроєктований для сесій |
| Open-source клієнт | Так (cloudflared) | Так |
Коли який використовувати
Використовуйте Cloudflare Tunnel, коли
- Потрібен сервіс онлайн 24/7 без відкриття портів фаєрвола.
- Хочете SSO-захищений доступ до внутрішнього дашборда чи адмін-інструмента.
- Потрібен стабільний URL з кастомним доменом, підкріплений справжнім CA-сертифікатом і вашим наявним DNS Cloudflare.
- Ви вже на Cloudflare, і гранична вартість налаштування мала.
Використовуйте PortPreview, коли
- Ви ітеруєте обробник вебхука й хочете повтор в один клік.
- Хочете поділитися гілкою з дизайнером на десять хвилин.
- Тестуєте OAuth-колбеки чи мобільні потоки без налаштування DNS.
- Волієте не керувати акаунтом Cloudflare лише заради тесту події Stripe.
Вони добре співіснують
Кілька команд, з якими ми говорили, використовують обидва. Cloudflare Tunnel для завжди-увімкненого внутрішнього інструмента, якому потрібен фіксований URL і SSO. PortPreview для щоденного налагодження вебхуків, якому потрібні повтор і одна команда. Вони не конфліктують — просто обслуговують різні частини дуги dev-to-prod.
Якщо ви також зважуєте ngrok чи localtunnel, ці порівняння можуть бути прямо релевантнішими. Приєднайтеся до списку очікування PortPreview для боку dev-циклу.