スタティックなコンテンツ配信を「速い・安い・落ちない」で実現したく、EC2を使用しないサーバーレスで実装しました。
参考：サーバーレスとは？ AWS S3中心の「落ちないインフラ」の仕組みを解説！
前例が多そうなのでスムーズにいくかと思いきや、サービスの組み合わせパターンが多く、組み合わせ方によって当然設定が違ってきました。
今回の使用例での設定をメモしておきます。
こういう進化の早いサービスは、ちょっと時期が違うだけでUIや設定内容が全く違うこともあるのもハマる要素ですね。この記事は2018年春時点でうまくいった方法です。
今回使うAWS 5点セット
Route53
用途：
独自ドメイン設定
AamazonCertificateManager
用途：
https化
ハマりポイント：
バージニア北部を指定しないと、CloudFrontに設定できない。
S3
用途：
スタティックなコンテンツ（html、css、js、imageファイルなど）を格納
設定：
バケットは公開しないので、バケット名は何でも良いけど、管理しやすいように、実際の公開ドメインにしておくのが無難。
Static website hostingを有効にする。設定。インデックスドキュメントをindex.html
ハマりポイント：
htmlがダウンロードされてしまう >> AWS S3管理画面からテストでアップロードしたら、index.htmlのContent-Typeがcontent-disposition: attachmentとなってしまい、ブラウザで表示しようとするダウンロードされてしまった。S3対応のファイルアップロードソフトからのアップは問題なかった。
Lambda
用途：
1. ベーシック認証
2. S3はルートでのindex.html補完しか設定できないので、CloudFrontエッジロケーションで Lambda を実行すサービス「Lambda@Edge」を使って、全ディレクトリにindex.html補完を設定。ただし、Lambda@Edgeをキャッシュする設定にしておかないと、ページの読み込みが遅くなって使い物になりません。
ハマりポイント：
バージニア北部を指定しないと、CloudFrontに設定できない。
Amazon CloudFrontとAWS Lambda@EdgeでSPAのBasic認証をやってみるhttps://dev.classmethod.jp/cloud/aws/cloudfront-lambdaedge-basic-spa/
CloudFront + S3 でのディレクトリアクセス
CloudFront
用途：
1. S3が独自ドメイン設定に対応していないため、CloudFrontで独自ドメインを設定。
2. エッジロケーションから配信することで表示スピードアップ
設定：
上のLambda項目で作成した関数を、Cache Behavior Settingsで設定。
ベーシック認証 >> Event TypeをViewer Requestで指定
index.html補完 >> Event TypeをOrigin Requestで指定