Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

Cloudflare Tunnel でローカルプロジェクトをプレビューする

最終更新 Markdown で表示Agent セットアップ

Cloudflare Tunnel は、インフラ上で軽量デーモン（cloudflared）を実行し、オリジンのウェブサーバーと Cloudflare のグローバルネットワークのあいだにアウトバウンド接続（Tunnel）を確立します。実務上は、ローカルマシンで動いているサービスへリモートアクセスするために Cloudflare Tunnel を使えます。Ngrok ↗ などの一般的なツールの代替であり、TryCloudflare サービス経由で無料の長時間トンネルを提供します。

Cloudflare Pages は、プロジェクトの新しいブランチとコミットに固有の デプロイプレビュー URL を提供します。開発中にローカルで動かしているアプリケーションやサーバーへアクセスを渡すには、Cloudflare Tunnel を使えます。このガイドでは Cloudflare Tunnel をインストールし、ローカルで動かしているアプリケーションへアクセスするための新しいトンネルを作成します。Cloudflare Tunnel を使い始めるには、Cloudflare アカウントが必要です。

Cloudflare Tunnel をインストールする

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

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

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 とポートを渡すと、新しい Cloudflare Tunnel を起動できます。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 に届きます。

ランダム生成 URL を表示する Cloudflare Tunnel の例

次のステップ

Cloudflare Tunnel はさまざまな方法で設定でき、開発中アプリケーションへのアクセス提供以外にも使えます。たとえば、cloudflared に 設定ファイル を渡すと、単純な --url フラグを超える複雑なルーティングやトンネル構成を追加できます。Cloudflare DNS レコード をドメインやサブドメインに付けると、ローカルマシンへのアクセスしやすい長寿命トンネルにもできます。

さらに Cloudflare Access を組み合わせると、サーバー全体を公開したりセキュリティを妥協したりせずに、トンネルへの安全なアクセス を提供できます。Cloudflare の Zero Trust ツール一式でできることの詳細は、Cloudflare for Teams のドキュメント を参照してください。

役に立ちましたか？