ローカル環境でngrokを使ってWebhookを受信する方法

はじめに

Webhookを使った開発を行う際、通常、外部からのリクエストをローカルで受信するのは難しいです。ngrokを利用することで、ローカル環境でも簡単にWebhookの受信テストが可能になります。本記事では、ngrokを使ってローカルでWebhookを受け取る方法を解説します。

ngrokとは

ngrokは、ローカル環境で動作しているWebサーバーに一時的なパブリックURLを割り当て、外部からのアクセスを可能にするツールです。このため、Webhookを用いたテストや、クライアントに対してローカル環境を共有したい場合などに便利です。

ngrokのインストール

ngrokを使用するため、公式サイトからインストールを行います。
https://ngrok.com/download

Webhook受信プログラムの作成・起動

Webhookの受信をテストするため、まずはローカルで簡単なWebサーバーを立ち上げます。今回はNode.jsを使って実装します

1. コードの準備：index.jsとして以下のコードを作成します。

index.js

const express = require("express");
const bodyParser = require("body-parser");

const app = express();
const PORT = process.env.PORT || 3000;

app.use(bodyParser.json());

app.post("/WebHook", (req, res) => {
  const payload = req.body;
  console.log("Received WebHook:", payload);

  res.status(200).send("WebHook received successfully");
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

1. ライブラリのインストール
   npm install express body-parser

2. サーバーの起動
   node .\index.js

これで、ポート3000でサーバーが起動します。

ngrokでローカルサーバーにトンネルを作成

次に、ngrokを使ってローカルサーバーにパブリックURLを割り当てます。以下のコマンドでトンネルを作成し、外部からアクセスできるURLを発行します。ます。

ngrok http 3000

実行後に表示される出力から、外部アクセス用のURLを確認します。このURLは、後でWebhookの設定時に使用します。

Forwarding     https://3818-240b-10-9161-de00-6166-4d6a-ad40-6467.ngrok-free.app -> http://localhost:3000  

動作確認

ここではGitHubのWebhook設定を利用して、ngrok経由でローカルサーバーにリクエストを送る手順を紹介します。

1. GitHubのリポジトリ設定画面から、Webhookの追加を選択します。
2. Payload URLに、ngrokで発行したパブリックURLを入力し、末尾に/webHookを追加します。
3. Webhook設定を保存し、リポジトリのイベント（例：pushイベントなど）をトリガーします。

ログの確認

サーバーのコンソールに、GitHubから送られたWebhookの内容が表示されていれば、Webhookの受信に成功しています。

Received WebHook: {
  zen: 'Keep it logically awesome.',
  hook_id: 478387677,
  hook: {
    type: 'Repository',
    id: 478387677,
    name: 'web',
    active: true,
    events: [ 'push' ],
    config: {
      content_type: 'json',
      insecure_ssl: '0',
      url: 'https://3818-240b-10-9161-de00-6166-4d6a-ad40-6467.ngrok-free.app/webhook'
    },
    updated_at: '2024-05-15T11:54:52Z',
    created_at: '2024-05-15T11:54:52Z',
    last_response: { code: null, status: 'unused', message: null }
  },
  ・
  ・
  ・
  ・
}

また、GitHub上でもローカルサーバーからのレスポンスが帰ってきていることが確認できました。

まとめ

ngrokを使うと、簡単にローカルでのWebhook開発やテストが可能になります。ぜひ、ngrokを活用して、効率的な開発環境を構築してください。