LoginSignup
24
11

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

Last updated at Posted at 2023-03-09

目的

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

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

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

サンプルコードと FAQ

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

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

Cloudflare Workers でテスト

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

# 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

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

image-20230307000640435

参考: 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 でコンタクトフォームを作成する

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

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

# 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.comSENDER_EMAIL=sender@example.com というように環境に合わせた変数を設定します。
(CLI で設定する方法を見つけられませんでした、もしくは未対応)

image-20230309011113793

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

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

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

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

image-20230309004713065

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

image-20230309004746432

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

image-20230309005026616

感想

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

また、以下のような Cloudflare Turnstile を組み合わせたプラグインを作った人もいるようなので、よりセキュアに簡単に開発が進められるプラットフォームとして Cloudflare をどんどん活用できそうです。

参考リンク

24
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
24
11