← Cloudflare Pages / pages / how-to

Превью локальных проектов с помощью Cloudflare Tunnel

Cloudflare Tunnel запускает лёгкий демон (cloudflared) в вашей инфраструктуре, которое устанавливает исходящие соединения (туннели) между вашим исходным веб-сервером и глобальной сетью Cloudflare. По сути, Cloudflare Tunnel позволяет предоставлять удалённый доступ к службам, работающим на вашем локальном компьютере. Это альтернатива таким популярным инструментам, как Ngrok ↗, и предоставляет бесплатные долговременные туннели через TryCloudflare сервис.

Cloudflare Pages предоставляет уникальные URL-адреса предпросмотра развёртываний для новых веток и коммитов в ваших проектах, Cloudflare Tunnel можно использовать для доступа к локально запущенным приложениям и серверам в процессе разработки. В этом руководстве вы установите Cloudflare Tunnel и создадите новый туннель для доступа к локально запущенному приложению. Для начала работы с Cloudflare Tunnel вам понадобится аккаунт Cloudflare.

Cloudflare Tunnel можно установить на Windows, Linux и macOS. Подробнее об установке Cloudflare Tunnel см. в Установите cloudflared страницу в документации Cloudflare for Teams.

Убедитесь, что cloudflared установлен корректно, выполнив команду cloudflared --version в командной строке:

cloudflared --version

cloudflared version 2021.5.9 (built 2021-05-21-1541 UTC)

Проще всего начать работу с Cloudflare Tunnel, если у вас уже запущено локальное приложение, например React или SvelteKit сайт. При разработке приложения с использованием этих фреймворков они часто задействуют npm run develop скрипт или что-то подобное, что монтирует приложение и запускает его на localhost порт. Например, популярный vite запускает разрабатываемое приложение React на порте 5173, что делает его доступным по адресу http://localhost:5173 адрес.

При запущенном локальном сервере разработки новый Cloudflare Tunnel можно создать, выполнив cloudflared tunnel в новом окне командной строки, передав --url флаг вместе с вашей localhost URL и порт. cloudflared будет выводить журналы в командную строку, включая баннер с URL туннеля:

cloudflared tunnel --url http://localhost:5173

2021-07-15T20:11:29Z INF Cannot determine default configuration path. No file [config.yml config.yaml] in [~/.cloudflared ~/.cloudflare-warp ~/cloudflare-warp /etc/cloudflared /usr/local/etc/cloudflared]
2021-07-15T20:11:29Z INF Version 2021.5.9
2021-07-15T20:11:29Z INF GOOS: linux, GOVersion: devel +11087322f8 Fri Nov 13 03:04:52 2020 +0100, GoArch: amd64
2021-07-15T20:11:29Z INF Settings: map[url:http://localhost:5173]
2021-07-15T20:11:29Z INF cloudflared will not automatically update when run from the shell. To enable auto-updates, run cloudflared as a service: https://developers.cloudflare.com/argo-tunnel/reference/service/
2021-07-15T20:11:29Z INF Initial protocol h2mux
2021-07-15T20:11:29Z INF Starting metrics server on 127.0.0.1:42527/metrics
2021-07-15T20:11:29Z WRN Your version 2021.5.9 is outdated. We recommend upgrading it to 2021.7.0
2021-07-15T20:11:29Z INF Connection established connIndex=0 location=ATL
2021-07-15T20:11:32Z INF Each HA connection's tunnel IDs: map[0:cx0nsiqs81fhrfb82pcq075kgs6cybr86v9vdv8vbcgu91y2nthg]
2021-07-15T20:11:32Z INF +-------------------------------------------------------------+
2021-07-15T20:11:32Z INF |  Your free tunnel has started! Visit it:                    |
2021-07-15T20:11:32Z INF |    https://seasonal-deck-organisms-sf.trycloudflare.com     |
2021-07-15T20:11:32Z INF +-------------------------------------------------------------+

В этом примере случайно сгенерированный URL https://seasonal-deck-organisms-sf.trycloudflare.com создан и назначен вашему экземпляру туннеля. При переходе по этому URL-адресу в браузере вы увидите работающее приложение: запросы будут безопасно переадресовываться через глобальную сеть Cloudflare, через туннель, запущенный на вашем компьютере, к localhost:5173:

Cloudflare Tunnel можно настроить разными способами, и его применение не ограничивается предоставлением доступа к приложениям в разработке. Например, вы можете предоставить cloudflared с файл конфигурации для настройки более сложной маршрутизации и туннелей, выходящих за рамки простого --url флаг. Вы также можете привязать запись DNS Cloudflare к домену или поддомену для создания легко доступного долговременного туннеля к вашей локальной машине.

Наконец, подключив Cloudflare Access, вы можете предоставить безопасный доступ к вашим туннелям не открывая доступ ко всему серверу и не жертвуя безопасностью. Обратитесь к Документация Cloudflare for Teams чтобы узнать больше о возможностях полного набора инструментов Cloudflare Zero Trust.