Cloudflare Tunnelでローカル環境を固定URL公開しLINE Bot開発を効率化
この記事は、LINEDC Advent Calendar 2024の15日目の記事です。
はじめに
私は普段LINE Botの開発をしています。
LINE Botの開発において、ローカル環境で開発したバックエンドアプリケーションをインターネットに公開する際、ngrokを利用しています。
ただ、ngrokだと毎回URLが変わってしまうため、PCを起動するたびにLINE DevelopersコンソールでのWebhook設定が必要になってしまいます。
CloudFlareを利用すれば公開URLを固定できると聞いたので今回はそれを試します。
LINE Botに限らずwebhookでローカルURLを指定する際は便利な機能と思いますので参考にしてください。
Cloudflare Tunnelとは
Cloudflare Tunnelは、Cloudflareが提供するサービスのひとつで、ローカル環境で動作するアプリケーションを、インターネットに安全に公開するための仕組みです。
主な特徴は以下の通りです。
- URLの固定化: ローカル環境のURLを固定のURLで公開できるため、Webhook設定の変更が不要になります。
- セキュリティ: Cloudflareのセキュリティ機能を利用できるため、安全にローカル環境を公開できます。
- 手軽さ: 専用のエージェントをインストールするだけで、簡単に利用を開始できます。
Cloudflare Tunnel導入の概要
Cloudflare Tunnelを利用するためには、少し多いですが以下の手順が必要です。
- 独自ドメインの取得: Cloudflare Tunnelで利用するドメインを取得します。
- Cloudflareアカウントの作成: Cloudflareの無料アカウントを作成します。
- Cloudflareへのドメイン登録: 取得したドメインをCloudflareに登録します。
- ネームサーバーの設定: ドメイン取得サービスで、ネームサーバーをCloudflareのDNSサーバーに変更します。
- Cloudflare Zero Trustアカウントの作成: Cloudflare Zero Trustの無料アカウントを作成します。
- Cloudflare Tunnelの作成: Cloudflare Zero Trustでトンネルを作成します。
- Cloudflareエージェントのインストール: ローカル環境にCloudflareエージェントをインストールします。
また、ローカルURLの公開をコマンドで任意に公開/非公開切り替えたいときは以下の設定も必要です。
- パブリックホストネームの設定: 公開するURLとローカル環境のポートを設定します。
- Cloudflareエージェントの起動: Cloudflareエージェントを起動し、トンネルを有効化します。
手順詳細
1. 独自ドメインの取得
まず、前提としてCloudflare Tunnelでは独自ドメインが必要なので事前に取得ておきます。
どのサービスでよいのですが、私は評判の良かった今回はエックスサーバーで取得しました。
ドメインを取得する際、.jpドメインとそれ以外のドメインで、Whois情報の取り扱いに違いがあります。.jpドメインではWhois情報が公開されますが、それ以外のドメインでは、エックスサーバーの情報を代理公開し、自身の情報を非公開にできます。
今回はプライベートの小規模開発で少し試すだけなので.netのドメインを取得しました。
2. Cloudflareアカウントの作成
次に、Cloudflareの無料アカウントを作成します。Freeを選択しました。
3. Cloudflareへのドメイン登録
Cloudflareにドメインを登録します。この際、親ドメインのみ登録可能で、サブドメインを直接登録することはできません。
試しにsub domainを登録するとエラーになります。
4. ネームサーバーの設定
Cloudflareにドメインを登録すると、ドメイン提供元でNS（ネームサーバ）をCloudFlareのDNSに変更するように言われます。
Cloudflareは、単なるDNSサービスではなく、ウェブサイトのセキュリティとパフォーマンスを向上させるためのさまざまな機能を提供するため、ドメインのDNSを自由に変更する必要があるようです。
ドメインを登録するとCloudflareのDNSサーバーが表示されます。
このDNSサーバーを、ドメインを取得したサービス（今回はエックスサーバー）で設定します。
エックスサーバの場合はネームサーバ設定から開けます。
設定の反映には最大24時間程度かかる場合があるとのことですが、今回は5分程度で反映されました。
反映されるとCloudflareで以下のように表示されます。
5. Cloudflare Zero Trustアカウントの作成
Cloudflare Zero Trustのアカウントを作成します。以前はCloudflareのポータルから直接設定できたようですが、現在はZero Trustに機能がまとめられています。
サイドバーからAccessを選び「Launch Zero Trust」を選びます。
Team名を求められるので設定します。
ここでZero Trust用のプランを設定します。（CloudFlareと一緒にしてほしい、、）
無料プランを設定します。ただ、ここでは無料プランでも支払い方法としてクレジットカードなどの登録が必要です。
6. Cloudflare Tunnelの作成
準備ができたので、ここからCloudTunnelの設定です。以下にマニュアルがあります。
これに従い。Cloudflare Zero Trustでトンネルを作成します。
サイドバーからTunnelsを選択して「Add a tunnel」をクリックします。
Tunnel Nameを聞かれるので入力します。
7. Cloudflareエージェントのインストール
作成したトンネルに接続するためのCloudflareエージェントをローカル環境にインストールします。
Tunnelを作成すると環境ごとにインストール手順が表示されるので実施してください。
私の場合はWindowsの64bitを選択しました。
（ちなみにWindows版での手順で案内されるWindows版のインストーラーは、インストール時にMicrosoft Defenderのエラーが表示されました。）
インストール完了とともにエージェントは起動します。画像はキャプチャし忘れました、、。
8. パブリックホストネームの設定
公開するURL（サブドメインも可）と、ローカル環境のポートを設定します。
Public hostnameタブから設定します。
設定画面ではsub domainが設定できます。せっかく取得したドメインをCloudFlare Tunnel専用にするのはもったいないので設定しましょう。
今回はLINE Botのバックエンドを想定しているのでTypeにはHTTPを設定します。
URLの部分はアプリをローカルで起動するときのURLを設定してください。
動作確認
設定が完了したら、ブラウザで設定したURLにアクセスし、ローカル環境で起動しているアプリケーションが表示されることを確認します。
また、Cloudflareのポータルで、トンネルのステータスが「Healthy」になっていることを確認してください。
このURLをLINE DevelopersコンソールのWebhook URLに設定することで、常に同じURLでローカル環境のLINE Botに接続できるようになります。
公開/非公開の切り替え
スタートアップ設定の切り替え
Cloudflareエージェントは、デフォルトでは常に起動した状態になります。ただ、ローカル環境が常にインターネットに公開されているのは望ましくないため公開/非公開を切り替えられるようにします。
Windowsのサービス設定（検索ウィンドウで「サービス」と入力すると開きます。）で、Cloudflareエージェントのスタートアップを「手動」に変更します。
（状態は実行中になっているはずです。）
これで次回PCを起動したときはCloudflareエージェントが自動起動しなくなります。
起動、停止コマンド
PowerShellから以下のコマンドで、Cloudflareエージェントの起動・停止、状態確認ができます。なお、Terminalは管理者で開いてください。
停止
net stop Cloudflared
状態確認
Get-Service -Name Cloudflared
起動
net start Cloudflared
これで使う時だけサービス起動すればOKです。
まとめ
Cloudflare Tunnelの導入は、独自ドメインの取得や支払い情報の登録など、多少の手間がかかり思ったよりも大変でした。
（とりあえずLINE Bot開発をやってみたい、くらいの段階ではngrokの方がいいかもしれません、、）
ただ、繰り返し長期的に開発していく場合は、LINE Botの開発効率を向上させることができるのでよさそうです。
ローカル環境の公開URLを固定化することで、Webhook設定の変更が不要になり、よりスムーズな開発が可能になります。LINE bot以外でも有用ですので、ぜひCloudflare Tunnelを試してみてください。
参考
以下の記事を参考にさせていただきました。
Discussion