これは何？
AWSのS3とCloudFrontを使って静的サイトの環境を作ったので備忘録
メリット
- コストが安い(EC2などと違いアクセス分しかコストかからない)
- サーバーレスでメンテナスが不要
- S3だけで作るよりセキュリティー面good(https通信ができる)
デメリット
- ある程度AWSの知識必要（そこまでは学習コストはかからない認識だが）
- PHPなどのサーバーサイドの言語は動かせない
- CloudFrontの設定でWAFを利用するとお金がかかる
環境作成
S3の準備
バケットの作成は下の記事とほぼ同じ
https://qiita.com/rakkun/private/cbfa52a7fee3f7c0ea39
ブロックパブリックアクセス設定だけ違う（今回はチェックを外さない）
バケットポリシーや静的ウェブサイトホスティングも特に設定しない
バケットポリシーは後で設定する
CloudFrontの準備
ディストリビューションの作成
オリジンドメインの部分をクリックすると先ほど作成したS3のバケットが表示されるため選択
ここはHTTPSにリダイレクトするように設定（onlyでもいいのかな）
WAFの設定有効にするだけでお金かかるはず。。。
他は特に変更なく作成する。
ファイルを配置
ここも、以前やったS3の部分と同じ
いざアクセス
アクセス方法はCloudFrontのディストリビューションドメイン名をコピーしてブラウザに貼り付ける
は？？？
あ、バケットポリシー。。。
バケットポリシーの設定
自分で作らなくてもCloudFrontで必要なバケットポリシーを作成してくれる
オリジンの設定をする
オリジンアクセスをPublicから Origin access control settings(俗に言うOAC) に変更
ポリシーをコピーをクリックしてクリップボードに保存しておく
S3のバケットポリシーに移行してコピーした内容を貼り付ける
再チャレンジ！
🖕🖕🖕🖕🖕
あれ？詰んだ？？？
デフォルトルートオブジェクトの設定
どうやらデフォルトルートオブジェクトの設定なるものが必要らしい
index.htmlを設定してあげる
三度目の正直
これでだめなら心が折れちゃう。。。
お、無事に表示された！
おまけ
ページ遷移
https://d2ek2spgsf156c.cloudfront.net/
ディレクトリそのまま上げたらいけた
今後試したいこと
- 手動アップロードからCI/CDを使って自動でアップロード
- Route53入れて独自ドメイン
感想
- AWSのコンソール画面がしょっちゅう変わるから、一年後には全く同じ方法じゃできないかも。。。
- S3だけでやった時は、つまらずいけたけど複数サービス使うとたまに躓くなぁ
- ファイル更新した時に、地味にキャッシュにいじめられた（書く時間がなかったので割愛）