Lambdaでメールフォームを作る

今回行う内容

今回はメールフォームをAWS上(Lambda)で管理してしまおうという内容です。流れは以下の通りです。

1 CloudFront上のメールフォーム用ページから入力を受付ける

2 入力をAPI Gateway経由でLambdaに送る

3 Lambdaからメールを送る

この構成のメリットとしてサーバーを保つ必要がなく、維持や管理が楽に行う事ができます。

以下、実際にこの流れができるように手順を説明していきます。

メール送信用Lambdaの作成

Lambdaによってメールを送信する方法について

こちらを参考にメール送信部分のLambdaを作ってください。

この記事ではsend-mail-from-apiというLambdaとして使っていきます。

メール送信用APIの作成

メール送信の機能を持つLambdaと結びつけるAPIを作っていきましょう。サービスのネットワーキング＆コンテンツ配信からAPI Gatewayを選択し、APIの作成をクリック。

API名を適当に決め（この記事ではsend-mail-api2とします)、APIの作成。リソースを編集していきます。これが目標です。

アクション→リソースの作成からsubmitを作っていきます。API Gateway Corsを有効にしましょう。リソースはAPIのパスの役割を持つものです。リソースを追加するとhttps://town.example.com/submitのようにアクセスできるようになります。

アクション→メソッドの作成からPOSTを選択し、セットアップします。作成したLambdaを選択しましょう。メソッドはリソースに対するアクションを表します。

これで目標の画面が表示され、APIが作成されました。このAPIを外部に公開（デプロイ）していきます。

アクション→APIのデプロイから新しいステージを選択し、適当な名前をつけてデプロイしましょう（ここではproductionとします）。ステージエディタの上に表示されるURLを用いてAPIを呼び出していきます。大量ポストなどのスパム回避のためにレートを2とかにしておきましょう。

フォーム用WebページのCloudFrontを用意

CloudFrontは、サーバーからコンテンツを得るのではなくCDNを通して得るサービスです。サーバーの負荷を少なくすることができます。

まずはS3にバケットを作りましょう。サービス→ストレージからS3を選択し、バケットを作成します。バケット名だけ適当に決めて（ここではtest-page-0817)あげればあとはデフォルトで大丈夫です。

作成したらS3の公開範囲を決めるため、アクセス権限のパケットポリシーを編集していきます。下のコードを打ち、保存しましょう。これでS3の作成・設定は完了です。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::test-page-0817/*"
        },
        {
            "Sid": "PublicReadListBucket",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:ListBucket",
            "Resource": "arn:aws:s3:::test-page-0817"
        }
    ]
}

続いてCloudFront側です。サービス→ネットワーキング＆コンテンツ配信からCloudFrontを選択し、Create Distribution からWebで始めます。

Origin Domain Nameには先程作成したS3バケットを指定し、Viewer Protocol PolicyをRedirectにしておきましょう（HTTPへのアクセスをHTTPSにリダイレクトしてくれます）。また、Compress Objects Automaticallyをonにし（自動圧縮）、Default Root Objectをindex.hmtlにします。これで作成すれば、10分ほどでStatusがDeployedになれば完了です。

フォーム用Webページ作成

HTMLでページを書いて、S3にアップロードすれば、CloudFront経由でアクセス出来るようになります。

名前とメールアドレスの入力を受け付ける非常に単純なHTMLを紹介します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
    </head>

    <body>
        <form>
            <label for="textForm">お名前: </label>
            <input type="text" id="name">
            <label for="textForm">メールアドレス: </label>
            <input type="text" id="mail">

            <button id="button">取得する</button>
        </form>
    </body>

　　　  < script>                                                              
    // ボタンの要素を取得
    var button = document.getElementById("button");     
    // ボタンをクリックした時の処理
    button.addEventListener("click", function(e) {

    e.preventDefault();

    // 入力フォームの値を取得
    var name = document.getElementById("name").value;
    var mail = document.getElementById("mail").value;
    function sendmail(subject, body) {
      return fetch('https://******.execute-api.us-east-1.amazonaws.com/production/submit', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ subject, body })
      })
    }
    sendmail(name,mail);

    });
　　　　　　　　</script>

</html>

重要なのはJavaScript部分の記述です。sendmailという関数でAPIに値を流し込みます。

    function sendmail(subject, body) {
      return fetch('https://******.execute-api.us-east-1.amazonaws.com/production/submit', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ subject, body })
      })
    }
    sendmail(name,mail);

ここですね。このindex.htmlを作成したS3にアップロードします。これでhttp://test-page-0817.s3.amazonaws.com/index.htmlにアクセスすれば以下のように表示されるはずです。

取得するで、Lambdaによって指定されたメールアドレスにメールが届くことを確認してください。

以上でメールフォームは作成完了になります。

サーバーレスでお問い合わせフォームを作る場合など、様々な用途に役立ちます。