SMTP・API連携で高速メール配信するならブラストエンジン

TOP > Blog > API連携 > Webhookをローカル＆ステージング環境でテストする方法【blastengine】

ブラストエンジンの
機能、料金が5分でわかる

資料ダウンロード

Webhookをローカル＆ステージング環境でテストする方法【blastengine】

更新日： API連携
Webhookをローカル＆ステージング環境でテストする方法【blastengine】のアイキャッチ画像

Webhookを活用したシステム開発ではテスト環境の構築が成功への鍵となります。特にblastengineのようなメール配信サービスと連携する場合、適切なテスト環境がないとトラブルを引き起こす原因になります。本記事では開発者が効率的にWebhookのテストを行うための環境構築方法を、ローカル開発環境からステージング環境まで段階的に解説します。

まず、ローカル環境でngrokを使ってHTTPSトンネルを生成し、Webhookの動作確認を行います。その後、Vercelなどのクラウドサービスを使ったステージング環境で、より本番に近い形でのテスト方法を紹介します。これにより、テスト精度を高め実運用に備えた準備が整います。

Webhookをローカル＆ステージング環境でテストする方法

Webhookのテスト環境を構築する際は開発からステージング、本番環境まで一貫した検証が必要です。効率的なテスト環境として、ローカル開発環境とクラウドステージング環境の2つのパターンを活用することをお勧めします。

ローカル環境ではngrokを使ってHTTPSトンネルを生成し、自分のPC上で動作するアプリケーションに外部からアクセス可能にします。一方、VercelやNetlifyなどのクラウドプラットフォームを活用したステージング環境では、より本番に近い形でWebhookの受信テストが可能です。

blastengineの詳細と設定方法

blastengineはシンプルで直感的に使えるメール配信システムで、特に高い到達率とリアルタイム通知が特徴です。Webhookを活用することで配信状況やエラーを即座に確認でき、管理や運用がより効率的に行えます。

blastengine（ブラストエンジン）とは

ブラストエンジンのキャッチ画像

ブラストエンジンは、API連携・SMTPリレーで大量のメールを高速配信することが可能です。さらに、メールサーバーを必要とせず、API経由でメールを送信する仕組みも提供しています。また、サーバーの運用やメンテナンスを行っているため、常に高いIPレピュテーションを維持しながら、安全にメールを送ることができます。blastengineの特徴は以下の通りです。

  • 日本国内に99％のメール到達率
  • 高速配信エンジンにより大量配信にも強い
  • SPF・DKIM・DMARCなど送信ドメイン認証も対応済み
  • Webhook対応でエラーをリアルタイムで通知

ブラストエンジンは各メールプロバイダーや携帯キャリアのドメインに最適化されており、大規模なネットワークを経由してメール配信を行うことで、日本国内での到達率を圧倒的に高めています。

利用料金は月額3,000円からとコストパフォーマンスにも優れており、メールだけでなく、日本語での電話サポートにも対応しています。メールアドレスの入力のみで無料トライアルが可能ですので、まずは気軽にお試しください。

ブラストエンジンを無料で試す >

blastengineの設定方法

blastengineでWebhookを設定するには、まず管理画面にログインしましょう。ログイン後、右上の設定メニューを選択し、その中の「Webhook」タブから「確認・変更」をクリックします。ここでWebhookの設定画面が表示されます。Webhookのテストは以下の流れで進めます。

  1. テストメールを送信する
    blastengineのAPIを使ってテストメールを投げます。
  2. ドロップやエラーイベントを引き起こす
    配信の問題を意図的に発生させます。
  3. Webhookに通知が飛ぶ
    エラーやドロップイベントがWebhookに通知されます。
  4. Webhook内の処理やレスポンスを確認する
    受け取ったデータを元に処理が正しく行われているかを確認します。

また、blastengineの管理画面では配信ログやエラーログが確認できるので、それらもテストに役立ててください。

テスト①ローカル開発+ngrokで受信テスト

