NuxtとAmazon SESを組み合わせて、メールを送信する

これは、「Nuxt / UnJS Advent Calendar 2024」24日目の記事です。

こんにちは、合同会社Stegの keigo です。今回は、NuxtアプリケーションAmazon SESを組み合わせた、メール送信機構の実装について紹介します。

Amazon SESとは

Amazon SES（Simple Email Service）は、Amazon Web Services（AWS）が提供するクラウドベースのメール送信サービスであり、APIやSDKを通じて、簡単にメールを送信することができます。

https://aws.amazon.com/jp/ses/

前提条件

今回の説明は、以下の前提に基づいています。

• AWSコンソール画面等で、Amazon SESのプロジェクトが作成済みである。
• API経由でアクセスするためのcredentialが発行済みである。

client-sesv2をinstall

以下のコマンドを使用して、@aws-sdk/client-sesv2ライブラリをinstallします

npm i @aws-sdk/client-sesv2

Nuxt Serverにて、メール送信関数を実装

client-sesv2SDKを使用した関数の実装には秘匿情報が必要となるため、サーバーサイドで関数を実行する必要があります。

サーバーサイドの処理するために、Nuxtアプリケーションのserverディレクトリ配下に実装します。

今回は、server/utils/mail.tsという場所にTypeScriptファイルを作成するものとします。

以下で実装した関数を使用することで、シンプルなテキストメールの送信が可能です。

import { SESv2Client, SendEmailCommand, type SendEmailCommandInput } from '@aws-sdk/client-sesv2'

interface MailMessage {
  to: string
  subject: string
  text: string
}

export const sendMail = async (mail: MailMessage) => {
  const config = useRuntimeConfig()
  const sesv2Client = new SESv2Client({
    region: config.AWS_REGION // 適宜環境変数を設定します
    credentials: {
      accessKeyId: config.AWS_ACCESS_KEY_ID, // 適宜環境変数を設定します
      secretAccessKey: config.AWS_SECRET_ACCESS_KEY, // 適宜環境変数を設定します
    },
  });
  const params: SendEmailCommandInput = {
    FromEmailAddress: config.FROM_EMAIL_ADDRESS,  // 適宜環境変数を設定します
    Destination: {
      ToAddresses: [
        mail.to
      ]
    },
    Content: {
      Simple: {
        Subject: {
          Data: mail.subject
        },
        Body: {
          Text: {
            Data: mail.text
          }
        }
      }
    }
  };

  try {
    const data = await sesv2Client.send(new SendEmailCommand(params));
    return data;
  } catch (error) {
    console.error('メール送信に失敗しました。', error);
    // エラーハンドリング
  }
}

メール送信関数を、API経由で使用可能とする

フロントエンドアプリケーションからメール送信関数を使用するために、APIを作成します。

Nuxt Serverでは、server/api/ディレクトリ配下にTypeScriptファイルを配置することで、APIエンドポイントとして公開可能です。

今回は例として、server/api/send-mail.post.tsファイルを作成し、以下のコードを追加します。

(説明のために、エラーハンドリングやレスポンス等は簡略化しています。)

import { sendMail } from '~/server/utils/mail'

export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  const { to, subject, text } = body
  await sendMail({ to, subject, text })

  return { success: true }
})

フロントエンドからメール送信APIを使用する

以下のようにAPIを使用することで、フロントエンドからメール送信APIを使用することが可能です。

<script setup>
const sendMail = async () => {
  await $fetch('/api/send-mail', {
    method: 'POST',
    body: {
      to: '[e-mail]',
      subject: 'テストメール',
      text: 'テストメールです。'
    }
  })
}
</script>

まとめ

以上で、Nuxtアプリケーションにて、Amazon SESを使用したメール送信機能を実装することができました。

個人的にNuxt Serverを使用した開発体験はとても好みなので、皆さんもぜひ使ってみてください！