S3 で公開した Web ページに CloudFront 経由でアクセスする


ミライトデザイン Advent Calendar 2022 の4日目の記事です。


https://qiita.com/advent-calendar/2022/miraito-inc

昨日は @Nyokki さんの MySQL についての記事でした。
Nyokki さんの記事は毎回勉強になります。皆さんもぜひ読んでみてください。


## 前の記事

S3 で静的ページを公開する作業は[前の記事](https://qiita.com/tkek321/items/bfa5416c15521f541712)で行っている


## 目的

S3 で公開した静的ページに CloudFront 経由でアクセスできるようにする


## 利用する AWS の製品

- CloudFront
- S3


## CloudFront とは

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/Introduction.html

>ユーザーへの静的および動的なウェブコンテンツ (.html、.css、.js、イメージファイルなど) の配信を高速化するウェブサービスです。

- CDN （Content Delivery Network） 
- ユーザーの近くのエッジロケーション（よりユーザーに近い場所）でコンテンツをキャッシュすることで伝達速度を上げる
    - オリジンサーバーの負荷を下げることもできる
- WAF や ACM と連携することができる



## 手順

### S3 に CloudFront 経由でアクセスできるようにする

CloudFront のマネジメントコンソールを開く

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f1a85bd6-b5ee-8367-eb97-bd24e3f67cac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/304da22c-a5e2-1af2-a2f2-db8eb2944e34.png)


オリジンドメインに S3 のドメインを入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f70e856a-4b66-616c-1115-75bd471cd9ae.png)


`デフォルトルートオブジェクト` を `index.html` に設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/f86a1071-a16a-bf35-fc18-0c58f694be90.png)


ディストリビューションの作成をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/2530e8a1-8201-06fc-102d-0f37247e1a62.png)


![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f32303839626137342d633830332d653936632d373634652d3762666430336135383530642e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/8ae81dda-1ff6-0bb2-4d11-7ba0c43fd64c.png)



`ディストリビューションドメイン名` の URL にアクセスする
この場合は `http://dbkvvvys56dhy.cloudfront.net/` にアクセス


![スクリーンショット 2022-11-13 17.48.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/cfe4c5b3-7eec-e63c-41db-fce77d5b8246.png)


S3 と同じ HTML, CSS が表示されることが確認できる

`X-Cache` も `Hit from cloudfront` となっており、cloud front からキャッシュを取得できている


（反映までしばらく時間がかかる）

## CloudFront からのアクセスに限定する

現状だと S3 に直接アクセスできてしまうので、リソースへのアクセスを CloudFront 経由限定にする

S3 の静的ホスティングを無効化し、ポリシーを CloudFront からのアクセス限定に書き換えることでアクセスを限定する

### S3 の静的ホスティングを無効化する

S3 のコンソールを開き対象のバケットの `アクセス許可` タブへ移動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/a9a6c69c-bc0f-b412-d91c-7280d4bd41f0.png)


`バケットポリシー` を削除する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/d9f12142-1c2d-dbb3-14f4-a056beaab8e6.png)

`プロパティ` へ静的ホスティングを無効化する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/3de62ef7-e1b4-8f7d-a91f-6489c1a3e242.png)

`編集` をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/c1318f1c-50a1-ce18-3178-7ebdf0b4ffa5.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/2545e655-c04c-c4e3-4d75-6ab7376cdce3.png)



### CloudFront の設定を変更する

CloudFront のオリジンを編集

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/814c779a-4d4b-4ed4-c3e0-2458dfda7d93.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/97a1b6df-1d9d-fcae-5840-7838f8914799.png)

`Origin access control settings (recommended)` を選択

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/ce52b2eb-1e10-e1c0-7f8d-3de43dd67e6c.png)

`コントロール設定を作成`をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/314a8c3b-49c4-ad38-7bf5-605f42bd63c5.png)

`ポリシーをコピー` して S3 へ移動

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/8c8f4f65-ceb1-7efa-b79e-580c15aca74d.png)

バケットポリシーを編集

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/d81be563-9bae-022c-af2f-010094fe1ce3.png)

コピーしたポリシーを貼り付けし、編集を保存
（アクセスを CloudFront 限定にするような内容が書かれている）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/07d9b992-256d-3ee7-7215-e92d84065ab7.png)

CloudFront の変更を保存をクリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/c08836e6-d6c5-6c9f-4019-b1336f6f1dcf.png)


`最終変更日時` に日付が入っていれば変更が完了

![68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3336343737332f64313966373834362d666637612d316331312d396138632d3564336462663235666136342e706e67.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/8a19b6b7-41bc-ca72-3155-8768c2f2e560.png)



ページが確認できる

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/364773/4a198e85-b1bd-470c-35a6-64548b8b67ef.png)





## 参考

https://dev.classmethod.jp/articles/lim-cloudfront/



https://blog.serverworks.co.jp/cloudfront-oai-to-oac

## おわり

明日は [bucchi](https://zenn.dev/t_kitamura) さんの CSS についての記事です。
自分は CSS 苦手なので、どんな内容か楽しみです！！