はじめに
AWSome Day(awsのセミナー)に参加しまして、
学習意欲が湧いたので、早速、サーバーレスで
お問い合わせフォーム有りのウェブサイト製作をしてみました。
Amazon Web Service初めて使ってみました。
備忘録としてまとめます。
やりたいこと洗い出し
- 静的なWebサイトホスティング
- お問い合わせ機能
- 問い合わせの通知 ⇨ 私 ＆ 担当者
- SSL化
使ったサービス
- Route53
- Cloudfront
- ACM (AWS Certificate Manager)
- s3 (Simple Strage Service)
- Cognito
- Lambda
- SES (Simple Email Service)
それぞれのサービスの説明は、
こちらの記事が簡潔で分かりやすいです！
「AWS is 何」を3行でまとめてみるよ
構成図
進め方
正直、初めてAWSを触るということもあり、
どこから手をつければ良いのか分かりませんでした..
なんとなく機能を分割して手をつけていきました。
- 0. 静的サイト制作
- 1. s3からs3にput、Cognito認証
- 2. Lambda、SES
- 3. Route 53
- 4. CloudFront,ACMの設定
こちらの記事、大変参考にさせて頂きました。
初心者にも分かりやすく、助かりました。
詳細
メモレベルですが、やったことを残しておきます。
① s3 / Cognito
上記サイトのjsを参照し、s3からs3にputできるようにしました。
やったこと
- s3 バケット作成、html,css,img,js配置
- Cognito IAM独自のポリシーを作成を作成し、アタッチ。Acctionでputを追加し、s3バケット名を指定するだけで大丈夫です。
- ACLのデフォルトは"public-read"なので、明示的に"authenticated-read"とかに設定する必要があります。
- CORS設定で、alloworiginを設定する必要があったのですが、Route53の設定をまだしてなかったので、後回しにしました。
② SES / Lambda
まず、SESのメール認証を行います。
SES ⇨ Email Addresses ⇨ Verify a New Email Address
自分のメールアドレスを入力し、申請するとメールが届くのでリンクを押せば完了です。①でs3からs3にput出来るようになったので、そのイベントをトリガーにLambdaの設定を行います。
こちらのサイトのjsをほぼそのまま使わせて頂きました。IAMロールは、AmazonSESFullAccessを付与します。
③ Route53
お名前.comで既にドメイン購入済みでした。
AWSで発行したNSレコードを、お名前.comの方に追加する必要がありました。手順をこちらにまとめたので参考にして頂ければ幸いです。
【Route 53】【お名前.com】【Amazon S3】Webサイト作成
④ CloudFront / ACM
大変参考にさせて頂きました。
- S3の特定バケットへのアクセスを特定のCloudFrontからのみ許可する。
- Route53でドメイン買ってACMでSSL証明書発行してCloudFrontでGithub Pageと買ったドメインと紐付けた
ACM
- 2017年10月より、DNS認証が追加され、設定が簡単になりました。またワイルドカード証明書も無料で発行できるので、CloudFront使う際は使っておきたいですね。
適応されたらCloudFront側で、http to https設定を行います。
設定完了後、s3のCORS設定に、下記を追加します。
<alloworigin>https://www.ドメイン.com</alloworigin>
まとめ / 反省点
設定項目が多すぎて、何をどこまで設定するべきなのか難しい。使った分だけ課金されてしまうこともあり、ちゃんと把握しておきたい。