0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【サーバレス】静的ウェブサイトの問い合わせフォーム送信できる仕組み【AWS】

Last updated at Posted at 2022-02-16

初めに

今回は静的ウェブサイトの問い合わせフォームを実装し、送信ボタンを押すことでメールに転送されます。使ったものは何なのか、どういうものか、どいう原理で実装できたかをメモするという意味で記事を作成しました。具体的なやり方は最後のリンクの記事を参考してください。

必要なもの

必要なものは以下になります。

1.ウェブサイト

問い合わせフォームがある静的サイト

2.Amazon S3

オブジェクトストレージサービスの一種であり、データ容量を気にすることなく保存することができます。静的サイトをこのストレージに入れることで設定を変更すると、サイト公開できます。

3.Amazon API Gateway

★API:大雑把に言うとアプリケーションが呼び出せば予期した結果を返されるような仕組みである

Amazon API Gatewayは、規模にかかわらず、簡単にAPIの作成と保護、そして公開、モニタリングが可能なフルマネージドサービスである。REST API、HTTP API、WebSocket APIがありる。

今回はREST APIを使う。REST APIは受け取ったリクエストをバックエンドサービスである、Lambda関数、AWSサービス、Mock、HTTP、VPCリンクに転送できる。

4.AWS Lambda

★FaaS:インターネットを通じて、プログラミングで作成した処理を定義・実行するクラウドの利用形態。

★サーバレス:ミドルウェアも、サーバもAWSなどのクラウドサービス提供者が管理するので、それの運用管理が不要になる。

AWS Lambdaは、サーバレスのFaaSであり、以下の特徴を持っている。
①クラウド上にプログラムを定義しておき、インターネットを通じて実行できるサービス
②サーバやミドルウェアの管理はAWSがしてくれるので、プログラムだけを考えればいいという素晴らしいサービス

5.Amazon SES

ユーザー自身のEメールアドレスとドメインを使用して E メールを送受信するための、簡単で費用効率の高い方法を提供するEメールプラットフォームである。ここでまず送り先のメールアドレスを登録する。

流れ

  1. 静的ウェブサイトをS3に入れる、設定なども変更する。
  2. フォーム送信ボタンを押すと、HTML のフォームから Javascript を使用してAPIを呼び出しデータがAPIへ送信される。
  3. APIに来たデータをAWS Lambda(Lambda関数)に渡す。
  4. Lambda関数によってメールが作成される。
  5. 作成したメールは管理者(送り先のメールアドレス)に送られる。

参考サイト

具体的な手順は以下のサイトを参考してください。

★方法1
S3 静的ウェブサイトにサーバーレスなお問い合わせフォームを実装してみた(Amazon SES + AWS Lambda + API Gateway)

★方法2
サーバレスでお問い合わせフォームを実装してみる(1)
サーバレスでお問い合わせフォームを実装してみる(2)

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?