S3とLambda、SESを用いてお問合せフォームを作成した話 2

前回の続きになります！
今回はHTMLの更新とAPIをたたくJSをS3にのせて実際にメールが送信されるか確認します。
前回記事はこちら

https://qiita.com/sakura11054/items/47bba94339cb62f037ef#api%E3%81%AE%E4%BD%9C%E6%88%90

S3でサーバーレスなHPを立てるお話はこちら

https://qiita.com/sakura11054/items/0b5e8603d6d4f92ac746

https://qiita.com/sakura11054/items/a29741cf124ba315d892

# S3のファイルを更新

## HTML
今あるindex.htmlを以下のものに変更します。
何の変哲もない、単純な入力フォームですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/4f3d8d9c-666f-1de6-d3ae-574f8aceaa7b.png)

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>お問い合わせフォーム</title>
</head>
<body>
    <form id="contactForm" method="post">
        <label for="name">名前:</label><br>
        <input type="text" id="name" name="name" required><br><br>
        
        <label for="email">メールアドレス:</label><br>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="message">メッセージ:</label><br>
        <textarea id="message" name="message" rows="4" required></textarea><br><br>
        
        <input type="submit" value="送信">
    </form>
    <script src="script/sender.js"></script>
</html>
```

これだけでは何もできないのでここにボタンを押下するとAPIをたたくようにJSを追加します。

## JSのコードを追加
続いてS3に新たにフォルダを作成し、JSのスクリプトを配置します。
フォルダ作成よりscriptフォルダを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/8282bcb1-4e58-421b-04e4-7387eb37bab4.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/7bb22398-a175-2eba-a819-e3cf48a94245.png)

ここに、formのsubmitアクションに反応するJSのコードを追加します。
scriptフォルダに入りアップロードを選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/ca86bef4-82f7-666c-68f4-4196e119ece6.png)

追加するJSはこちら

```Javascript:sender.js
document.getElementById('contactForm').addEventListener('submit', function(event) {
    event.preventDefault();
    
    var formData = {
        name: event.target.name.value,
        email: event.target.email.value,
        message: event.target.message.value
    };

    fetch('YOUR_API_GATEWAY_ENDPOINT', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        console.log('Success:', data);
        alert('メッセージが送信されました');
    })
    .catch((error) => {
        console.error('Error:', error);
        alert('メッセージの送信に失敗しました');
    });
});
```

さて、プログラム内に`YOUR_API_GATEWAY_ENDPOINT`とありますが、これは作成したAPI GatewayのURLになります。
URLの場所はこちらです。

### API GatewayのURL

API Gateway>API>作成したAPI

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/dbc9b1ec-485d-8735-ccdf-1f849ebb02f4.png)

左のメニューにあるステージを押下し、作成したステージ、私の場合は`v1`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/6f9014bf-a9d0-a883-df13-861135724722.png)

そのまま下にスクロールすると「URLを呼び出す」があるのでこのURLをJSのプログラムに記入します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/c87a06c9-d9e9-376f-d8ca-8048f09dc53c.png)

# 送信テスト
ここまでできると後は送信ボタンを押すだけです！
実際にメールが届くか確認してみてください。

# メールが届かなかったとき

CloudWatchのログを見ましょう！
ロググループより、Lambdaで作った関数のグループを選択。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/69756735-d2d6-8e50-457e-2703c772cd51.png)

ログストリームにLambdaの実行結果が出力されているのでこちら確認しつつ修正を加えていきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/273072/6ecf85c9-44b3-3e64-9fe9-727908726fc2.png)

# 感想

実は思いもよらないところで何回も躓き、時間がかかってしまいました...
ただ、構成自体はとても簡単にできるのでいい勉強になりました。