Cloudflare Workers から MailChannels でメール送信するついでに Cloudflare Pages でコンタクトフォームを作る

# 目的

以下のブログの内容を確認します。

- [Send email using Workers with MailChannels](https://blog.cloudflare.com/sending-email-from-workers-with-mailchannels/)

[MailChannels](https://www.mailchannels.com/) とのパートナーシップにより、Cloudflare Workers から「アカウント不要・無料・スパムフィルタリング付き」のメール送信サービスが利用できます。

ただし、リクエストが Cloudflare の IP アドレスから来たときにのみ統合が機能するため、ローカルマシンで開発しているときや、ビルドサーバーでテストを実行しているときには、まだ動作しません。

# サンプルコードと FAQ

こちらが参考になります。

- [Sending Email from Cloudflare Workers using MailChannels Send API – Help Center](https://mailchannels.zendesk.com/hc/en-us/articles/4565898358413-Sending-Email-from-Cloudflare-Workers-using-MailChannels-Send-API)

> - どのドメインからでもメールを送信できますか？
>   - はい。どのドメインからでも送信できますので、送信ドメインの確認は必要ありません。
> - SPFレコードは必要ですか？
>   - Sender Policy Framework (SPF)を使用している場合は、MailChannelsのSPFレコードを追加して、弊社のIPからの送信を許可する必要があります。手順はこちらです： https://mailchannels.zendesk.com/hc/en-us/articles/200262610-Set-up-SPF-Records
> - 不正利用を防ぐにはどうしたらいいですか？
>   - MailChannelsは、ウェブホスティング業界向けに世界最大のメール送信サービスを運営しています。スパムやフィッシングを防止し、不正な送信者を特定するために、プラットフォームには広範な不正使用防止機能が組み込まれています。
> - サポートが必要な場合はどうすればよいですか？
>   - チケットを送信してください。サポートリクエストにCloudflare Workers Zoneを含めると、お客様のログを特定することができます。
> - 私のプライバシーは保護されていますか？
>   - メールサービスプロバイダとして、私たちはプライバシーを真剣に受け止めています。メッセージは、送信メッセージキューに最大6時間保存することができますが、通常、メッセージは数秒以内に配信されます。
>   - 配信後、メッセージのコンテンツは永久に破棄されます。私たちは、送信後のメッセージを復元する能力はありません。
>   - メッセージデータに関するいくつかのメタ情報は、件名、送信者、受信者のアドレス、お客様のCloudflareワーカーゾーンなど、不正使用防止の目的で保持されます。
>   - プライバシーに関するより高度なニーズがある場合は、当社のサポートチームまでお問い合わせください。
> - 利用規約について教えてください。
>   - 当社のAPIおよびその他のサービスの使用は、当社の利用規約によって管理されます。

# Cloudflare Workers でテスト

以下のコードとコマンドでテストできます。

- [kyouheicf/cf-mailchannels](https://github.com/kyouheicf/cf-mailchannels)

```shell
# Clone GitHub Repo
git clone https://github.com/kyouheicf/cf-mailchannels && cd $(basename $_ .git)

# Set To (RECEIVER_EMAIL) & From (SENDER_EMAIL) email address
wrangler secret put RECEIVER_EMAIL # test@example.com
wrangler secret put SENDER_EMAIL # sender@example.com

# Deploy Cloudflare Workers
wrangler publish src/index.js

# Open your working page
open https://cf-mailchannels.YOUR_WORKERS_SUBDOMAIN.workers.dev
```

以下のようなページが開くので、Send を押すとメールが送信されることが確認できます。

![image-20230307000013864](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20230307000013864.png)

本当にこれだけで「アカウント不要・無料・スパムフィルタリング付き」のメール送信サービスが利用できました。簡単。

![image-20230307000640435](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20230307000640435.png)

# 参考： `sender@example.com` で送信した場合のエラー

`example.com` のように、スパムフィッシングに引っかかるドメイン評価を受けた場合には以下のエラーとなります。

```
500 Internal Server Error

{"errors":["Failed to send email: 550 5.7.1 [SB01] Your email address has been blocked due to complaints.. See  https://console.mailchannels.net/insights/bounce?auid=cloudflare\u0026sender=sender%40example.com\u0026txid=3e50235114f0e675"]}
```

# Cloudflare Pages でコンタクトフォームを作成する

こちらのプラグインを参考に作成します。

- [MailChannels · Cloudflare Pages docs](https://developers.cloudflare.com/pages/platform/functions/plugins/mailchannels/)

以下のコードとコマンドで Pages プロジェクトを作成して進めます。

- [kyouheicf/cf-contact-form](https://github.com/kyouheicf/cf-contact-form)

```she
# Clone GitHub Repo
git clone https://github.com/kyouheicf/cf-contact-form && cd $(basename $_ .git)

# Create Pages project
wrangler pages project create cf-contact-form
```

UI から `RECEIVER_EMAIL=test@example.com` 、 `SENDER_EMAIL=sender@example.com` というように環境に合わせた変数を設定します。
（CLI で設定する方法を見つけられませんでした、もしくは未対応）

![image-20230309011113793](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20230309011113793.png)

その後、以下のコマンドでデプロイが可能です。

```shell
# Deploy Cloudflare Pages
# wrangler pages dev . 
wrangler pages publish .

# Open your working page
open https://cf-contact-form-xxx.pages.dev   
```

アクセスすると、以下のようなページになりますので、フォームを入力して「Send!」します。

![image-20230309004713065](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20230309004713065.png)

すると、`functions/_middleware.ts` で設定しておいたレスポンスが返されます。

![image-20230309004746432](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20230309004746432.png)

実際には、以下のメールを受信できました。

![image-20230309005026616](https://cdn.jsdelivr.net/gh/kyouheicf/image@master/uPic/image-20230309005026616.png)

# 感想

こんなに簡単に Cloudflare からメール送信ができて、コンタクトフォームも作れるのですね。

また、以下のような [Cloudflare Turnstile](https://www.cloudflare.com/ja-jp/products/turnstile/) を組み合わせたプラグインを作った人もいるようなので、よりセキュアに簡単に開発が進められるプラットフォームとして Cloudflare をどんどん活用できそうです。

- [Updated Cloudflare Pages plugins for Static Forms and MailChannels](https://cardiff.marketing/updated-cloudflare-pages-plugins-for-static-forms-and-mailchannels/)

# 参考リンク

- [Cloudflare Pagesでお問い合わせフォーム（自動返信あり）を作る - Shinobi WorksのWebブログ](https://shinobiworks.com/blog/653/)