More than 3 years have passed since last update.

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

Last updated at 2020-09-28Posted at 2020-09-05

はじめに

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

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

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

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

デフォルトのまま次へ。

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

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

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

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

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

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

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

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

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

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

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

赤枠の部分を押下し、Route53にレコードを作成します。
画像の通り成功と出たら完了です。

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

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

Origin Settings

Default Cache Behavior Settings

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のドメイン/ファイル名でで表示されれば完了です。