メール

Resend

https://resend.com/domains

xxx.comのドメインを追加すると、Cloudflareにリダイレクトされsendがサブドメインとして作成される。

• 作成される３つのフィールドはResendが自動で作成したことをコメントとして残す。

• 作成されたフィールドは 「アプリ -> Resend」の流れとは関係なく、「Resend -> resend.emails.send()」の流れで必要

  • ResendのメールサーバーからResendが管理していないCloudflareでDNSを管理しているドメイン（xxx.com）でメールを送信するため、そのドメインの許可・証明のために必要なフィールド

  • EmailはResendからresend.emails.send()に書いた宛先(to)に直接送信され、Cloudflareのメールサーバーは経由せず、許可・証明の確認のみ行われる。

使い方の例：

    await resend.emails.send({
      from: process.env.RESEND_FROM,
      to: process.env.RESEND_TO,
      subject: "test",
      react: EmailTemplate(),
    });

• Reactコンポーネントを使わない場合、react:部分をhtml: 'message from resend', のようにする。

// EmailTemplate.tsx

const EmailTemplate = () => {
  return (
    <div>
      <h1 style={{ fontSize: "24px", fontWeight: "bold", color: "green" }}>
        corporis fuga dolorum quidem repudiandae, et odit ab fugit hic error.
      </h1>
      <hr />
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit
      </p>
    </div>
  );
};

export default EmailTemplate;

• tailwindクラスは反映されないのでインラインスタイルで書く。CSSファイルはロードされない。

• Nextjsの <Image />を入れるとメール本文が白紙になるのでimgタグを使う。

サブドメイン

Resendでドメイン追加時にCloudflareに作成するsend.xxx.com が送信を担うので、事前に mail.xxx.comや info.xxx.comをClaudflare側で作成する必要はない。

作成する必要があるケース

• send.xxx.comがすでにMXレコードとして使用されている。

• 「Receiving」をONにしたい。

Receiving

Recievingは「送信」ではない。

 await resend.emails.send({
      from: FROM,
      to: TO,
      replyTo: "xxx@gmail.com",

• replyToはGmailなどで「返信」をする先

• RecievingをONにするのはアプリ上で行われたメール送信をWebhookで検知してコードを実行したい場合

Resendのドメイン追加で xxx.comにした場合、「Revieving」をONにすると「Existing MX records detected」という警告が出る。

• 理由：Cloudflareのメール機能が有効だと xxx.comは、CloudflareのメールサーバーをMXレコードとして指している為

• なのでアプリで送信されたメールをUIで表示したいような場合は、Resendのドメイン追加時に mail.xxx.comのようにする。

  • Cloudflare側の設定は自動でResendが行う。

from

    await resend.emails.send({
      from: process.env.RESEND_FROM,
      to: process.env.RESEND_TO,
      subject: `${name}からのメッセージ`,
      html: buildEmail(name, email, message),
    });

---

RESEND_FROM="Github Actions 実行通知 <info@mail.xxx.com>"

• RESEND_FROMのmail.xxx.comはResendにドメインを追加した時のものと合致させる。

  • 具体的にはCloudflare DNSレコードのresend._domainkey.【】 の括弧と一致している必要がある。

• Emailアドレスだけでなく上記のような形で文字を差し込める。"mail.xxx.com"だけだと受信トレイでわかりづらい。

• *<>内は@より前の部分（内容は適当で良い）が無いとGmail側で受信時にフィルターに引っかかる。Postmanではメール送信が成功しているメッセージが出るのでGmail側のフィルターの可能性が高い。

  • @の手前は日本語にするとエラーになる。

  • この書き方はResend以外でも使用できる。

webhook

ダッシュボード上ではhttpsのURLしか登録できないため、開発時はターミナルで ngrok http 3000 を実行し、そのURLを登録して挙動を確かめる。

イベント：

• email.recieved：

  • resend.emails.send()のreplyToにResendのドメインを書いた場合、UserがResendのドメインを直接入力してメールをした場合に発火

• email.sent：

  • resend.emails.send()が実行され、問題なく送信されたときに発火

Nextjsの場合：

// route.ts

export async function POST(request: Request) {
  try {
    const payload = await request.json();

// payload

{
  created_at: '',
  data: {
    created_at: '',
    email_id: '',
    from: 'Email受信通知 <info@mail.xxx.com>',
    message_id: '',
    subject: 'xrwqeqwrwx からのメッセージ',
    to: [ '' ]
  },
  type: 'email.sent'
}

複数のアプリ：

• ResendはFreeだと１つのドメインしか登録できないので、アプリ固有のEmailだけをUI側で利用したい場合、対策が必要になる。

RESEND_FROM="通知 <blog-app@mail.xxx.com>"

• 上記のようにすれば、paylodのfromからそのアプリに関連するメールなのか判断できる。