はじめに
こちらの記事は
S3ってよく聞くけどどうやって使うの？
CloudFrontを試しに使ってみたい！
というAWS初心者の方が対象です
大まかな流れ
・ Nuxtプロジェクトを新規作成
・ Nuxtの静的なHTMLを生成
・ S3にバケットを作成し静的HTMLファイルをアップロード
・ CloudFront経由でS3のHTMLにアクセス
ゴール
CloudFrontを経由して固定のURLでS3のファイルにアクセスすること
事前準備
- AWSのアカウントを作成していること
- npm5.2.0以降がインストールされていること
Nuxtプロジェクトを新規作成
任意のフォルダ内でNuxtプロジェクト作成コマンドを実行します。
npx create-nuxt-app nuxt-example
実行すると、プロジェクト名は何にする？プロジェクト概要は？のように質問してくれるので答えながら進めます。
細かな設定はこちらの記事を参考にしてください。
【Nuxt.js】create-nuxt-appのすすめ 〜create-nuxt-appの質問に負けたくないあなたへ〜
プロジェクト作成が完了するまで数分待ちます...
完了したらローカルで画面が表示されるかテストしましょう！
以下のコマンドを実行します。
npm run dev
ローカルホストにアクセスすると以下の画面が表示されることを確認してください
http://localhost:3000/
これでNuxtプロジェクトが作成できました!
Nuxtの静的なHTMLを生成
Nuxtの既存機能を利用して静的なHTMLを生成します。
以下のコマンドを実行することで、静的なホスティングサイトにデプロイする準備が整ったものが全て入ったdistフォルダを作成します。
npm run generate
実行が完了すると/distフォルダが自動生成され、静的なHTMLが出力されました。
S3にバケットを作成し静的HTMLファイルをアップロード
続いて、S3のバケットを作成します。
AWSのサービスからS3を選択してアクセスします。
トップの一覧の左上のバケットを作成するボタンを押してください。
お好きなバケット名を入力して左下の作成ボタンを押下するとバケットが作成されます。
今回はnuxt-example-1という名前でバケットを作成しました。
次に作成したバケットに前章で作成したNuxtの静的なHTMLをアップロードします。
作成したバケットにアクセスしてください。
アップロードボタンを押下し、ドラッグ＆ドロップで先ほど作成したdistフォルダの中のファイルを全てアップロードしてください。
以上でS3にバケットを作成し、静的なHTMLファイルのアップロードが完了しました！
試しにアップロードされたindex.htmlをダブルクリックして開いてみてください。
Nuxtのトップ画面が表示されるはずです。
CloudFront経由でS3のHTMLにアクセス
前章までで、静的なHTMLファイルをS3にアップロードができました。
しかし、NuxtのトップページのURLがS3のURLになっております。
次はCloudFrontを利用してこのアップロードしたファイルを固定のURLでアクセスできるようにします。
AWSのサービスからCloudFrontを検索しアクセスします。
トップ左上のCreateDistributionをクリックし、WebのGetStartを選択して新規のCloudFrontを作成していきます。
今回は細かな設定はしません。以下の項目に各値を入力して作成をしてください。
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/
無事にNuxtのトップページが表示されました！！
参考
S3 と CloudFront を使用して AWS へデプロイするには？
S3+CloudFrondでNuxt.js(vue)のHTTPS静的サイトを構築・デプロイ
Nuxt.js で作成した静的サイトを S3 + CloudFront でホスティングするパターン