S3でウェブサイトを公開し、CloudFrontでドメイン名を変える方法

#はじめに
仕事でAWSのS3とCloudFrontに触る機会があり、便利だったので自分の復習も兼ねてまとめます。

####S3(Amazon Simple Storage Service)とは
Amazonが提供しているオブジェクトストレージサービスで、容量無制限で扱えるものです。
今回は、AWSのAPI gatewayやCloudFrontなどを用いたWebサイトを公開するために用いました。

その中で、S3でWebサイトに公開する方法とCloudFrontでドメイン名を変える方法について紹介します。
[※参考にした記事](https://qiita.com/SSMU3/items/94d60998038e9af80cf9)
___
##S3でWebサイトの元となるバケットを作成する

1.AWSにログインし、AWS マネジメントコンソールからS3に移行する
![スクリーンショット 2021-12-06 14.50.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/030e0eb9-ce96-5428-ebc2-086ecd5947e0.png)

2.右側にある「バケットを作成」をクリック
![スクリーンショット 2021-12-06 14.52.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/7e33c3a3-f671-c6de-d1a1-1ab6d1b380de.png)

3.バケット名を決め、リージョンを選択する
私は、日本で公開するため東京を選択しました。
そのほかは特に触れずに、下にスクロール。。。

![スクリーンショット 2021-12-06 14.55.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/595b19a6-4645-bd64-a473-c9cb3c2d7fbd.png)

4.バケットのパブリックアクセス設定は全てブロックのチェックを外す。
※ip制限やbasic認証をする場合は、全てブロックするにチェックを入れ制限をかける必要がある。

![スクリーンショット 2021-12-06 19.00.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/6c91aa1f-f39e-b14d-9138-382575f45375.png)

まずは、公開できればいいのでそのまま下にスクロールし、「バケットを作成」をクリック！！


5.作成したバケットのアクセス許可のバケットポリシーを修正します。
![スクリーンショット 2021-12-06 19.13.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/2504a2a7-6291-880f-fa92-19cb49ac5c2f.png)

画面右下の「編集をクリックし、以下を貼り付けます。
バケット名は自分で作成したバケット名に書き換えてください。
```
{
  "Version":"2012-10-17",
  "Statement":[
    {
      "Sid":"AddPerm",
      "Effect":"Allow",
      "Principal": "*",
      "Action":["s3:GetObject"],
      "Resource":["arn:aws:s3:::バケット名/*"]
    }
  ]
} 
```

「変更の保存」をクリックし、バケットのオブジェクトに戻ります。
___
6.次に公開したいWebサイトを載せていきます。
作成したバケットの画面右側にある「アップロード」クリック
![スクリーンショット 2021-12-06 18.47.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/264e7a5a-2e46-67e0-23a1-9487ef10b1ac.png)


7.公開したいファイルorフォルダを選択肢し、「アップロード」をクリック
今回は、[Hello World!!]と表示するindex.htmlを載せます。
![スクリーンショット 2021-12-06 18.50.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/5892d515-4e0c-9f3e-c2f7-7c0d40bb7032.png)

8.バケットからアップロードしたindex.htmlをクリックすると次の画面になる。
![スクリーンショット 2021-12-06 19.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/a219015b-cab9-97c6-efe8-39791c4b30fe.png)


9.右下のオブジェクトURLをクリックすると、「Hello World!!」が表示される。
![スクリーンショット 2021-12-06 19.10.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/d4e9f6d5-3b58-bf7c-b2a5-76c24e164fa3.png)


##CloudFrontでドメイン名を変える方法
・次に、CloudFrontでドメイン名を変更していきます。
今回はS3だけなので不要ですが、本来は他のAWSサービスを利用する際に統一したドメイン名にでき便利な機能なので紹介していきます。

AWSのコンソール画面or左上の検索欄から「CloudFront」に移行します。

1.右側の「ディストリビューションを作成」をクリック
![スクリーンショット 2021-12-07 10.42.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/4ed68e64-f562-d539-dad7-edf0cac78d4d.png)

2.先程作成したS3をオリジンドメインに設定
そのまま下にスクロールし、「ディストリビューションを作成」をクリック
![スクリーンショット 2021-12-07 10.47.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/045bdbe1-76b6-1876-aa4b-59521afaf1de.png)


3.作成したS3にアクセスできるようにデフォルトルートを指定していきます。
作成したディストリビューションの[一般]→[設定]の右下「編集」をクリック
![スクリーンショット 2021-12-07 10.51.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/7d8d3aa3-1d16-c62c-dd0c-6b02cbb7c891.png)

4.※作成したS3のオブジェクトURLの「s3.ap...」以下をコピーします。
それをデフォルトルートオブジェクトに設定し、「変更を保存」をクリック
![スクリーンショット 2021-12-06 19.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/a219015b-cab9-97c6-efe8-39791c4b30fe.png)

以下のように、設定されていればOK
![スクリーンショット 2021-12-07 10.58.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/2fa410f5-485c-29e4-3dbf-1d04d166c6d9.png)



5.ディストリビューションドメイン名「dmn4c....cloudfront.net」をコピーし、chromeの検索欄に貼り、その後ろにS3に置いたファイル名(ここではindex.html)を書き足すと、先ほどの「Hello World!!」が確認できる。

![スクリーンショット 2021-12-07 11.02.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1754203/7a0cd840-4b0e-4ed0-2e0a-5139731434e1.png)


これで、S3に置いたファイルをCloudFrontを介してドメイン名を変更して公開できました。
AWSの他のサービスを使う際は、ディストリビューションの「オリジン」と「ビヘイビア」を追加することで、同じドメイン名「dmn4c....cloudfront.net」の後ろにルートを指定してあげれば、さまざまなサービスを利用できます。