cloud front + s3 で静的webサイトの環境構築

*この記事はawsハンズオンビギナーズをやってみて復習として作成しています
*途中手順に含んでいませんがS3ウェブサイトホスティング有効状態で映るか、Route53のエイリアスでS3バケット指定して映るか確認しながらやっていただくと、映らなかった時に問題の切り分けがしやすいかと思います。

### 1,まずはs3にてバケットを作成
![スクリーンショット 2022-11-03 17.10.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/e8ccf74d-a47d-6976-424e-b5f60af0aa75.png)

~注意点~
・使用したいドメインと同じ名前でバケット名を設定する
・サイトとして公開するのでパブリックアクセスを許可しておく

### 2,プロパティからウェブサイトホスティングの設定をする
![スクリーンショット 2022-11-03 17.27.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/a0b1df48-ef8a-eedd-cb88-dfa1bd391af6.png)

~設定項目~
・ウェブサイトホスティングを有効
・ホスティングタイプを「ウェブサイトをホストする」にチェック
・インデックスドキュメントでアクセスした時に最初に表示させるファイルの設定をする

### 3,バケットポリシーを設定する
アクセス許可という項目からバケットポリシーを選択します。
![スクリーンショット 2022-11-03 17.33.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/71c04d97-a77c-18db-75d3-8ef5c195b4a6.png)

~設定項目~
・resourceの部分で１で作成したバケットの名前を入れる

~注意点~
パブリックアクセスを有効にしただけではアクセスできない

### 4,cloud9を起動する
名前設定画面
![スクリーンショット 2022-11-03 17.44.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/ab5356ef-8051-84fe-3ea4-509e84cf1d92.png)

~設定項目~
必要があればdiscriptionに使用用途などの説明文を入れておく

スペック設定画面
![スクリーンショット 2022-11-03 17.45.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/93c35cca-ac63-eea6-64fd-073d96a71b85.png)

~設定項目~
・インスタンスタイプによっては処理速度が変わったりする。サクサク快適がいいのであればt3smallを選ぶといいと思います

詳細設定部分
![スクリーンショット 2022-11-03 17.45.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/46746899-f179-3377-2aa3-388f7489e042.png)

~設定項目~
・cost saving settingはデバイスの設定でいう自動スリープモードになるまでの時間の設定のようなものです

最後に確認画面になりますので「create environment」をクリックして完了

できました。
![スクリーンショット 2022-11-03 17.43.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/67dc268a-f521-e0e9-cd21-4ef8352876d5.png)

### 5,静的サイト用のディレクトリを作成します。

今回はsample_cdnとしました
![スクリーンショット 2022-11-03 18.01.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/d0d9aea6-8d34-eaa8-0518-db9f9b6e9cc4.png)

### 6,html,cssファイルを設置していきます。

今回はs3,cloudfrontを使って配信することが目的ですのでサイト自体は適当です。今回は画像置いただけです。

![スクリーンショット 2022-11-03 18.06.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/3f1d2e5b-8aee-fc18-ef93-7389d42835d0.png)

### 7,cliを使ってsample_cdnディレクトリ配下のファイル群をs3に送る
![スクリーンショット 2022-11-03 18.47.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/e85dbc23-f9e9-6c37-d529-02c88fa3bec1.png)


~手順~
１、5番で作ったディレクトリに移動
２　aws コマンドでカレントディレクトリ配下にあるもの全てをs3バケットにコピーする

```
$ aws s3 cp .  s3://バケット名 --recursive
```

ドットでディレクトリ配下全てを指定して--recursiveで再起的にファイル群をs3にコピーします。

これだとまだS3に直接アクセスできる、httpでもアクセスできてしまうのでこの辺りの設定を変えていきます

### ８,CloudFrontを作成します
![スクリーンショット 2022-11-06 12.45.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/9067292e-d4ae-be2e-1fd5-a86225fc8d41.png)


