AWS Amplify Gen2 で AWS 上にすぐデプロイできる問い合わせフォームを作ってみた
いわさです。
よくあるユースケースなのですが、静的ウェブサイトを CloudFront や S3 でホスティングした時でも問い合わせ用の動的なフォームが欲しくなるときがあります。
さっとデプロイできる環境が欲しかったのと、Basic 認証などを使いたかったので Amplify で作成することにしました。
ソースコードは以下のリポジトリで公開しています。
フロントエンドは Next.js で、バックエンドは Amplify スタック上で API Gateway と Lambda 関数 と SNS トピックで構成されています。
デプロイ方法
デプロイの流れですが、AWS のマネジメントコンソールで新しいアプリの作成を開始します。
Git プロバイダーに GitHub を選択します。
冒頭のリポジトリからフォークした環境を用意しておき、リポジトリとブランチで指定します。
あとは数分で自動デプロイが完了するので待機しましょう。
このアプリケーションは問い合わせフォームの入力内容を API Gateway へ送信します。
API Gateway は HTTPS でのアクセスが強制化されているので、バックエンドへデータを送信する際の SSL/TLS 通信は必須となっています。
バックエンド API Gateway はリクエストを受信した後に Lambda 関数で処理を実行します。その Lambda 関数からは Amazon SNS トピックへメッセージを送信します。
今回作成したスタックは上記の処理までとなっています。
あとはここからメールで問い合わせメッセージを受信した環境の SNS サブスクリプションを手動で登録して好きなように使ってくださいという感じですね。
対象 SNS トピックは Amplify コンソールのデプロイされたバックエンドリソースから確認ができます。
デプロイされた Amplify ブランチの環境へアクセスしてみると最低限の問い合わせフォームが表示されます。ここで内容を入力して送信ボタンを押すと SNS トピックまでメッセージが連携される感じです。
今回は試しに E メールサブスクリプションを登録しておきました。
お問い合わせが発生するたびに次のようなメールを受信することができます。
さいごに
本日は AWS Amplify Gen2 で AWS 上にすぐデプロイできる問い合わせフォームを作ってみました。
私の場合はとある申請で問い合わせフォームを一時的にホスティングする必要があって、Amplify 用のリポジトリを用意しておくとフルスタックで即席でデプロイできるので良いかなと思い用意してみました。
フロントエンドがシンプルすぎてそのまま使えるものではないですがよかったらカスタマイズして使ってみてください。
