Cloudflare Tunnel でローカルの開発環境を公開する

cloudflared のインストール

Cloudflare Tunnel では Cloudflare の Edge Network に接続するために cloudflared というツールを利用します。 cloudflared は各 OS のパッケージマネージャーからインストールできる他、Docker イメージも公開されています。 詳しくは公式のリポジトリを参照してください。

GitHub - cloudflare/cloudflared: Cloudflare Tunnel client (formerly Argo Tunnel)

Cloudflare Tunnel client (formerly Argo Tunnel). Contribute to cloudflare/cloudflared development by creating an account on GitHub.

とりあえずトンネルを作成してみる

まずはとりあえずトンネルを作成してみます。トンネルを作成するだけならログインをしなくても可能です。 以下のコマンドは localhost:3000 を外部に公開するトンネルを作成します。

cloudflared tunnel --url localhost:3000

コマンドを実行すると、トンネルの URL が表示されます。URL は https://<UUID>.cfargotunnel.com の形式になっています。 この URL にアクセスすると、localhost:3000 にパケットが転送されます。終了する場合は Ctrl + C で終了してください。 この UUID は一時的なものなので、次回実行すると異なるものになります。 UUID を固定したい場合は後述する手順に従って名前付きのトンネルを作成することができます。

ログイン

cloudflared から Cloudflare にログインします。 コマンドを実行すると、URL が表示されるので、ブラウザで開いてログインしてください。 もし 1 アカウントに複数のドメイン名を登録している場合は、どのドメイン名を利用するか選択する画面が表示されます。

cloudflared login

トンネルの作成

トンネルを作成します。このコマンドではあくまでトンネルの作成を行うだけで、トンネルに接続することはありません。 トンネルには名前を付けることができるので、次回以降の接続時にトンネル名を指定することで、同じ UUID を持ったトンネルに接続することができます。

cloudflared tunnel create <トンネル名>

コマンドを実行すると UUID が表示されます。この UUID がトンネルの URL になります。

トンネルの接続

作成したトンネルへの接続は先程のコマンドで作成したトンネル名を指定して実行します。

cloudflared tunnel --url localhost:3000 <トンネル名|UUID>

独自のドメイン名を利用する

UUID でのトンネルの URL は長くて覚えにくいですが、独自のドメイン名を利用することもできます。 やり方は簡単で、DNS に CNAME レコードを追加するだけです。

CNAME レコードに <UUID>.cfargotunnel.com を追加することで、そのドメイン名でトンネルにアクセスできるようになります。

トンネルの一覧表示と削除

トンネルの一覧は cloudflared tunnel list で閲覧する他、Cloudflare Zero Trust のダッシュボードからも確認できます。

トンネルの削除は cloudflared tunnel delete <トンネル名|UUID> で行うことができます。もちろんダッシュボード上からも可能です。