Resend でメールを送信する

このチュートリアルでは、Resend ↗ を使って Workers からトランザクションメールを送信する方法を学びます。完了すると、次のことができるようになります。

• メール送信用の Worker を作成する
• Resend にサインアップし、Cloudflare ドメインを追加する
• Resend を使って Worker からメールを送信する
• シークレットで API キーを安全に保存する

このチュートリアルを進めるには、次のものが必要です。

• Cloudflare アカウント ↗（まだ持っていない場合）
• 登録済み のドメイン
• インストール済みの npm ↗
• Resend アカウント ↗

まずコマンドラインで C3 を使い、Worker プロジェクトを作成します。表示されるプロンプトに答えます。

npm create cloudflare@latest

CLI 引数を使うと、手順を短縮できます。

npm create cloudflare@latest email-with-resend -- --type=hello-world --ts=false --git=true --deploy=false

これで、次の内容のシンプルな hello-world Worker が作成されます。

export default {
	async fetch(request, env, ctx) {
		return new Response("Hello World!");
	},
};

Resend アカウントをまだ持っていない場合は、こちらから無料アカウントに登録 ↗ できます。登録後、サイドメニューの Domains を開き、新しいドメインを追加するボタンを選びます。モーダルに追加するドメインを入力し、リージョンを選びます。

次に、Cloudflare ドメインへ追加する DNS レコードの一覧が表示されます。Cloudflare ダッシュボードで先ほど入力したドメインを選び、DNS > Records を開きます。Resend の DNS レコード（DKIM、SPF、DMARC）を Cloudflare ドメインへコピーして貼り付けます。

完了したら Resend に戻り、Verify DNS Records ボタンを選びます。レコードが正しく設定されていれば、ドメインのステータスは Verified に更新されます。

最後に、サイドメニューの API Keys を開き、API キーを作成します。分かりやすい名前と適切な権限を付けます。キーを追加するボタンを選び、API キーを安全な場所にコピーします。

最後に、これまでの内容を Worker にまとめます。先ほど作成した Worker のディレクトリでターミナルを開き、Resend SDK をインストールします。

npm i resend

Worker では、次のように Resend ライブラリを import して使います。

import { Resend } from "resend";

export default {
	async fetch(request, env, ctx) {
		const resend = new Resend("your_resend_api_key");

		const { data, error } = await resend.emails.send({
			from: "[email protected]",
			to: "[email protected]",
			subject: "Hello World",
			html: "<p>Hello from Workers</p>",
		});

		return Response.json({ data, error });
	},
};

ローカルでコードをテストするには、次のコマンドを実行し、ブラウザーで http://localhost:8787/ ↗ を開きます。

npm start

Worker は npm run deploy でデプロイします。

API キーやトークンなどの機密情報は、必ずシークレットに保存します。シークレットはすべて暗号化され、保護の層が追加されます。そのため、API キーはシークレットに移し、Worker の環境から参照することをおすすめします。

ローカル開発用のシークレットを追加するには、.env ファイルと同じように動作する .dev.vars ファイルを作成します。

RESEND_API_KEY=your_resend_api_key

デプロイ済み Worker にもシークレットを追加するには、次を実行します。

npx wrangler secret put RESEND_API_KEY

追加したシークレットは、Worker の fetch イベントハンドラーに渡される env パラメーターから参照できます。

import { Resend } from "resend";

export default {
	async fetch(request, env, ctx) {
		const resend = new Resend(env.RESEND_API_KEY);

		const { data, error } = await resend.emails.send({
			from: "[email protected]",
			to: "[email protected]",
			subject: "Hello World",
			html: "<p>Hello from Workers</p>",
		});

		return Response.json({ data, error });
	},
};

最後に、この更新を npm run deploy でデプロイします。

• シークレットで API キーとトークンを保存する。
• ドメインを Cloudflare に移管する。
• Workers からメールを送信する