Webhook APIを使ってメールを処理する(Cloudflare Workers + TypeScript)

Customers Mail Cloudではプログラム側からデータを取得したり、メールを送信するWeb APIの他に、Customers Mail Cloudでメールを受信した時にイベントを伝えてくれるWebhook APIが用意されています。

Webhook APIを使うことで、自前でメールサーバを立てずにメール受信のタイミングでシステムを起動させられるようになります。メールサーバを安定して動作させ続けるのはメンテナンスコストが大きいですが、Customers Mail Cloudを使うことで簡単にメールと連携したシステムが作れるようになるでしょう。

今回はCloudflare Workersで、TypeScriptを使ってメールを処理する流れを紹介します。

フォーマットはJSONとマルチパートフォームデータ

Webhookの形式として、JSONとマルチパートフォームデータ(multipart/form-data)が選択できます。この二つの違いは、添付ファイルがあるかどうかです。JSONの場合、添付ファイルは送られてきません。メールに添付ファイルがついてくる可能性がある場合は、後者を選択してください。

Webhook設定ダイアログ

今回はJSONフォーマットにおけるWebhook処理について紹介します。

Cloudflare Workersの準備

今回はローカルで開発する流れを紹介します。まず cloudflare@latest を使ってプロジェクトを作成します。最後の引数はプロジェクト名です。

npm create cloudflare@latest -- cmc

今回はTypeScriptを選択して進めています。プロジェクトが生成されたら src/index.ts を編集します。

export default {
    async fetch(request, env, ctx): Promise<Response> {
        // ここに処理を記述します
        return new Response('ok');
    },
} satisfies ExportedHandler<Env>;

実行する際には、下記コマンドを実行します。

npm start

これで、 http://localhost:8787 にてサーバーが立ち上がります。

Webhookで受け取るデータについて

Webhookを使ってPOSTされるJSONデータは、次のようになっています。

{
    "filter": "info@smtps.jp",
    "headers": [
      {"name": "Return-Path", "value": "<user@example.com>"},
        :
      {"name": "Date", "value": "Thu, 27 Apr 2023 15:56:26 +0900"}
    ],
    "subject": "Webhookのテスト",
    "envelope-to": "user@smtps.jp",
    "server_composition": "sandbox",
    "html": "<div dir=\\\\\\\\\\\\\\\\"ltr\\\\\\\\\\\\\\\\">Webhookのテスト用メールです。<div>...</div></div>",
    "text": "Webhookのテスト用メールです。\\\\\\\\\\\\\\\\r\\\\\\\\\\\\\\\\n\\\\\\\\\\\\\\\\r\\\\\\\\\\\\\\\\n--\\\\\\\\\\\\\\\\r\\\\\\\\\\\\\\\\n...",
    "envelope-from": "info@smtps.jp"
}

TypeScriptのコード

処理は src/index.ts に記述します。

export default {
    async fetch(request, env, ctx): Promise<Response> {
        // ここに処理を記述します
        return new Response('ok');
    },
} satisfies ExportedHandler<Env>;

まず、送られてくるデータに合わせて型を定義します。

export interface JsonParams {
  filter: string
  headers: Header[]
  subject: string
  "envelope-to": string
  server_composition: string
  html: string
  text: string
  "envelope-from": string
}

export interface Header {
  name: string
  value: string
}

送られてくるデータは await request.json() で受け取れます。これを JsonParams 型にキャストしています。

const params = await request.json() as JsonParams;

後は、このオブジェクトから必要な情報を取り出して処理を行います。

console.log(params.filter); // info@smtps.jp
console.log(params.subject); // Webhookのテスト

Webhookの結果は管理画面で確認

Webhookでデータが送信されたログは管理画面で確認できます。送信時のAPIキー設定など、HTTPヘッダーを編集するといった機能も用意されていますので、運用に応じて細かなカスタマイズが可能です。

Webhookログ

まとめ

メールと連携したシステムはよくあります。通常、メールサーバを立てて、その中で処理することが多いのですが、メールサーバが落ちてしまうとシステムが稼働しなくなったり、メール文面の解析が煩雑でした。Customers Mail Cloudを使えばそうした手間なくJSONで処理できて便利です。

受信サーバ | Customers Mail Cloud