NUXTJS公式:S3 と CloudFront を使用して AWS へデプロイするには？の補足

# はじめに
※画像多めです
公式ドキュメント内の`AWS: S3 バケットと CloudFront Distribution の設定`の参考記事が古く、そのままの手順では動かなかったので、画像多めで手順をまとめたいと思います。

[(公式ドキュメント)S3 と CloudFront を使用して AWS へデプロイするには？](https://ja.nuxtjs.org/faq/deployment-aws-s3-cloudfront/)
[(参考記事)S3 と CloudFront をセットアップするためのチュートリアル](https://reidweb.com/2017/02/06/cloudfront-cdn-tutorial/)

(次の記事でデプロイをdocker-composeコマンド1つでできるようにカスタマイズする記事を書く予定です。)
→記事書きました
[NUXTJS公式のS3とCloudFrontを使用してAWSへデプロイするには？をdocker-composeで実行する](https://qiita.com/h-matsufuji/items/2cc116caa3a7fe50842a)


# 前提
- AWSアカウントを作成済み
- Route53に作成予定のドメインを設定済み
- サブドメインを作成して公開する

# AWSの環境準備

S3、CloudFront、Route53、Certificate Managerを使用します。

## 1. S3バケットを作成する

バケット名は任意の文字列を入力します。
今回はcloudFrontを使用し、S3自体を公開するわけではないので公開するドメインと同じである必要はありません。
例として`s3-dev`というバケットを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/1b74b505-a293-ecdd-935e-9ba636a8403d.png)

デフォルトのまま次へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/4464f9a9-1939-5efb-2c21-da445ce63075.png)

パブリックアクセスもデフォルト（全てブロック）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/1f2a8f45-9f0f-4cff-9bc6-294ff8a86804.png)

内容を確認し、問題なければバケットを作成します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/4df2f032-b558-0a6a-a635-55b230b1e411.png)

作成が完了したら動作確認用に適当なファイルをアップロードしておきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/b3a56731-f000-852d-d68e-33a085a04973.png)


## 2. AWS Certificate ManagerでCDNドメインのSSL証明書を取得する

SSL証明書は、リクエストから発行まで時間がかかるので、こちらを優先で実施します。

リージョン`US-East-1`のAWS Certificate Managerコンソールを開き、`証明書のリクエスト`を実施します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/27811d26-d384-08b8-c770-e66afcac8cac.png)

`パブリック証明書のリクエスト`を選択し、証明書のリクエストを実施します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/9d04161d-e26c-c12e-5e70-72c8d3cf5a43.png)

公開するドメイン名を入力します。
今回はRoute53に所持しているテスト用ドメイン`sudev.work`に`test`というサブドメインを指定して使用します。
`test.sudev.work`

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/a1596215-a1bd-4c73-2d24-3196dc6e94a6.png)

今回使用するドメインはRoute53で管理するため、`DNSの検証`を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/e5dee27b-b1f1-d256-821d-e1b12488ac43.png)

タグの指定は特にしないのでそのまま次へ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/bcbf2b02-64b2-587a-7dc4-a7da31713863.png)

内容を確認し、問題なければ`確定とリクエスト`を実施。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/832485e3-a556-9aef-044d-29415353d7a1.png)

この時点ではまだRoute53でサブドメインを作成していないので、検証保留になっています。
そのまま続行を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/a4bf3455-6a07-8344-a406-b2ca5d12c22b.png)


赤枠の部分を押下し、Route53にレコードを作成します。
画像の通り成功と出たら完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/27b8e60e-4b0c-22e3-7d8f-ee8e07f4477f.png)

※作成完了までに時間がかかるので、完了後にCloudFrontセットアップにすすむ


## 3. CloudFrontをセットアップ

`Create Distribution`を押下し、次画面でWebの`Get Started`を押下します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/339d41b2-bf21-d581-8a7a-19c844cebeac.png)

Origin Settings

- Origin Domain Name：S3のバケット名を入力し、プルダウンで選択
- Origin Path：空白
- Restrict Bucket Access：YES
- Origin Access Identity：Create a New Identity
- Grant Read Permissions on Bucket：Yes, Update Bucket Policy


Default Cache Behavior Settings

- Viewer Protocol Policy：Redirect HTTP to HTTPS
- Compress Objects Automatically：オブジェクトを自動圧縮する場合はYes
- Grant Read Permissions on Bucket：Yes, Update Bucket Policy


Distribution Settings

- Alternate Domain Names：test.sudev.work
- SSL Certificate：Custom SSL Certificate (example.com):
    - プルダウンで先ほど作成したSSL証明書`test.sudev.work`を選択
    - ※作成までに時間がかかるので、出てこない場合は時間をおいて再度実施
- Default Root Object：index.html

他はデフォルトでCreateを押下し、作成します。


S3でアップロードしたテストファイルが`CloudFrontのドメイン/ファイル名で`で表示されれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/d08e7f40-4bdc-5fc7-cffd-75741a2befe9.png)

次の手順でRoute53の設定でCloudFrontのドメインをRoute53のサブドメインと紐づけます。
赤枠のドメインを控えておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/a1024a3f-7327-3a9f-8edd-e5c41ce542fe.png)

## 4. Route53でCloudFrontを指定のドメインで公開する

Route53 > ホストゾーン > 対象ドメイン(sudev.work) > レコード作成 > 
シンプルルーティング > シンプルなレコードを定義

- レコード名：公開するドメイン`test.sudev.work`
- レコードタイプ：CNAME
- ルーティング先：レコードタイプに応じたIPアドレスまたは別の値
    - 値：先ほどメモ控えたCloudFrontのドメイン

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/008bd802-49e9-75a5-9b9e-142919454986.png)

### 接続確認

S3でアップロードしたテストファイルがhttpsで`Route53のドメイン:test.sudev.work/ファイル名で`で表示されれば完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/458010/28e1e52f-71e9-0ee1-04cb-17528e9452f3.png)


手順は以上になります。

# 補足

サブドメインで公開したURLでF5を押すとエラーになるので、下記を参考に対策をしたほうが良いと思います。
https://qiita.com/Safire/items/505cdf9b981c58ad38f6