4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

AWS Amplify, Lambda, SESで実現するなんちゃってメール配信

Last updated at Posted at 2023-03-11

今回は、以下のAWSリソース
 

  • Amplify
  • Lambda
  • SES

を使用して、なんちゃってメール配信を実現してみようと思います。

仕様

この記事では、以下の構成を実現します。

  1. HTMLフォームで、ユーザーからメールアドレスの入力を受け付ける
  2. Lambdaの関数URLにリクエストを送信する
  3. LambdaからSESをコール
  4. ユーザーが入力したメールアドレスに対して、メールを送信する

シンプルにメールを配信していきましょう。
ついでにカスタムドメインも取得して、独自ドメインでAmplifyをホスティングしちゃいます。

それではやっていきます。

実装

以下の手順で進めていきます。

  1. AmplifyにHTMLファイルをアップロードする
  2. route53で独自ドメインを取得
  3. Amplifyにカスタムドメインを設定
  4. Lambda関数を作成して、HTTPエンドポイントを設定
  5. route53で取得したカスタムドメインを、SESで検証
  6. LambdaにSESへのアクセス権限を付与
  7. 動作確認

1. AmplifyにHTMLファイルをアップロード

まずは、Amplifyから用意していきましょう。
どこでも良いので、以下のHTMLファイルを用意してGithubにプッシュします。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AWSでメール配信</title>

</head>
<body>
    <form action="https://xxxxx.lambda-url.ap-northeast-1.on.aws/" method="post">
      <input type="email" name="email" id="email" placeholder="メールアドレスを入力">
      <button type="submit">送信する</button>
    </form>
</body>
</html>

フォームのアクションには、Lambdaの関数URLを設定します。
現時点ではまだLmanda関数を作成していないので、Lambda関数作成後に設定してください。

Amplifyのコンソール上から新しくアプリケーションを作成します。

GithubとAmplifyを接続すると、任意のブランチを選択できるようになっているはずなので、Amplifyでホスティングしたいブランチを選択。
設定が完了したら、Amplifyが発行してくれる https://xxx.yyyy.amplifyapp.com みたいな感じのドメインでサイトがホスティングされているはずです。

このあたりは、「Amplify ホスティング」のような感じでググるとクラスメソッドさんとかの記事がたくさん出てくるので、僕はそのあたりを見つつやりました。

こちらの記事など参考になりそうです。

2. route53で独自ドメインを取得

Amplify自体はデフォルトURLのままでも良いんですが、メール配信の際に独自ドメインを使いたいので、route53のコンソール上でドメインを取得しておきます。

TLDは何でもOKですが、謎の格安ドメインみたいなものを選択するとwhois情報とかを秘匿できないみたいなので、やはり .com が無難です。$13 で取得可能。

あと、独自ドメインはroute53以外のお名前とかのレジストラで取得しても良いんですが、DNS関連の設定変更作業が発生するので、特にこだわりがなければroute53で取得する方がシンプルで簡単だと思います。

3. Amplifyにカスタムドメインを設定

先ほど紹介したクラスメソッドさんの記事で、Amplifyにカスタムドメインを適用する方法が記載されています。

  • SSLの作成
  • SSL証明
  • ドメインのアクティベーション

の3ステップがありますが、route53でドメインを取得している場合は特に詰まる事もなく数分で完了するはず。

スクリーンショット 2023-03-11 14.00.31.png

route53以外でドメインを取得していたりするとSSLの設定やドメインのアクティベートで作業を行う必要が出てきてすんなりいかないケースも存在するため要注意です。

4. Lambda関数を作成して、HTTPエンドポイントを設定

それでは、Lambdaで関数を作成していきましょう。

コンソール上から「関数の作成」を選択して、関数名や実行環境はお好みで設定。
実行ロールは「基本的な Lambda アクセス権限で新しいロールを作成」でOK。
詳細設定で、「関数URLを有効化」を設定しておきます。

作成が完了したら、先ほどのHTMLファイルのフォームアクションにラムダの関数URLを設定して、
Lambdaに「FunctionURLAllowPublicAccess」のアクセス権限を付与します。
(アクセス権限を付与しないと、AmplifyからLambdaにリクエストを送れない)

これで、AmplifyからLambda関数を実行できるようになりました。
では、メール送信の関数を作成します。

main.py
import json
import base64
from urllib.parse import unquote

