Cloudflare Tunnelを使う 前編 基本的な使い方
ローカルの開発環境を別端末で確認できるCloudflare Tunnelというサービスとその周辺サービスの使い方を紹介します。
- カテゴリー
- Webサービス >
- Cloudflare Tunnel
発行
はじめに
Webサイトやアプリケーション開発で欠かせない作業の1つに、Webブラウザでの動作確認があります。静的なファイルをただ表示するだけであれば、特に問題はありません。
けれど、ローカルサーバーを使って開発している場合、他の端末で確認するためには、どうすればよいでしょう。別の端末で同じ開発環境を用意してもよいですが、変更がリアルタイムに反映されませんし、なんだかスマートではない気がします。
こんな場合、Cloudflare Tunnelを使うと、ローカルサーバーに別の端末からアクセスできるようになります。
Cloudflare Tunnelとは
Cloudflare Tunnelは、Cloudflareのネットワークを使って、ローカルサーバーに外部からアクセスできるようにするサービスです。
Cloudflareのアクセスセキュリティを担保するサービスであるCloudflare Zero Trustの機能の一部として位置付けられています。そのため、Cloudflare TunnelのドキュメントはCloudflare Zero TrustのConnectionsの項目にあります。
使用条件としては、管理権限を持っているドメインが必要です。 これは、Cloudflareトンネルが自身の管理しているドメインのサブドメインとしてローカルサーバーを公開するためです。また、Cloudflareアカウントも必要です。少しハードルが高いと感じる場合は、Cloudflare Tunnelのお試し版であるQuick Tunnelを使ってみるのもよいでしょう。
Quick Tunnelについては、記事の最後にあるコラムを参照してください。
ローカルサーバーを外部に公開するための方法はいくつかありますが、Cloudflare Tunnelは、ローカルサーバーをCloudflareのネットワークに接続することで、外部からのアクセスを可能にします。言い方を変えるとローカルサーバーを起動している間に限り、全世界に公開します。セキュリティに関しては、次回解説しますが、IPアドレスなどで制限をかけることができます。
Cloudflare Tunnelのほかに、代表的なサービスとしてngrokなどがあります。そのほか、以前はmacOSでも同じネットワークであればIPアドレスからアクセスできていたので、自身で確認するくらいであれば困らなかったのですが、現在は制限がきつくなり以前のように利用できません。
ngrokは無料プランと有料プランがあり、無料プランではコラムにあるQuick Tunnelのような使い方ができます。
ngrokはCloudflare Tunnelとおおよそできることは同じで、両者のおおまかな違いは、次のとおりです。
- Cloudflare：Tunnelを使うだけなら無料、Quick Tunnelを使うなら登録も不要
- ngrok：ドメインを指定したいなら有料、無料プランはQuick Tunnelとだいたい同じだが登録は必要
という感じで、お手軽さはCloudflare Tunnelに分がありそうです。
Cloudflare Tunnelの使い方
さて、それではCloudflare Tunnelの利用方法を解説します。手順はとても簡単です。
- Cloudflareのアカウントを作成する
- ドメインを追加してネームサーバーを設定する
- トンネルの設定と作成
- ローカルサーバーを起動する
これだけです。順番に見ていきましょう。
補足：ドメイン追加とネームサーバーの設定
Cloudflareでドメインを取得した場合は、すでにドメインが追加されていますので、2の「ドメインを追加してネームサーバーを設定する」という作業は必要ありません。
1. Cloudflareのアカウントを作成する
Cloudflare Tunnelを使うためには、まずCloudflareのアカウントを作成します。
もしドメインを持っていない場合は、任意のドメインを取得してください。Cloudflareのダッシュボード画面からもCloudflareのドメイン登録サービスで取得できます。詳しくは以下のリンクをご覧ください。
2. ドメインを追加してネームサーバーを設定する
ログインしたら、Cloudflareのアカウントホームからドメインを追加します。冒頭でも触れましたが、Cloudflare Tunnelは管理権限を持っているドメインを前提としています。
ドメインの追加はアカウントホームの左メニューから「Webサイト」を選択し、「＋ドメインを追加する」ボタンから行います。
Cloudflareで利用するドメインを入力して先に進むと、プラン選択の画面が表示されます。Cloudflare Tunnelを使う場合は、無料プランで問題ありません。
プランを選択すると、ネームサーバーの設定画面が表示されます。ここで表示されている「割り当てられたCloudflareネームサーバー」を、自分が管理権限を持つ各ドメイン管理画面のネームサーバー設定で入力します。
正しく設定が完了すると、しばらくした後、ドメインがアクティブになります。
ドメインがアクティブになったら、次はZero Trustのページに移動して、トンネル設定に進みます。
3. トンネルの設定と作成
Cloudflareのアカウントホームの左メニューに「Zero Trust」が表示されているので、そこからトンネルを選択します。表示されていない場合はAccessから、Zero Trustのページに進みます。
初めてZero Trustを利用するときは、チーム名の設定と、プラン選択画面が順次表示されます。こちらもFreeプランで問題ありません。ちなみにZero Trustのプラン選択では、Freeプランであっても、クレジットカードの登録が必要です。
請求が0になっていることを確認して、支払いを完了します。
利用設定が終わると、Zero Trustのトップページが表示されます。トンネルの管理画面は、左メニューの「ネットワーク> Tunnles」から表示できます。
トンネルの管理画面から「トンネルを追加する」を選択して追加します。
「トンネルを作成する」画面で、トンネルの種類を選択します。トンネルの種類とは、Cloudflareのネットワークへの接続方法です。ここでは「Cloudflared」を選択します。
「トンネル名」は自身で管理するために付けるので、なんでもよいのですが、複数のトンネルを管理するのであれば、それぞれわかりやすい名称にしておくとよいでしょう。名前は一意である必要があります。ここではlocalとしました。
ローカルサーバーからCloudflareのネットワークへの接続をするコネクタをインストールして、実行します。環境を選択し、画面に表示されているコマンドをコピーします。ここではMacのターミナルから実行します。
コネクタのインストールと実行
brew install cloudflared &&
sudo cloudflared service install XXXXXX（トークン）注意：コネクタのインストールと実行コマンド
実行コマンドはCloudflareに接続するためのトークンを含んでいます。そのため管理には注意が必要です。
ターミナルでコネクタのインストールと実行が終わりました。先ほどの画面が自動的に切り替わり、下部に「Connectors」が接続済ステータスで表示されます。ここまで確認して「次へ」ボタンから先に進みます。
次の「トラフィックのルーティング画面」で、パブリックホスト名を入力します。このホスト名は外部からアクセスするURLとして使われます。
サブドメインは入力してもしなくても問題ありませんが、わかりやすいようにここでは、local.ドメイン名としました。
サービスは、ローカル環境で立ち上げるlocalhostとポート番号を指定します。前もってローカルサーバーのポート番号がわかっている場合は入力し、わからない場合は後で変更できます。
ここでは、筆者の開発環境でAstroが起動するデフォルトサーバーとなっているlocalhost:4321を指定しています。
「トンネルへ戻る」からトンネルのページに戻り、一覧を見ると、作成したトンネルのステータスが「HEALTHY」になっていることが確認できます。HEALTHYであれば、Cloudflareがトラフィックを処理できる状態になっています。
4. ローカルサーバーを起動する
ここまでで準備ができているので、あとはローカルサーバーを起動して、設定したトンネルにアクセスしてみましょう。
ローカルサーバー自体はなんでもよいので、ここではAstroプロジェクトでサーバーを起動しています。
ローカルの開発サーバーの立ち上げ
$ npm run dev
> [email protected] dev
> astro dev
17:45:51 [types] Generated 0ms
17:45:51 [content] Syncing content
17:45:51 [content] Synced content
astro v5.1.5 ready in 109 ms
┃ Local http://localhost:4321/
┃ Network use --host to exposeサーバーが起動したら、ブラウザでhttp://localhost:4321にアクセスして、まずはローカルで表示されることを確認します。
次に、設定したトンネルにアクセスします。設定したサブドメイン（local.ドメイン名）を入力してアクセスします。他の端末からも同様のURLでアクセスできます。
管理権限のあるドメイン「なし」で使える「Quick Tunnels」
Cloudflare Tunnelのお試し機能としてQuick Tunnelsがあります。こちらは、管理権限のあるドメインや、Cloudflareのアカウントも不要で、Cloudflareのネットワークにローカルサーバーを接続するためのコネクタであるcloudflaredをインストールすれば利用できます。
プライベートで開発している場合などに、ちょっと試したいときなど、設定不要で利用できるので便利です。ただ、お試し版であるため、アクセス制限などはかけられませんし、作成したトンネルでは200アクセスまでしか利用できません。
macOSであれば、次のコマンドでcloudflaredをインストールできます。
コネクタのインストール
brew install cloudflaredそのほかのOSは以下を参照してください。
トンネルの作成も簡単で、以下のコマンドを実行するだけです。ここでは本編のサーバーを対象にしているので、ポート番号を4321としていますが、ご自身で対象にしたいローカルサーバーのポートで置き換えます。
トンネルの作成
cloudflared tunnel --url http://localhost:4321実行すると、トンネルが作成され、cloudflare.comのサブドメインでアクセスできるようになります。
ターミナルの出力にURLが記載されています。このURLでCloudflare Tunnelと同じように外部アクセスできます。
ターミナル出力結果
+--------------------------------------------------------------------------------------------+
| Your quick Tunnel has been created! Visit it at (it may take some time to be reachable): |
| https://operator-offline-muze-fighting.trycloudflare.com |
+--------------------------------------------------------------------------------------------+
ここまでのまとめ
今回はトンネルを設定し、外部から接続できることを確認しました。ただ、このままではURLを知っている、あるいは何らかの形で捕捉できた場合、ローカルサーバーが起動している間はアクセスできてしまいます。
次回はアクセスに制限をかける方法などについて解説します。