はじめてのcloudfront

## 勉強前のイメージ

サーバなしにwebサーバを表示するもの
オリジンサーバとかナントカあった気がするけど忘れた


## 調査

### cloudfrontとは

Amazon CloudFrontとは、データや動画などwebコンテンツを配信するCDN(コンテンツデリバリーネットワーク)です。
全世界にあるエッジロケーションのネットワークを通じてコンテンツの配信が行われます。
世界にあるので、エッジロケーションのレイテンシーは確保され配信に関する遅延は少ない状態にあります。

### cloudfrontを作ってみよう

#### 構成

ユーザはcloudfrontを経由して、s3の静的コンテンツを見ることができます。

![Untitled Diagram.drawio - diagrams.net 2020-12-12 13-16-47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/4710887d-04d9-d10f-7242-05f9db46c5b2.png)


#### s3にファイルを設置

- S3バケットを作成

s3にバケットを作成します

![S3 Management Console 2020-12-12 13-22-16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/22a78e0c-bc18-824e-7fff-54b870192d06.png)


バケット名を適切に入力します。
ブロックパブリックアクセスのバケット設定はデフォルトの`パブリックアクセスをすべてブロック`にしておきます。
ほかの設定かもすべてデフォルトでバケットを作成します。

![S3 Management Console 2020-12-12 13-24-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/54403d2a-9dd6-6641-5b83-7c909c4d5572.png)


バケットが作成できました

![S3 Management Console 2020-12-12 13-27-19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/b5679fb5-4ac3-9fd4-6298-99e77ec468b4.png)


- ソースコードをアップロード

この、`test-cloudfront-webserver-202012`バケットに、以下のソースコードをアップロードします

```html:index.html
<!doctype html>
<html lang="ja">
  <head>
  <meta charset="UTF-8">
  <title>Hello World</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>
```

アップロードされました

![1S3 Management Console - Google Chrome 2020-12-12 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/813914b4-9d7d-3eb8-18b5-795a9c887f62.png)



#### cloudfrontのディストリビューションの設定

- ディストリビューションを作成します

cloudfrontに移動しまして、`Create Distribution` でディストリビューションを作成します

![1AWS CloudFront Management Console - Google Chrome .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/de6c1eb4-d618-eccf-1893-348423ac3896.png)


- コンテンツの配信方法

今回はs3の静的ファイルを表示させるので、webで進めます。
下のRTMPは動画などに適しているらしいです

![2AWS CloudFront Management Console - Google Chrome .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/13a52ee3-5afb-929f-1d44-311c1cf44bd6.png)


- ディストリビューションの設定

ディストリビューションの設定をします
はまらないように、`Origin Domain Name` だけきちんと記載します。
Origin Domain Name をクリックするといくつか選択肢が出てきます。
その中に、先ほど作成したs3のバケットも出てくるのでこちらをクリックします。
このままこれを適応してもよいのですが、CloudFrontのURLにアクセスしてもS3のURLにリダイレクトされる現象が起きたので(待てば解決するらしいです)、
デフォルトの選択肢では `s3.amazonaws.com` になるのですが、リージョン名を指定して書き換えることですぐにアクセスできるようになりました。

test-cloudfront-webserver-202012.s3.amazonaws.com
↓
test-cloudfront-webserver-202012.s3 **-ap-northeast-1** .amazonaws.com

![6AWS CloudFront Management Console - Google Chrome .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/d742ec5e-9fec-ea91-ada9-410230992e70.png)


変更する箇所は

- Origin Domain Name (詳細は上記に記載)
- Restric Bucket Access  :  S3のURLではなくCloudFrontのURLを使用してコンテンツにアクセスさせる
- Origin Access Identity : 	上記の際にオリジンアクセスIDをオリジンに割り当てます
- Comment (デフォルトで入る)
- Grant Read Permissions on Bucket : cloudfrontがアクセスするs3バケットに自動的にアクセス許可を付与します

これでディストリビューションを作成します。

![3AWS CloudFront Management Console - Google Chrome .png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/b8c29a01-410c-4cdc-beb5-473d64f76e8e.png)

`Grant Read Permissions on Bucket` を行うことで、
s3バケットのアクセス許可に以下のようなバケットポリシーが自動的に追加されます

![7S3 Management Console - Google Chrome 2020-12-12 1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/a4fdb951-0256-f33c-63ee-825f7720928b.png)

- 作成完了

作ったばっかりでは status が `In Progress` となっていますが、 `Deployed` に変更されると準備が完了しました

![14AWS CloudFront Management Console - Google Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/a02b1051-d585-eefd-dc37-43d3f9d81ff3.png)

### アクセスを行う

- cloudfrontのドメイン名を確認

`Domain Name` に記載されてる **xxxx.cloudfront.net** がドメイン名です
この後ろに、s3バケットのファイル名、今回でいうと `index.html` を記載します。

![54AWS CloudFront Management Console - Google Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/019b7659-303b-bc18-373d-6c6e693c1ab0.png)


- ブラウザでアクセス

無事、hello worldが表示されました。

![44AWS CloudFront Management Console - Google Chrome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/129517/65f9cb57-33f2-3faa-c7c1-75f130713243.png)


## 勉強後のイメージ

思ったより大変だった
s3のURLにリダイレクトされるところがめちゃくちゃハマった。
でも、はじめてのcloudfront表示できてよかった！！！
次は自分のドメインにcname書いて表示できたらもっといいね

## 参考

- [CloudFront 経由で S3 のファイルにアクセスする](https://qiita.com/NaokiIshimura/items/46994e67b712831c3016#comments)
- [S3 と Cloudfront で静的ページ配信をしようとしたけど 307 リダイレクトが返ってきてしまう件](http://opepenope.hatenablog.com/entry/2017/09/25/214300)
- [S3+CloudFrontでS3のURLにリダイレクトされてしまう場合の対処法](https://dev.classmethod.jp/articles/s3-cloudfront-redirect/)
- [S3+CloudFrontで403forbiddenでアクセスできない場合](https://inamuu.com/s3cloudfront%E3%81%A7403forbidden%E3%81%A7%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88/)
- [増幅パブリッシュによりAccessDeniedエラーが発生する](https://www.it-swarm-ja.tech/ja/amazon-web-services/%E5%A2%97%E5%B9%85%E3%83%91%E3%83%96%E3%83%AA%E3%83%83%E3%82%B7%E3%83%A5%E3%81%AB%E3%82%88%E3%82%8Aaccessdenied%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%8C%E7%99%BA%E7%94%9F%E3%81%99%E3%82%8B/814520163/)
- [CloudFront 経由で S3 のファイルにアクセスする](https://qiita.com/NaokiIshimura/items/46994e67b712831c3016)