開発初期段階では本番環境にデプロイする前にローカル環境でテストできると非常に便利です。ここでは、ngrokを活用してローカル開発環境でWebhookの受信テストを行う方法を解説します。

なお、Webhookの実装方法については以下の関連記事で詳細に解説しています。本記事でも基本的に以下の記事と同じ実装方法のWebhookを例として説明します。

関連記事：Webhookの実装方法をPython・Node.jsコード付きで解説

STEP1—ngrokでHTTPSトンネルを生成

ngrokを使用するとローカル開発環境をインターネット上でアクセス可能にすることができ、Webhookの受信テストを外部から実施できます。これにより、本番環境にデプロイする前に、より実践的なテストが可能となります。

１，ngrokのダウンロード・インストール

ngrokの公式サイトに行き、上部ナビゲーションのGet ngrok→Downloadからngrokのアプリをダウンロードします。また、後で使うのでサイトから新規登録してアカウントを作成しておきましょう。

２，Webhook受信用のサーバーを起動

例えばNode.jsなどによりWebhookサーバーを実装し、npm run devで立ち上げましょう。このとき、サーバーが特定のポート、例えば3000番などでリッスンしている状態にすることが重要です。

３，ngrokを実行

例えば立ち上げたサーバーが3000でリッスンしている場合、以下のコマンドを実行します。

ngrok http 3000

４，Webhook URLの取得

ngrokの公式サイトにログインし、サイドバーの「Endpoint」を選択します。そのページに表示される「https://xxxx-xxxx-xxxx.ngrok.io」形式のURLがWebhookのURLです。このURLをメモしておきましょう。無料プランではURLが毎回変更される点に注意が必要です。

５，Webhook URLの登録

/webhook などのパスを追加し、そのURLをblastengineのWebhook設定に登録します。これで、ローカル環境の開発中コードでWebhookリクエストを実際にテストできる状態になります。

STEP2—テスト送信を実行

ngrokでトンネルが準備できたら、実際にテスト送信を行ってWebhookイベントを発生させましょう。blastengineはAPIを通じてメールを配信するサービスです。Webhookのテストも、curl などのHTTPクライアントを使って手動でAPIを叩いて確認できます。

１，APIキーの発行

まず、blastengineのダッシュボードからAPIキーを発行します。その後、ローカルのターミナルで以下のコマンドを実行して、BearerToken を生成します。

YOUR_LOGIN_ID=ログインID
YOUR_API_KEY=APIキー

# SHA256でハッシュ化する
YOUR_BEARER_TOKEN=$(
  echo -n ${YOUR_LOGIN_ID}${YOUR_API_KEY} \
  | shasum -a 256 \
  | awk '{print $1}'
)

# 出力されたアルファベットを全て小文字にする
YOUR_BEARER_TOKEN=$(
  echo -n ${YOUR_BEARER_TOKEN} \
  | tr A-Z a-z
)

# base64エンコードする
YOUR_BEARER_TOKEN=$(
  echo -n ${YOUR_BEARER_TOKEN} \
  | base64 --wrap=0
)

echo ${YOUR_BEARER_TOKEN}

OSによって微妙に書き方が違いますのでご注意ください。Bearer Tokenが取れたら以下のコマンドをターミナルで叩き、簡単なテストメールを送信します。

２，テストメールを送信

まずは正常に受信できるメールを送ってみましょう。YOUR_BEARER_TOKEN、example_from@example.com、example_to@example.comは適切な物に置き換えてください。

curl -X POST https://app.engn.jp/api/v1/deliveries/transaction \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_BEARER_TOKEN" \
  -d '{
    "from": { "email": "example_from@example.com" },
    "to": "example_to@example.com",
    "subject": "テストメール",
    "text_part": "これはテストです。"
  }'

この送信が成功すると、実際のメールが配信されます。ただし、blastengineのWebhookは成功の場合は通知されません。通知されるのは「DROP」「HARD ERROR」「SOFT ERROR」のみです。

３，失敗を誘発するテスト送信

そこでWebhookのテストのために、わざと送信失敗させてイベントを起こします。たとえば以下のように確実に存在しないアドレスをtoにして送ると失敗します。