import boto3
from email.header import Header

ses = boto3.client('ses', region_name='ap-northeast-1')

def lambda_handler(event, context):
    decoded_email = base64.b64decode(event['body']).decode('utf-8')
    email = unquote(decoded_email).replace('email=', '')

    display_name = '{0}<{1}>'.format(
        Header('T-unity', 'utf-8').encode(),
        'xxx@{custom_domain_name}.com'
    )

    ses.send_email(
        Source=display_name,
        Destination={
            'ToAddresses': [email]
        },
        Message={
            'Subject': {
                'Data': 'テスト'
            },
            'Body': {
                'Text': {
                    'Data': 'メールを送信'
                }
            }
        }
    )

メール送信の部分に関しては、クラスメソッドさんの以下記事のプログラムをまるっと使用させていただいてます。

メールアドレスの加工部分をちょろっと自作したくらい。
HTML標準なのかAWS側の仕様なのか分かりませんが、クライアントから平文のまま送信したメールアドレスがbase64でエンコードされた状態で渡ってきたため、デコード作業が必要でした。

とりあえず今回は深掘りせず。

※関数URLのみでLambdaをパブリックに公開するのは辞めましょう。

5. route53で取得したカスタムドメインを、SESで検証

次にSES周りの設定をやっていきます。

といっても、ほぼやる事ないです。
コンソールにログインしたら、左側のサイドバーから「検証済みID」という項目を選択して、先ほど取得したカスタムドメインを設定していきます。

検索したらこちらもクラスメソッドさんの記事がありました。

セットアップが完了するとテストメールを送信できるようになります。
セットアップ完了時点ではまだサンドボックスの状態なので、SESで検証ができたアドレスにしかメールを送信できません。

なので、さくっと受信確認ができるように、適当なgmailアドレス等を追加してIDの検証を済ませておくと良いです。
SESコンソールから送信したテストメールが届きました。

S__44843010.jpg

これでメール配信の準備ができました。
なお、プロダクションでメール配信を実行する際には、AWS側に問い合わせをして承認してもらう必要があり、何日かかかる場合もあるみたいなので急ぎ実装が必要な場合は注意が必要そうです。

6. LambdaにSESへのアクセス権限を付与

現時点ではLambdaからSESにアクセスする権限がないため、Lambda関数を実行しても500エラーが返されるはずです。
なので、LambdaのIAMに権限を追加してあげます。

先ほど作成したLambda関数のコンソール上で「実行ロール」が表示されているので、そちらをクリックしてIAMのコンソールに移動。

Lambdaにアタッチされているポリシーを編集します。
特に何も設定を変更していなければクラウドウォッチ関連のポリシーのみが設定されているはずなので、SendEmail,SendRawEmailを許可。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "logs:CreateLogGroup",
            "Resource": "{ARN}:*"
        },
        {
            "Effect": "Allow",
            "Action": [
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": [
                "{ARN}:log-group:/aws/lambda/{function_name}:*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": [
                "ses:SendEmail",
                "ses:SendRawEmail"
            ],
            "Resource": "*"
        }
    ]
}

これでLambdaにSESのアクセス権限が付与されました。
ちなみに、アクセス権限がない状態だとCloudwatchにこんな感じのエラーログが出力されます。

[ERROR] MessageRejected: An error occurred (MessageRejected) when calling the SendEmail operation: Email address is not verified. The following identities failed the check in region AP-NORTHEAST-1: xxxxx@gmail.com
Traceback (most recent call last):
  File "/var/task/lambda_function.py", line 39, in lambda_handler
    ses.send_email(
  File "/var/runtime/botocore/client.py", line 391, in _api_call
    return self._make_api_call(operation_name, kwargs)
  File "/var/runtime/botocore/client.py", line 719, in _make_api_call
    raise error_class(parsed_response, operation_name)

7. 動作確認

実際に、フォームからメールアドレスを入力して確認してみましょう。

スクリーンショット 2023-03-12 2.13.01.png

届きました。

S__44843012.jpg

この記事を書いている段階では、まだサンドボックスからプロダクションへの移行が承認されておらず、SESに登録したGmailアドレスでしか受信を確認できませんでしたが、承認されれば問題ないと思います。

おわり

という事で、Amplify / Lambda / SES を使用した簡易的なメール配信でした。

4
1
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
4
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?