【AWS】S3+CloudFrontでNuxt.jsから生成した静的HTMLを公開

# はじめに
こちらの記事は
S3ってよく聞くけどどうやって使うの？
CloudFrontを試しに使ってみたい！
というAWS初心者の方が対象です

### 大まかな流れ

・ [Nuxtプロジェクトを新規作成](https://qiita.com/KazutoNagano/items/0c0770e3845cda8528c6#nuxt%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%82%92%E6%96%B0%E8%A6%8F%E4%BD%9C%E6%88%90)
・ [Nuxtの静的なHTMLを生成](https://qiita.com/KazutoNagano/items/0c0770e3845cda8528c6#nuxt%E3%81%AE%E9%9D%99%E7%9A%84%E3%81%AAhtml%E3%82%92%E7%94%9F%E6%88%90)
・ [S3にバケットを作成し静的HTMLファイルをアップロード](https://qiita.com/KazutoNagano/items/0c0770e3845cda8528c6#s3%E3%81%AB%E3%83%90%E3%82%B1%E3%83%83%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E9%9D%99%E7%9A%84html%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%82%A2%E3%83%83%E3%83%97%E3%83%AD%E3%83%BC%E3%83%89)
・ [CloudFront経由でS3のHTMLにアクセス](https://qiita.com/KazutoNagano/items/0c0770e3845cda8528c6#cloudfront%E7%B5%8C%E7%94%B1%E3%81%A7s3%E3%81%AEhtml%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9)

### ゴール
CloudFrontを経由して固定のURLでS3のファイルにアクセスすること


### 事前準備
- AWSのアカウントを作成していること
- npm5.2.0以降がインストールされていること


# Nuxtプロジェクトを新規作成
任意のフォルダ内でNuxtプロジェクト作成コマンドを実行します。

```
npx create-nuxt-app nuxt-example
```

実行すると、プロジェクト名は何にする？プロジェクト概要は？のように質問してくれるので答えながら進めます。
細かな設定はこちらの記事を参考にしてください。
[【Nuxt.js】create-nuxt-appのすすめ 〜create-nuxt-appの質問に負けたくないあなたへ〜](
https://qiita.com/cheez921/items/fdfd224099f686e3173d)

プロジェクト作成が完了するまで数分待ちます...

完了したらローカルで画面が表示されるかテストしましょう！
以下のコマンドを実行します。

```
npm run dev
```



ローカルホストにアクセスすると以下の画面が表示されることを確認してください
http://localhost:3000/
![スクリーンショット 2020-09-29 15.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753810/e85d6dbd-bd8f-1a1a-a1cc-0bfbc87adfa1.png)

これでNuxtプロジェクトが作成できました!



# Nuxtの静的なHTMLを生成

Nuxtの既存機能を利用して静的なHTMLを生成します。

以下のコマンドを実行することで、静的なホスティングサイトにデプロイする準備が整ったものが全て入ったdistフォルダを作成します。


```
npm run generate　
```

実行が完了すると`/dist`フォルダが自動生成され、静的なHTMLが出力されました。


# S3にバケットを作成し静的HTMLファイルをアップロード

続いて、S3のバケットを作成します。
AWSのサービスからS3を選択してアクセスします。

トップの一覧の左上のバケットを作成するボタンを押してください。
![スクリーンショット 2020-09-30 16.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753810/f6a6a48f-3571-6393-255f-e53ea111c6ee.png)


お好きなバケット名を入力して左下の作成ボタンを押下するとバケットが作成されます。
![スクリーンショット 2020-09-30 16.46.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753810/eb9a6e46-c067-4c65-76c2-aebd1a8f80dd.png)

今回は`nuxt-example-1`という名前でバケットを作成しました。

次に作成したバケットに前章で作成したNuxtの静的なHTMLをアップロードします。

作成したバケットにアクセスしてください。
アップロードボタンを押下し、ドラッグ＆ドロップで先ほど作成したdistフォルダの中のファイルを全てアップロードしてください。
![スクリーンショット 2020-09-30 16.52.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753810/12fde0f6-629b-e1fc-fc8d-aacb3c4c0394.png)

以上でS3にバケットを作成し、静的なHTMLファイルのアップロードが完了しました！

試しにアップロードされたindex.htmlをダブルクリックして開いてみてください。
Nuxtのトップ画面が表示されるはずです。

# CloudFront経由でS3のHTMLにアクセス

前章までで、静的なHTMLファイルをS3にアップロードができました。
しかし、NuxtのトップページのURLがS3のURLになっております。
次はCloudFrontを利用してこのアップロードしたファイルを固定のURLでアクセスできるようにします。

AWSのサービスからCloudFrontを検索しアクセスします。

トップ左上のCreateDistributionをクリックし、WebのGetStartを選択して新規のCloudFrontを作成していきます。
![スクリーンショット 2020-09-30 17.08.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753810/4b074dcc-6eba-b820-a12a-b2de31f7a313.png)



今回は細かな設定はしません。以下の項目に各値を入力して作成をしてください。

Original Domain Name:　`前章で作成したS3バケットを選択`
Restrict Bucket Access:　`Yes`
Origin Access Identity:　`Create a New Identity`
Grant Read Permissions on Bucket:　`Yes,Update Bucket Policy`
Viewer Protocol Policy: `Redirect HTTP to HTTPS`
Default Root Object: `index.html`


これでCloudFrontが作成できました。
早速CloudFront経由でS3にアクセスしてみましょう！

CloudFrontトップから今作成したCloudFrontの`Domain Name`をコピーし
https://(コピーしたDomain Name)/
にアクセスしてください。
例）https://xxxxxxxxxxxxxx.cloudfront.net/


![スクリーンショット 2020-09-29 15.54.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/753810/e85d6dbd-bd8f-1a1a-a1cc-0bfbc87adfa1.png)

無事にNuxtのトップページが表示されました！！

# 参考
[S3 と CloudFront を使用して AWS へデプロイするには？](https://ja.nuxtjs.org/faq/deployment-aws-s3-cloudfront/)
[S3+CloudFrondでNuxt.js(vue)のHTTPS静的サイトを構築・デプロイ](https://qiita.com/gakumac/items/7d2aca3a1748e1c5691c)
[Nuxt.js で作成した静的サイトを S3 + CloudFront でホスティングするパターン](https://qiita.com/yh1224/items/f9c242e254826fe49b3d)