curl -X POST https://app.engn.jp/api/v1/deliveries/transaction \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_BEARER_TOKEN" \
  -d '{
    "from": { "email": "example_from@example.com" },
    "to": "no_exist@example.com",
    "subject": "テストメール",
    "text_part": "これはテストです。"
  }'

このようにして、DROP、HARD ERROR、SOFT ERRORのようなイベントを発生させ、Webhookで受け取ったイベントを確認します。

確認はローカルで稼働しているngrokのログや、Webhook内に実装した標準出力で行えます。

テスト②ステージング環境（Vercel等）で受信テスト

ローカル環境でのテストが完了したら、次はステージング環境でのテストに進みましょう。Vercelなどのホスティングサービスやクラウドプラットフォームを活用することで、本番環境に近い形でWebhookの受信テストができます。ここではVercelを例に、ステージング環境の構築方法を解説します。

STEP1—VercelとGitHubの設定

Vercelを使用するには、まずGitHubにコードをプッシュする必要があります。プロジェクトの準備から始めましょう。

１，GitHubリポジトリの作成

GitHubにログインし、新しいリポジトリを作成します。リポジトリ名は「webhook-test」などわかりやすい名前にしましょう。作成したらローカルのプロジェクトとリモートリポジトリを連携させます。

２，プロジェクト構造の準備

Vercelで動作させるために、プロジェクトのルートディレクトリに「api」フォルダを作成します。このフォルダ内に配置されたJavaScriptファイルは、自動的にサーバーレス関数として認識されます。

例: webhook-test/api/webhook.js

３，Vercelアカウントの作成

Vercelの公式サイトでアカウントを作成し、GitHubアカウントと連携します。「Continue with GitHub」ボタンをクリックして認証を完了させましょう。

４，プロジェクトのインポート

Vercelダッシュボードで「Import Project」をクリックし、先ほど作成したGitHubリポジトリを選択します。特別な設定は不要で、デプロイボタンをクリックして完了です。

STEP2—Webhookエンドポントの作成

Vercelでは、apiディレクトリ内のファイルが自動的にAPIエンドポイントになります。適切な構造でWebhookを実装しましょう。

１，api/webhook.jsファイルの作成

プロジェクトルートにある「api」の中に「webhook.js」ファイルを配置します。このファイルがWebhookのエンドポイントとなります。

２，基本的なWebhook処理の実装

以下のような基本構造でWebhookを実装します。export defaultでハンドラー関数をエクスポートすることが重要です。また、Vercelのログで確認できるように、受信したデータをconsole.logで出力します。タイムスタンプやイベントタイプも記録しておくと、後から追跡しやすくなります。

JSONパースエラーなどに備えて、try-catchブロックでエラーハンドリングを実装します。エラーが発生した場合は、適切なHTTPステータスコードを返すようにしましょう。

