サーバーレスWebアプリにメールフォームを追加実装する 〜 バックエンド編 〜

はじめに

AWSを活用したサーバーレスWebアプリの制作で作ったWebアプリにメールフォームを追加実装します。
2部構成にしていて、先にフロントエンド編から見ると良いと思います。
サーバーレスWebアプリにメールフォームを追加実装する 〜 フロントエンド編 〜

バックエンド

ベースとしたWebアプリはAppSyncを利用していますので、フロントエンドからメールを送るLambdaを呼び出す手段もAppSyncとします。

Lambda関数の作成

Lambda関数の新規作成時、実行ロールの選択と作成で「Amazon SNS 発行ポリシー」を加えておきます。

AppSyncにLambda呼び出しのIFを追加

すでに利用しているAppSyncにLambdaを呼び出すIFを追加します。
先日書いた以下の記事がさっそく役立ちますね。
AppSyncでLambdaを呼び出す

上のLambdaをデータソースに加え、以下のようなIFをスキーマに追加し、リゾルバにアタッチします。

input ProcessSendMailInput {
	name: String!
	email: String!
	message: String!
}
type ProcessSendMailResult @aws_cognito_user_pools {
	statusCode: Int!
	body: String
}
type Mutation {
	processSendMail(input: ProcessSendMailInput!): ProcessSendMailResult
		@aws_cognito_user_pools
 :

AWS SNSの設定

AppSync経由で送られてきた内容をメール通知するためのSNSをセットアップしてゆきます。

トピックの作成

最低限、名前のみの入力で良さそうです。

サブスクリプションの作成

作成したトピックに対して、サブスクリプションの作成を行います。
プロトコルは「Eメール」、エンドポイントは「送信先のメールアドレス」とします。

サブスクリプションを作成すると、エンドポイントに指定したメールアドレスに確認メールが送られてきます。

メール本文にある「Confirm subscription」リンクを選択すると、サブスクリプションの認証が完了してステータスが「保留中の確認」から「確認済み」になります。

トピックの画面の右上にある「メッセージの発行」から、テストメールを送れるので、確認してみると良いと思います。
あと、トピック詳細にあるARNはあとでプログラムから利用します。

Lambda関数の実装

AppSync経由で送られてきた内容をSNSで通知するPythonのコードです。

lambda_function.py

import boto3
import json
import logging

logger = logging.getLogger()
logger.setLevel(logging.INFO)

sns = boto3.client("sns")
TOPIC_ARN = "arn:aws:sns:ap-northeast-1:888888888888:sample_sns_topic"
REQUEST_BODY_TEMPLATE = """
name : {0}
email : {1}
message : 
{2}
"""

def lambda_handler(event, context):
    try:
        logger.info(event)
        name = event["input"]["name"]
        email = event["input"]["email"]
        message = event["input"]["message"]
        
        requestBody = REQUEST_BODY_TEMPLATE.format(name, email, message)
        logger.info(requestBody)
        
        request = {
            "TopicArn": TOPIC_ARN,
            "Message": requestBody,
            "Subject": "mail from form by {0}".format(name)
        }
        response = sns.publish(**request)

        return {
            "statusCode": 200,
            "body": json.dumps("Email sent successfully.")
        }

    except Exception as e:
        logger.exception(e)
        return {
            "statusCode": 500,
            "body": json.dumps(e)
        }

フロントエンドからAppSyncの呼び出し

フロントエンド偏へ記載してます。

あとがき

メールフォーム、思ってたよりも簡単でした。これだけなら工数1.0Hくらいですね。
ただ、いたずら防止のための仕掛けは別途必要だと思います。

GoogleのreCAPTCHAっていうサービスを利用してみたいなと思ってるんですよね。
今度導入してみたらまた記事にしようと思います。