#概要
S3にHTMLとJavaScriptで作成したWebページを配置し、CloudFrontを用いてHTTPS通信でアクセスします。
#１．S3にWebページを配置する
以下の記事を参考にログイン画面を作成しました。初心者の私でも詰まることなくハンズオンでき、可読性の良い記事でした。
Amazon Cognitoを使ってシンプルなログイン画面を作ってみる
対象のHTMLは"auth.html"で、以下のように配置しました。
パブリックアクセスはブロックしています。
#２．CloudFrontでディストリビューションを作成
S3のみでも静的なWebサイトをホスティングできますが、CloudFrontを用いるメリットは以下です。
・エッジサーバーにコンテンツがキャッシュされ、クライアントに近いエッジサーバーがコンテンツを送信するため高速。
・HTTPS通信を利用でき、 ACM (AWS Certificate Manager)で作成したSSLサーバー証明が利用できる。
・クライアントとオリジンサーバーの通信が軽減され、負荷や料金が軽減するケースがある。
Create Distributionと書かれた青いボタンを押してください。すると以下のような画面に遷移します。
CloudFrontの設定項目は以下の記事を参考にしました。
cloudfrontの設定項目（少しかみ砕いて書いてみました）
今回、設定したのは以下の４つです。
・Origin Domain Name：配信したいコンテンツのあるS3バケット
・Restrict Bucket Access：Yes
・Origin Access Identity：Create a New Identity
・Grant Read Permissions on Bucket：Yes, Update Bucket Polic ※
※S3のバケットポリシーが上書きされるため、バックアップ推奨
設定が完了したら、画面右下のCreate Distributionと書かれた青いボタンを押してください。するとDistributionが作成されますが、デプロイまで数分かかる場合があります。
#３．HTTPSを用いて配置したWebサイトにアクセス
ブラウザなどでアクセスする場合のURLはCloudFrontのドメインネームとS3のファイルパスで構成されます。
https://xxxxxxxxx.cloudfront.net/{フォルダ名}/{xxxx.html}
以上です。