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
コマンドを実行することで、インターネット上に公開されます。
$ cloudflared tunnel run <NAME>
今回は CLI から行いましたが、これらの設定は Cloudflare Zero Trust の Access > Tunnels
からも設定可能です。
ただし、 CLI から設定を行った場合は、 Web 上に反映されてはいるものの、別途マイグレーションが必要なので、使い方によっては注意です。
ということで、メモでした!