Cloudflare Zero Trust で localhost で運営しているサーバーをインターネットに公開したい

ngrok 2.0、便利ですよね。ただし、商用利用すると 20USD/mo となり、ちょっと個人では厳しいお値段です。
ということで、今回は Cloudflare Zero Trust を使って、同様のことを無料でやろうと思います。

Cloudflare の Zero Trust サービスは、使用ユーザーが 50 人未満であれば、無料で使うことが出来ます。
今回はそのうち、いろいろある機能のウチの 1 つである Tunnel サービスを使うことで、 ngrok と同じ事を実現します。
ということで、やっていきましょう。

まずは、 cloudflared コマンドをインストールします。
わたしは Windows 環境を使っているので、下記コマンドでインストールします。

$ scoop install cloudflared

インストール後、ログインコマンドを実行し、ブラウザを開きます。

$ cloudflared tunnel login
A browser window should have opened at the following URL:

https://dash.cloudflare.com/argotunnel?callback=xxxx

If the browser failed to open, please visit the URL above directly in your browser.
You have successfully logged in.

ブラウザで Cloudflare にログイン後、 cloudflared を適用するドメインを選択します。
わたしの場合は、初回ログイン時には何も表示されず、再度ターミナルに表示された URL を踏むことで選択画面が表示されました。

選択後、ブラウザで認証が完了し、以下のようなメッセージが表示されていれば完了です。

You have successfully logged in.
If you wish to copy your credentials to a server, they have been saved to:
C:\Users\natsuneko\.cloudflared\cert.pem

ログイン後、 Tunnel を作成します。

$ cloudflared tunnel create <NAME>

<NAME> の部分には、自分がわかりやすい名前を入れると良いです。
実行が成功すると、以下のようなメッセージが表示されます。

Tunnel credentials written to C:\Users\natsuneko\.cloudflared\7b5702c7-da4b-4bc7-9c67-df2f102a85aa.json. cloudflared chose this file based on where your origin certificate was found. Keep this file secret. To revoke these credentials, delete the tunnel.

Created tunnel natsuneko with id 7b5702c7-da4b-4bc7-9c67-df2f102a85aa

このとき表示された written to ... の部分と、 with id ... の部分はメモしておきましょう。
作成後、 ~/.cloudflared/config.yml に下記のような設定を書き込みます。

tunnel: 7b5702c7-da4b-4bc7-9c67-df2f102a85aa
credentials-file: C:\Users\natsuneko\.cloudflared\7b5702c7-da4b-4bc7-9c67-df2f102a85aa.json
ingress:
  - hostname: localhost.natsuneko.io
    service: http://localhost:8000
  - service: http_status:404

このとき、 tunnel には with id ... の GUID 部分を、 credentials-file には、 written to ... のパス部分を記述します。
ingress リストには、 hostname はインターネットからアクセスするときにドメイン名 (ログイン時に選択したドメインのサブドメイン)、 service にはアクセス先 URL を指定します。
今回の場合は、 https://localhost.nastuneko.io に接続することで、 cloudflared を実行しているマシンの http://localhost:8000 に接続できるようになります。

設定が完了したら、下記コマンドを実行し、ドメイン名などを反映します。

# cloudflared tunnel route dns <NAME> <DOMAIN>
$ cloudflared tunnel route dns <NAME> localhost.natsuneko.io
2022-10-03T09:29:32Z INF Added CNAME localhost.natsuneko.io which will route to this tunnel tunnelID=7b5702c7-da4b-4bc7-9c67-df2f102a85aa

最後に、 run コマンドを実行することで、インターネット上に公開されます。