Cloudflare Tunnelを使用してローカルプロジェクトをプレビューする

Cloudflare Tunnelは、あなたのインフラストラクチャ内で軽量のデーモン（cloudflared）を実行し、オリジンウェブサーバーとCloudflareのグローバルネットワーク間にアウトバウンド接続（トンネル）を確立します。実際には、Cloudflare Tunnelを使用して、ローカルマシンで実行されているサービスへのリモートアクセスを許可できます。これは、Ngrok ↗のような人気のあるツールの代替手段であり、TryCloudflareサービスを通じて無料で長期間実行されるトンネルを提供します。

Cloudflare Pagesは、プロジェクトの新しいブランチやコミットに対してユニークなデプロイプレビューユーザーを提供しますが、Cloudflare Tunnelは、開発プロセス中にローカルで実行されているアプリケーションやサーバーへのアクセスを提供するために使用できます。このガイドでは、Cloudflare Tunnelをインストールし、ローカルで実行されているアプリケーションへのアクセスを提供するための新しいトンネルを作成します。Cloudflare Tunnelを使用するには、Cloudflareアカウントが必要です。

Cloudflare Tunnelのインストール

Cloudflare Tunnelは、Windows、Linux、macOSにインストールできます。Cloudflare Tunnelのインストールについては、Cloudflare for Teamsのドキュメント内のcloudflaredのインストールページを参照してください。

コマンドラインでcloudflared --versionを実行して、cloudflaredが正しくインストールされていることを確認します：

cloudflared --version

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

ローカルサービスの実行

Cloudflare Tunnelを使用してすぐに立ち上げる最も簡単な方法は、ReactやSvelteサイトのようなアプリケーションをローカルで実行することです。これらのフレームワークでアプリケーションを開発しているとき、通常はnpm run developスクリプトやそれに類似したものを使用して、アプリケーションをマウントし、localhostポートで実行します。たとえば、人気のあるcreate-react-appツールは、開発中のReactアプリケーションをポート3000で実行し、http://localhost:3000アドレスでアクセスできるようにします。

Cloudflare Tunnelの開始

ローカル開発サーバーが実行されている状態で、新しいCloudflare Tunnelは、新しいコマンドラインウィンドウでcloudflared tunnelを実行し、--urlフラグにlocalhostのURLとポートを渡すことでインスタンス化できます。cloudflaredは、トンネルURLを含むバナーを含むログをコマンドラインに出力します：

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

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:3000]
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:3000に到達します：

次のステップ

Cloudflare Tunnelはさまざまな方法で構成でき、開発中のアプリケーションへのアクセスを提供するだけでなく、さらに多くの用途に使用できます。たとえば、cloudflaredに構成ファイルを提供することで、単純な--urlフラグを超えたより複雑なルーティングやトンネル設定を追加できます。また、ドメインやサブドメインにCloudflare DNSレコードをアタッチして、ローカルマシンへの簡単にアクセスできる長期間のトンネルを作成することもできます。

最後に、Cloudflare Accessを組み込むことで、サーバー全体を公開することなく、またセキュリティを妥協することなく、トンネルへの安全なアクセスを提供できます。CloudflareのZero Trustツールの全体的なスイートでできることについては、Cloudflare for Teamsのドキュメントを参照してください。