Menu

Cloudflare Email Sending 統合

Cloudflare Email Sending は、Cloudflare が提供するメール送信サービスで、すでにドメインを Cloudflare でホストしているプロジェクトに最適です。Resend と比較すると、追加でサードパーティのメールサービスに登録する必要がなく、Cloudflare のドメイン管理や DNS 管理とシームレスに連携できます。

NEXTY.DEV テンプレートでは、メール送信は統一された lib/mail エントリーポイントに抽象化されています。環境変数を変更するだけで Resend と Cloudflare Email Sending を切り替えられ、ビジネスコードを変更する必要はありません。

前提条件

  • ドメインがすでに Cloudflare でホストされている Cloudflare アカウント。
  • Cloudflare Workers にデプロイする場合は、cf-pg ブランチ のメールバインディング方式を参照してください。本ドキュメントは、Cloudflare SDK の REST API を使用したサーバーデプロイまたは Vercel デプロイを対象としています。

ドメインの設定

Cloudflare ダッシュボード にログインし、上部の検索ボックスに 「email sending」 と入力して、メール送信機能のページを開きます。

search-email-sending

「ドメインを接続」をクリックし、ページの指示に従って使用するドメインを選択します。

onboard-domain
select-domain

ドメインが追加されたら、クリックして詳細ページに入り、Connect をクリックして接続を完了します。

connect-email-service

接続が完了すると、Cloudflare は追加が必要な DNS レコード（SPF、DKIM、DMARC など）を表示します。コンソールのガイドに従って、対応ドメインの DNS ページにこれらのレコードを追加し、メール送信のステータスが利用可能になるまで待ちます。

API Token の作成

Cloudflare Email Sending の REST API を使用してメールを送信するには、専用の API Token を作成する必要があります。

  1. Cloudflare API Tokens ページ を開き、Create Token をクリックします。
  2. Create Custom Token を選択します。
create-email-token

  1. 以下のルールで入力します。

    • Token name：任意、例：nexty-email-sending。
    • Permissions：
      • Account → Email Sending → Edit
      • Zone → Email Routing Rules → Edit
    • Account Resources：
      • Include → 現在のアカウントを選択
    • Zone Resources：
      • Include → Specific zone → 現在のドメインを選択
api-token
  1. 生成された Token をコピーします。
  2. Cloudflare ダッシュボードの右側から Account ID を見つけてコピーします。

環境変数の設定

前のステップで取得した情報を環境変数に入力します。

# メールサービスプロバイダー：resend または cloudflare、デフォルトは resend
DEFAULT_EMAIL_PROVIDER=cloudflare
 
# 送信者情報、Resend と Cloudflare で共通
DEFAULT_ADMIN_EMAIL=[email protected]
DEFAULT_ADMIN_NAME="Your App Name"
 
# Cloudflare Email Sending 専用
CLOUDFLARE_EMAIL_API_TOKEN=your_api_token
CLOUDFLARE_ACCOUNT_ID=your_account_id
  • DEFAULT_EMAIL_PROVIDER：resend または cloudflare を指定し、lib/mail のデフォルトプロバイダーを制御します。
  • DEFAULT_ADMIN_EMAIL：送信者メールアドレス。Cloudflare Email Sending で検証済みのドメインメールである必要があります。
  • DEFAULT_ADMIN_NAME：送信者の表示名。
  • CLOUDFLARE_EMAIL_API_TOKEN：前のステップで作成した API Token。
  • CLOUDFLARE_ACCOUNT_ID：Cloudflare アカウント ID。

コードでメールを送信する

ビジネスコードは lib/mail の sendEmail を通じてメールを送信します。背後で Resend か Cloudflare かを意識する必要はありません。

import { sendEmail } from "@/lib/mail";
import { NewsletterWelcomeEmail } from "@/emails/newsletter-welcome";
 
const result = await sendEmail({
  to: "[email protected]",
  from: {
    email: process.env.DEFAULT_ADMIN_EMAIL!,
    name: process.env.DEFAULT_ADMIN_NAME || "Your App Name",
  },
  subject: "Welcome to our service!",
  react: NewsletterWelcomeEmail,
  reactProps: {
    email: "[email protected]",
    unsubscribeLink: "https://yourdomain.com/unsubscribe?token=xxx",
  },
  headers: {
    "List-Unsubscribe": "<https://yourdomain.com/unsubscribe?token=xxx>",
  },
  addToContacts: true,
});
 
if (!result.success) {
  console.error("Send email failed:", result.error);
}

明示的にプロバイダーを指定したい場合（例：A/B テストや複数プロバイダー同時送信）は、第2引数を使用します。

import { sendEmail } from "@/lib/mail";
 
// 明示的に Cloudflare を使用
await sendEmail({ ...options }, "cloudflare");
 
// 明示的に Resend を使用
await sendEmail({ ...options }, "resend");

Cloudflare SDK を直接使用する

環境変数のデフォルトプロバイダーをバイパスする必要がある場合は、Cloudflare SDK を直接使用できます。

import Cloudflare from "cloudflare";
 
const client = new Cloudflare({
  apiToken: process.env.CLOUDFLARE_EMAIL_API_TOKEN,
});
 
const response = await client.emailSending.send({
  account_id: process.env.CLOUDFLARE_ACCOUNT_ID!,
  from: "[email protected]",
  to: "[email protected]",
  subject: "Welcome to our service!",
  html: "<h1>Welcome!</h1><p>Thanks for signing up.</p>",
  text: "Welcome! Thanks for signing up.",
});

推奨做法

常に lib/mail の sendEmail を使用してください。これにより、連絡先管理、再試行、React テンプレートのレンダリング、テキスト fallback がテンプレート側で自動的に処理されます。

連絡先管理の説明

  • デフォルトプロバイダーが Resend の場合、メール送信成功後、受信者は Resend Contacts と Redis の連絡先セットの両方に追加されます。
  • デフォルトプロバイダーが Cloudflare の場合、Cloudflare Email Sending には現在連絡先 API がないため、受信者は Redis の連絡先セットにのみ記録されます。
  • 配信停止ロジック（removeContact）は、Resend Contacts と Redis の両方を同時にクリーンアップするため、プロバイダーを切り替えた後も配信停止が有効なままです。

検証

設定後、以下の方法で検証できます。

  1. ローカルまたはプレビュー環境で上記の環境変数を正しく設定します。
  2. ウェブサイトフッターのメール購読入力ボックスにテスト用メールアドレスを入力して送信します。
  3. テストメールアドレスにウェルカムメールが届いたか確認します。
  4. Cloudflare ダッシュボードにログインし、Email Sending ページで送信ログとステータスを確認します。

注意事項

  • Cloudflare Email Sending では、送信者ドメインが DNS 検証を通過している必要があります。そうでない場合、メールは拒否されます。
  • 現在の main ブランチの Cloudflare メール実装は REST API ベースであり、Node.js サーバーまたは Vercel デプロイに適しています。Cloudflare Workers ネイティブデプロイを使用する場合は、send_email バインディングで内部通信を実装している cf-pg ブランチを使用してください。
  • Resend と Cloudflare の両方の環境変数を同時に設定している場合、DEFAULT_EMAIL_PROVIDER をいつでも切り替えられ、ビジネスコードを変更する必要はありません。

関連ドキュメント

Resend

NEXTY.DEVのドキュメントに従い、プロジェクトにResendを統合する方法を学ぶ

メール通知

NEXTY.DEV テンプレートで統一されたメールインターフェースを使用してメール通知を送信する方法。