S3静的ウェブサイト+CloudFrontの構築

##　はじめに
前回作成したS3静的ウェブサイトにCloudfrontを実装しました。バケットポリシーで少し詰まったので、今後の自分用の構築メモとして残します。

##　構成図
![スクリーンショット 2022-02-12 19.57.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/d894fd5d-ec46-ab9c-0022-047e0a557664.png)


##　ハンズオン
### 0：前回のS3静的ウェブサイトの確認
前回からバケットを再度作成し直したのでバケット名が変わっていますが、構築は手順の通り構築しております

[AWS CLIを利用してAmazon S3静的ウェブサイトのホスティング](https://qiita.com/i3no29/items/0cbeaf9030859956e615)

### 1：CloudFrontで公開
#### 1.1 CloudFrontサービスページに遷移して『ディストリビューション作成』を押下する
![スクリーンショット 2022-02-12 17.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/a9399292-cd32-a3b2-b547-c7d6db5b5e9a.png)

#### 1.2 ディストリビューションを作成 オリジン部分の入力（赤枠部分）
![スクリーンショット 2022-02-12 22.28.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/9e77981f-e958-d777-7892-883b1b17266d.png)


1.2.1：`オリジンドメイン`にS3静的ウェブサイトのドメイン名を入力
__【オリジンドメイン名は下記画像のようには表示され選択も可能】__
![スクリーンショット 2022-02-12 20.19.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/d02c59e8-b6e0-a8f7-e17d-36e3cefae1d1.png)
1.2.2：`S3バケットアクセス`を『はい、OAIを使用します』を選択
1.2.3：`オリジンアクセスアイデンティティ`で`新しいOAIを作成`を押下
__【下記画面が表示され作成を押下する】__
![スクリーンショット 2022-02-12 22.27.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/5a582a88-2174-5598-6649-e7afb58c171c.png)

#### 1.3 ディストリビューションを作成 デフォルトのキャッシュビヘイビア部分の入力
`ビューワープロトコルポリシー`を『Redirect HTTP to HTTP』にチェック
![スクリーンショット 2022-02-12 22.32.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/344b0c83-f8ab-287b-fe6a-404fff7bb6ce.png)

他変更なしで画面右下に表示されている『ディストリビューションの作成』を押下する

#### 1.4 CloudFrontディストリビューションが有効になる
1.3の『ディストリビューションの作成』後に自動的にページが遷移される
![スクリーンショット 2022-02-12 22.39.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/bb95fef3-2dca-9d03-9ed1-9d47e80a0115.png)
CloudFrontのメニューより`ステータス`が有効になっていることを確認する
![スクリーンショット 2022-02-12 22.39.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/00759a75-712a-70d9-8181-04f422477c7d.png)

### 2：挙動の確認
#### 2.1 CloudFrontで接続できることを確認する
![スクリーンショット 2022-02-12 22.42.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/6e795dce-5f79-a4b9-2424-fd4e9cf0a00b.png)

上記ドメインを入力しCloudFront経由で表示されていることを確認する
![スクリーンショット 2022-02-12 17.49.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/9dc0236e-3aa8-dda2-6fa7-c281032ba309.png)

しかしこのままではS3のURLでアクセスが可能のままとなってしまう
![スクリーンショット 2022-02-12 17.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/4d9eb112-3bf7-917f-21bd-b3e7df13761d.png)


### 3：S3のポリシーを変更する
前回構築したS3静的ウェブサイトのバケットポリシーが残ったままなので、このままでは`http://aws-lesson-2022.s3-website-ap-northeast-1.amazonaws.com`からでもアクセスが出来てしまう状況のため変更をしていく
#### 3.1 ブロックパブリックアクセスの変更
__【前回と今回の設定の変更】__
![スクリーンショット 2022-02-13 8.33.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/d1c19585-3bf4-9f57-3795-9fc4b27d3282.png)

#### 3.2 バケットポリシーの変更
__【上記に伴うポリシーの変更】__
![スクリーンショット 2022-02-13 8.43.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/afdf80d8-9392-81aa-f688-41e1a896f107.png)

```json:cloudfront-bucket-policy.json
{
	"Version": "2012-10-17",
	"Statement": [
			{
					"Effect": "Allow",
					"Principal": {
							"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity ECOA39FPWOD7B"
					},
					"Action": "s3:GetObject",
					"Resource": "arn:aws:s3:::aws-lesson-20220212/*"
			}
	]
}
```

### 4：再度挙動の確認
CloudFront経由のアクセスだとS3へ保存しているHTMLを見られるが、S3経由のアクセスだとHTMLが見ることが出来ないことが確認できる

__【両方のアクセスをブラウザで並べた画面】__
![スクリーンショット 2022-02-13 8.55.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694365/09dcd896-478d-cfcc-5044-bcec10d62ad0.png)

##　さいごに
S3のブロックパブリックアクセスに関する知識が甘かったこと、バケットポリシーについても改めて整理するキッカケともなりました。
次回はRoute53とACMを導入して、Basic認証などの確認が出来ればいいかなと思っています。連休も今日で終わりですが、まだまだ新しいことを学んでいきたいと思います。