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

実は２回で終える予定だったのですが、AWS SUMMITに行った際、AWSのサポーターの方から、「API Gateway使わなくても直接Lambdaの関数たたけるよ^^」と教えていただいたため、確かめることに...

前回までの記事はこちら

Lambdaの設定

Lambda側の設定は単純です！
前回までで作成したLambda関数を開きます。
設定タブを開くと画像のように関数URLとあるのでこれを開きます。
現状、関数URLなしと表示されているので、関数URLを作成を押下します。

認証タイプはNONEを選択します。
NONEの場合、認証なしで関数を使用できてしまうのでセキュリティ上よろしくないです！
今回は公開する予定がなく、関数事態も単にメールを送るだけのシンプルな関数なのでNONEを設定します。

続いてその他の設定を押下し、CORSを有効化させます。
今回はそれ以外をデフォルトに設定し、保存を押下します。

保存完了後、再び関数URLのタブを開きます。
すると、LambdaにアクセスするためのURLが生成されています。
このURLをJSに書き込みます。

S3のJavaScriptを更新

前回、S3置いたJavaScriptのコード編集して再度アップロードします。
変更箇所は以前API Gatewayのエンドポイントを記入していた場所にLambdaのURLを記入します。
この後、フォームから送信ボタンを押下してメールが届けば成功です。

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_LAMBDA_URL', {
        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('メッセージの送信に失敗しました');
    });
});

感想

S3、LambdaとSESだけでお問い合わせフォームを作成することができました。
今まで、API Gatewayや他の機能を使う必要があると思って今したが、Lambda単体でできるのはシンプルでいいですね！
しかも、関数作成はLambdaの費用に含まれているのでURL作成は無料の範囲で行うことができます。
ただし、今回は機能としても認証なしで行えましたが、機能によっては認証が必須になるので、用途は選ぶ必要ありますね！