~設定項目~
1,「オリジンドメイン」でS3バケットを選択する
2,S3バケットアクセスを「Legacy access identities」にして「はい、バケットポリシーを自動で更新します」を選択します。

S3の画面から自動でS3のポリシーが変更されていることがわかります
![スクリーンショット 2022-11-06 15.38.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/34fa986e-3ecb-d91c-0075-532f82d907b7.png)


3,「ビヘイビア」の「ビューワー」の設定をRedirect HTTP to HTTPSにしてHTTPをHTTPSにリダイレクトする設定にして保存
![スクリーンショット 2022-11-04 18.35.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/23df94e1-3dae-af95-35cc-a4ca66da7982.png)

4,「一般」から「設定」を編集の画面で代替ドメインの設定(バケット名と同じ)をします
![スクリーンショット 2022-11-04 18.37.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/db180dea-e2da-a9d9-30e1-2c2216aea3d5.png)

5,その下にあるデフォルトルートオブジェクトでS3のインデックスドキュメントと同じファイルを設定し、「変更を保存」
![スクリーンショット 2022-11-06 15.03.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/c384f91d-42d4-deba-afb8-15d5fea49214.png)

*現状配信されているaws公式のハンズオンだとUIが古いものでこの点の設定をしているようなシーンがなく3,4時間ほど詰まりました、S3でインデックスドキュメントで設定しているのにcloudfrontでも同じような設定をする必要があるみたいです、、



### 9,Route53でホストゾーンの作成をする
![スクリーンショット 2022-11-04 18.47.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/d4703e65-03c3-97e2-d223-6bb1e8e75102.png)

設定した代替ドメインと同じAレコードを作成する
![スクリーンショット 2022-11-04 18.51.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/70e57db1-ca8f-d49e-b5c6-a276e2f510df.png)


~設定項目~
1,エイリアスでCloudFrontを選択
2,8で作成したディストリビュージョンを選択します

### 10,ACMで証明書の作成します

~注意点~
1,バージニア北部リージョンで作成すること(cloudfrontがグローバルサービスのため)

~設定項目~
1,パブリック証明書を選択する
![スクリーンショット 2022-11-04 18.27.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/9372d6ed-1ea1-93bb-f361-e477b65f35ca.png)


2,DNS検証を選択する
![スクリーンショット 2022-11-04 18.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/9c695fca-a507-7164-95fe-fb9237c3a33d.png)

3,Route53でレコードを作成をクリックしCnameを作成する
![スクリーンショット 2022-11-04 18.28.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/b13ab43d-c2f2-c381-2495-ed349b922a4b.png)

できました。
![スクリーンショット 2022-11-04 18.20.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/8bf36d2c-a1de-0040-c4d3-e3612831f6e2.png)

### 11,出来上がった証明書をCloudFrontに設置します
CloudFrontの「一般」の「設定」の編集から代替ドメインのしたに証明書の設定項目があります
![スクリーンショット 2022-11-04 19.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/b9b0209b-451c-a2c8-0e1a-3df783ebbbb1.png)

### 12,S3の設定を変更する

最後にバケットポリシーでパブリックアクセスを無効にする
![スクリーンショット 2022-11-04 19.30.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/a73d3a53-ae83-e660-9987-2dd346bbb267.png)

### 13,お疲れ様でした。

猫の画像がセキュアに配信されています。
![スクリーンショット 2022-11-06 15.32.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/f96e05cc-9c59-de78-ef87-e4230aba9b05.png)

12番まで追えるとwebサイトホスティングのUPLでは映らず、CloudFrontの代替ドメインでは映るようになっています。またビヘイビアの設定でhttpでアクセスしてもhttpsで映るようになっています。

またchromeの検証のNetworkでCloudFrontから配信されていることがわかります。(x-cacheの部分)
![スクリーンショット 2022-11-06 15.47.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1686037/986336a3-c055-c46e-ffdf-a088f6742c22.png)


ここまでみていただきありがとうございました。