技術メモ |

ngrok がなんか面倒な感じだったので Cloudflare Tunnel の Quick Tunnels を使ったら、良かった話

By: 「Lately(レイトリー)」編集部

技術・開発

手元でしか動いていないサーバーを遠方の誰かに見せたいことってたまにありますよね。

一時的にしか公開する必要がなく、見せた後には消してしまいたい。

そういうケースだと、どこかのサーバーにデプロイするのは大げさ且つ面倒です。

この記事のポイント

  • 一時的にローカルサーバーを外部公開をしたい際はツールを使うと気軽に可能
  • 以前は ngrok がこの用途に便利だったが、仕様変更があり手軽さが減っていた
  • Cloudflare Tunnel の Quick Tunnels は、以前の ngrok と同じ使い勝手で使えて同じことが実現可能で便利

以前は同じ様な用途で ngrok を使用した

以前、同じ様な目的で ngrok を使用し、手軽で便利だったので、今回も使用しようと考えました。

今回も ngrok をつかってみると…

早速 ngrok を使ってみると…

ngrok http 4321 # localhost:4321 を公開したい
コマンド実行後に出力されたメッセージ
ERROR: authentication failed: Usage of ngrok requires a verified account and authtoken.
ERROR:
ERROR: Sign up for an account: https://dashboard.ngrok.com/signup
ERROR: Install your authtoken: https://dashboard.ngrok.com/get-started/your-authtoken
ERROR:
ERROR: ERR_NGROK_4018
ERROR: https://ngrok.com/docs/errors/err_ngrok_4018
ERROR:

アカウントを作れとややこしいことを言われました。

以前はこんな事なかったような…。

前回は使ってみて、手軽だった記憶があるので、軽く調べてみたら、やはり仕様変更があったようです。

以前は設定なしで利用できていましたが、少し前にアカウント登録が必要になりました。

アカウントが必要になったngrokの利用準備手順

ngrok を使用するためには、アカウント登録が必須となりました。以前は(Webの記事を見る限り)、アカウント登録せずともトンネリングが使用できていたようです。

2024年版 ngrok を使用したローカルサイトの公開について(アカウント登録など必要) #ngrok - Qiita

思い出した Cloudflare Tunnel

ngrok がパッと使用できないとわかったので、少し考えていると、ngrok と同じ様なサービスを Cloudflare が提供しはじめた、というニュースを見たのを思い出しました。

どうせなら、使ったことのないものを使ってみようと、今回は Cloudflare Tunnel を使ってみることにしました。

より詳しくいうと、今回使う機能は Cloudflare Tunnel の Quick Tunnels という機能になるようです。

Cloudflare Tunnel を使ってみる

インストール

まず Cloudflare Tunnel に必要な cloudflared をインストールします。

Downloads · Cloudflare Zero Trust docs

brew install cloudflared

外部へ公開

そして Web サーバーがローカルで起動した状態で cloudflared を実行します。

cloudflared tunnel --url localhost:4321 # localhost:4321 を外部に公開したい
コマンド実行後に出力されたメッセージ
INF Thank you for trying Cloudflare Tunnel. Doing so, without a Cloudflare account, is a quick way to experiment and try it out. However, be aware that these account-less Tunnels have no uptime guarantee, are subject to the Cloudflare Online Services Terms of Use (https://www.cloudflare.com/website-terms/), and Cloudflare reserves the right to investigate your use of Tunnels for violations of such terms. If you intend to use Tunnels in production you should use a pre-created named tunnel by following: https://developers.cloudflare.com/cloudflare-one/connections/connect-apps
INF Requesting new quick Tunnel on trycloudflare.com...
INF +--------------------------------------------------------------------------------------------+
INF | Your quick Tunnel has been created! Visit it at (it may take some time to be reachable): |
INF | https://<RANDOM_SUBDOMAIN>.trycloudflare.com |
INF +--------------------------------------------------------------------------------------------+

これだけで、localhost:4321 で動いていたサーバーを https://<RANDOM_SUBDOMAIN>.trycloudflare.com という URL で一時的に外部に公開することができました。

昔 ngrok を使用した際の手軽な使い勝手と同じ様な感じで使用することができました。

サブドメイン部分はランダムな英単語をハイフンで繋いだものになっており、ngrok より公開 URL がわかりやすくなっていた気がして、便利だと思いました。

まとめ

ngrok が仕様変更していたため、手軽さがなくなっていましたが、Cloudflare Tunnel で同じことが実現できました。

頻繁に使うものではないですが、知っていると便利な方法です。

Web 開発をする機会が多い人は知っておいて損はないノウハウなので、是非活用してみてください。

参考にしたサイト

最新の情報をいち早くお届け!

この記事がいいと思ったらぜひフォローしてください。あなたの小さな支援が励みになります。

でフォローする

最新の情報をいち早くお届け!

この記事がいいと思ったらぜひフォローしてください。あなたの小さな支援が励みになります。

でフォローする

Google 検索で
最新記事を見つけやすく!

「優先するソース」に追加すると、Google の検索結果や AI 検索で「Lately(レイトリー)」が表示されやすくなります。

Google で優先するソースとして追加

Google 検索で
最新記事を見つけやすく!

「優先するソース」に追加すると、Google の検索結果や AI 検索で「Lately(レイトリー)」が表示されやすくなります。

Google で優先するソースとして追加