皆さんはサーバーで稼働するちょっとした自分用ツールを作りたいときはどうしていますか？
Cloudflare Workersにデプロイしますか？AWS Lambdaを使いますか？
こういった軽量なツールにはサーバーレス環境が適していますが、私はフロントエンド開発が好きなので、Next.jsやNuxt.jsで作りVercelでデプロイという手段をよくとります。
そのため、開発中はlocalhostでサーバーを立ち上げ、ローカル環境で挙動確認をするのが恒例です。
localhostの利点はデプロイの手間もなく、手軽に確認できることですね。
ただし、localhostだけの環境構築では検証できないことがあります。それは外部からのアクセス受付です。当たり前の話ではありますが、localhostはインターネット上に公開されていません。
そのため、Webhook機能を作ろうとしたときに開発環境でテストができないという事態に陥ります。
開発用サーバーを用意するのが定石かもしれませんが、ちょっとした個人開発のためにそこまでのコストをかけたくはありません。Webhook以外はlocalhostで満足しているならなおさらです。
こういった課題を手軽に解決できるのがCloudflare Tunnelsです。Cloudflare Tunnelsによってドメインさえ用意すれば、localhostで立ち上げた環境でも外部からアクセスできるようになります。
🌐 CloudflareTunnelsとは
Cloudflare Tunnelsは、ローカル環境をインターネットに公開できるサービスです。cloudflaredというツールを使って、ローカルマシンとCloudflareのネットワークの間に安全なトンネルを作成します。外部からのアクセスはすべてCloudflare経由になるため、IPアドレスを公開する必要がなく、セキュリティ面でも安心です。
また、なんといっても無料なのがうれしいところです👍
💻 実際にやってみる
用意するもの
- Cloudflareで管理しているドメイン
やりたいこと
- localhostでNext.jsのプロジェクトを立ち上げる。
- 外部サービス（LINE公式アカウント）のWebhookのリクエストを、Cloudflare Tunnelsを使ってローカル環境が受け付ける。
1. Next.jsの環境をlocalhostで立ち上げる
CLIを使ってNextJSプロジェクトを作成します。
npx create-next-app@latest
webhookでLINE公式アカウントからリクエストを受け付けるためにエンドポイント(/api/webhook/line)を作成します
import { NextRequest, NextResponse } from 'next/server';
export async function POST(request: NextRequest) {
const body = await request.json();
console.log('LINE Webhook受信:');
console.log(JSON.stringify(body, null, 2));
return NextResponse.json({ success: true }, { status: 200 });
}
2. Cloudflare Tunnelsを設定する
Cloudflare Oneページの右メニューからネットワーク > コネクタ を押下し、Cloudflare Tunnelsのページに遷移します。
「トンネルを追加する」ボタンを押下。
Cloudflaredを選択。
好きなトンネルの名前を設定。
コネクタの接続をする。
cloudflaredをインストールし、実行します。
私の環境はWindowsですがWSL2(Ubuntu)を利用しているため、Debianを選択しました。
今回のようなユースケースでは常駐させる必要もなく、必要な時だけ起動したいのでこちら（画像右下）の起動方法を使おうと思います。
cloudflared tunnel run --token (トークン)
こちらのコマンドを開発のたびに実行し、起動します。
シェルスクリプトに記述して、必要な時に呼び出すようにすると便利かもしれません。
ルートを設定。
ドメインで自身の管理しているドメインを選択します。
ルーティング先はNext.jsのプロジェクトが立ち上がるエンドポイントのhttp://localhost:3000にします。
これでCloudflare側の設定は完了です。
3. LINE公式アカウントのWebhookを設定する
Line Official Account Manager にログインし、公式アカウントを作成します。
左メニューから設定>Messaging APIに遷移し、「Messaging APIを利用する」を押下する。(これを有効化しないとWebhook設定ができない)
表示されたMessaging API設定で、「WebhookURL」に作成したドメインのWebhookURLを入力し、保存する。
Webhookをオンにする
4. 結果…
公式の案内の通り、LINE公式アカウントをブロックすることでWebhookの疎通を確認してみる
すると…
届きました。これでローカル環境でも気軽にWebhookの検証ができますね。
✨ おわりに
このように、Cloudflare Tunnelsを使うことで開発用サーバーを立てずともWebhookの検証が気軽に行えます。料金は無料であるため、個人開発で使いやすいのも魅力です。
また、余談ですが同様のサービスはngrokなど他にもあります。私はCloudflareをよく使う関係上、こちらのほうが使いやすく感じました。
CloudflareTunnelsはほかにも様々な用途での活用ができます。しかし特に私のようにwebhookの手軽なローカル検証方法を探している方のために、今回はこのユースケースにフォーカスして紹介してみました。参考になれば幸いです。
参考文献
Discussion