S3とCloudFrontを使って静的サイトを作成してみる

# これは何？
AWSの[S3](https://aws.amazon.com/jp/s3/)と[CloudFront](https://aws.amazon.com/jp/cloudfront/)を使って静的サイトの環境を作ったので備忘録

# メリット
- コストが安い(EC2などと違いアクセス分しかコストかからない)
- サーバーレスでメンテナスが不要
- S3だけで作るよりセキュリティー面good(https通信ができる)

# デメリット
- ある程度AWSの知識必要（そこまでは学習コストはかからない認識だが）
- PHPなどのサーバーサイドの言語は動かせない
- CloudFrontの設定でWAFを利用するとお金がかかる

# 環境作成

## S3の準備
バケットの作成は下の記事とほぼ同じ
https://qiita.com/rakkun/private/cbfa52a7fee3f7c0ea39

ブロックパブリックアクセス設定だけ違う（今回はチェックを外さない）
![スクリーンショット 2023-12-25 22.15.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/33768771-3782-9063-83b6-8246366a7ab7.png)

バケットポリシーや静的ウェブサイトホスティングも特に設定しない
バケットポリシーは後で設定する

## CloudFrontの準備
 ディストリビューションの作成
 オリジンドメインの部分をクリックすると先ほど作成したS3のバケットが表示されるため選択
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3638353033332f61333533336433322d383730322d333366362d663033352d3337303037376561656336382e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/3cf7113d-562e-9ba0-ada1-45c72ad14c8e.png)


ここはHTTPSにリダイレクトするように設定（onlyでもいいのかな）
![スクリーンショット 2023-12-25 22.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/243ba21e-66a8-332a-bf35-b43bfa60f35c.png)

WAFの設定有効にするだけでお金かかるはず。。。
![スクリーンショット 2023-12-25 22.28.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/14bee027-aa0a-e3d5-036b-0111f858a2de.png)

他は特に変更なく作成する。

## ファイルを配置
ここも、以前やったS3の部分と同じ
![スクリーンショット 2023-12-25 22.34.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/437ad792-580f-1030-3677-8963b4da2edd.png)

## いざアクセス
アクセス方法はCloudFrontのディストリビューションドメイン名をコピーしてブラウザに貼り付ける

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3638353033332f62626534353464392d623934302d653862302d346635392d3231313766383566343964302e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/56406f49-81cf-13d7-3897-17c876fd4160.png)



は？？？
![スクリーンショット 2023-12-25 22.36.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/a4754026-12c0-ec8c-64e5-0dd62da73baf.png)

あ、バケットポリシー。。。

## バケットポリシーの設定
自分で作らなくてもCloudFrontで必要なバケットポリシーを作成してくれる
オリジンの設定をする
![スクリーンショット 2023-12-25 23.10.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/4b14dbf2-37df-d634-1aea-b74aacdec8ed.png)

オリジンアクセスをPublicから `Origin access control settings`(俗に言うOAC) に変更
`ポリシーをコピー`をクリックしてクリップボードに保存しておく
![スクリーンショット 2023-12-25 23.13.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/7fbbac5d-e27a-1bf8-6e54-ca4dc19dd11b.png)


S3のバケットポリシーに移行してコピーした内容を貼り付ける
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3638353033332f36323230663536612d363663622d343937662d623832382d6362326662623963653838642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/1bf4054d-2c10-8276-4382-c9c9d1444b7f.png)



## 再チャレンジ！

🖕🖕🖕🖕🖕
![スクリーンショット 2023-12-25 22.54.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/2ff6fc32-0bfe-bebb-7e8c-67291772a67f.png)

あれ？詰んだ？？？

## デフォルトルートオブジェクトの設定
どうやらデフォルトルートオブジェクトの設定なるものが必要らしい
![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3638353033332f39643437386663362d306262362d646161352d623133662d3261366139393162623662352e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/6d6a5178-3615-833c-b507-34ff76a163a7.png)


index.htmlを設定してあげる
![スクリーンショット 2023-12-25 23.22.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/05ab1443-26f9-3461-1177-2147f04506ff.png)

## 三度目の正直
これでだめなら心が折れちゃう。。。
![スクリーンショット 2023-12-25 23.26.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/685033/d90af00d-76d7-296c-7acd-da679e1070cf.png)

お、無事に表示された！


# おまけ
## ページ遷移
https://d2ek2spgsf156c.cloudfront.net/
ディレクトリそのまま上げたらいけた

# 今後試したいこと
- 手動アップロードからCI/CDを使って自動でアップロード
- Route53入れて独自ドメイン


# 感想
- AWSのコンソール画面がしょっちゅう変わるから、一年後には全く同じ方法じゃできないかも。。。
- S3だけでやった時は、つまらずいけたけど複数サービス使うとたまに躓くなぁ
- ファイル更新した時に、地味にキャッシュにいじめられた（書く時間がなかったので割愛）