Webhook APIを使って添付ファイル付きメールを処理する(Cloudflare Workers + TypeScript)

Customers Mail CloudのWebhookは2種類あります。

  1. メール受信時
  2. メール送信時

メール受信時のWebhookはその名の通り、メールを受け取った際に任意のURLをコールするものです。この記事では添付ファイル付きメールを受け取った際のWebhook処理について解説します。

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

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

Webhook設定ダイアログ

送信されてくるデータについて

メールを受信すると、以下のようなWebhookが送られてきます(データは一部マスキングしています)。JSONにしていますが、実際にはmultipart/form-dataです。

{
    "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",
    "attachments": 1,
    "attachment1": "...."
}

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 にてサーバーが立ち上がります。

TypeScriptのコード

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

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

マルチパートフォームデータを取得する

multipart/form-data で送られてくるデータは request.formData() にて受け取れます。たとえば、添付ファイルの数を取得する場合は以下のようにします。この数が1以上の場合、添付ファイルがあるということです。

const params = await request.formData();
const attachments = parseInt(params.get('attachments') as string || '0');
if (attachments > 0) {
  // 添付ファイルあり
}

その他のフィールドも同じように get メソッドで取得できます。

console.log(params.get('filter'));
console.log(params.get('subject'));

ファイルは params.get('attachment1') にて取得します。末尾の数字は添付ファイルの数に合わせて変化します。

const file = params.get('attachment1');
console.log(file);

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

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

Webhookログ

まとめ

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

添付ファイルまで処理対象にしたい時には、この方法を利用してください。

受信サーバ | Customers Mail Cloud