export default function handler(req, res) {
  const timestamp = new Date().toISOString();

  // デバッグ用：すべてのリクエストをログ出力
  console.log(`[${timestamp}] Request received - Method: ${req.method}`);

  // GETリクエスト処理
  if (req.method === 'GET') {
    console.log(
      `[${timestamp}] GET request received - webhook endpoint is working`
    );
    return res.status(200).json({
      message: 'Webhook endpoint is active',
      timestamp: timestamp,
      ready: true,
    });
  }

  // POST以外は拒否
  if (req.method !== 'POST') {
    console.

STEP3—デプロイ

コードの準備ができたら、Vercelにデプロイしてステージング環境を構築します。

１，コードをGitHubにプッシュ

まず、作成したWebhookコードをGitHubリポジトリにプッシュします。gitコマンドで変更をコミットし、プッシュしましょう。

git add .
git commit -m "Add webhook endpoint"
git push origin main

２，自動デプロイの確認

Vercelは、GitHubのmainブランチに変更がプッシュされると自動的にデプロイを開始します。Vercelダッシュボードでデプロイの進行状況を確認できます。

デプロイが完了すると、Vercelが自動的にURLを生成します。「https://your-project-name.vercel.app」のような形式のURLが割り当てられますのでメモしておきましょう。

３，WebhookエンドポイントのURL確認

実際のWebhookエンドポイントは「https://your-project-name.vercel.app/api/webhook」となります。このURLをblastengineのWebhook設定に登録することで、イベントを受信できるようになります。

ドメイン名https://your-project-name.vercel.app/をそのまま設定しても届きませんので注意しましょう。

STEP4—テストの実行

デプロイが完了したら、実際にWebhookの受信テストを行います。Vercelのログ機能を活用して、正しくイベントを受信できているか確認しましょう。

１，blastengineでWebhook URLの登録

blastengineの管理画面にログインし、Webhook設定画面で先ほどのエンドポイントURLを登録します。URLは必ず「/api/webhook」を含む完全なパスを指定してください。

２，テストメールの送信

ngrokでのテストと同様に、APIを使ってテストメールを送信します。送信する内容はローカル環境で試したときと同じです。まずは正常なメールアドレスに送信して、その後わざと存在しないアドレスに送信してエラーイベントを発生させます。

curl -X POST https://app.engn.jp/api/v1/deliveries/transaction \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer YOUR_BEARER_TOKEN" \
  -d '{
    "from": { "email": "example_from@example.com" },
    "to": "example_to@example.com",
    "subject": "テストメール",
    "text_part": "これはテストです。"
  }'

３，Vercelのログ確認

Vercelダッシュボードの「Logs」タブから「Runtime Logs」を開きます。ここでWebhookが受信したリクエストのログを確認できます。

ログに表示されたデータを確認し、blastengineから送られてきたイベントタイプや詳細情報が正しく受信できているかチェックします。特にevent_typeフィールドでDROP、HARD ERROR、SOFT ERRORの判別ができることを確認しましょう。

トラブルシューティング

Webhookのテスト中に遭遇しやすい問題と、その解決方法を紹介します。開発効率を上げるために、これらのポイントを押さえておきましょう。

Webhookが受信できない場合

最も多い原因は、URLの設定ミスです。blastengineに登録したURLが正確かどうか、特に「/api/webhook」のパス部分が含まれているか確認してください。また、HTTPSで始まっているかも重要なチェックポイントです。

Vercelでログが表示されない場合

Vercelのダッシュボードで「Logs」タブが見つからない場合は、「Monitoring」メニューから「Runtime Logs」を探してみてください。また、console.log()を使った出力が正しく実装されているか、コードを再確認しましょう。

405 Method Not Allowedエラー

このエラーは、GETリクエストなどPOST以外のメソッドでアクセスした場合に発生します。blastengineのWebhookはPOSTメソッドで送信されるため、ハンドラー関数でPOSTメソッドのみを受け付けるようにしているのが原因です。

vercel.jsonでのエラー

デプロイの際に「Function Runtimes must have a valid version」のようなエラーが出る場合は、vercel.jsonの設定に問題があります。最新のVercelでは特別な設定は不要なので、vercel.jsonファイルを削除するか、空のオブジェクト{}にすることで解決できます。

ローカルとVercelで動作が異なる場合

環境変数の設定漏れや、ファイルパスの違いが原因の可能性があります。特にNode.jsのバージョンや、モジュールの読み込み方法（CommonJSとES Modules）の違いに注意してください。

まとめ

本記事では、Webhookテスト環境の構築から実際の運用までを詳しく解説しました。ngrokを活用したローカル開発環境でのテスト方法と、Vercelなどを使ったステージング環境でのテスト手法の両方を習得することで、本番環境への移行もスムーズに進められます。これにより、blastengineとの連携がより確実になり、堅牢で高度なメール配信システムを構築する準備が整います。

Gmail送信者ガイドライン対応バナー
Blog一覧

blastengine（プラストエンジン）ロゴ

エンジニアを面倒なメールに関するトラブルから解放するために作られたブラストエンジン
まずは無料トライアルで、その使いやすさを実感してみませんか？

＼メールアドレス入力のみ／

無料トライアル