Help us understand the problem. What is going on with this article?

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

はじめに

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

(公式ドキュメント)S3 と CloudFront を使用して AWS へデプロイするには?
(参考記事)S3 と CloudFront をセットアップするためのチュートリアル

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

前提

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

AWSの環境準備

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

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

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

image.png

デフォルトのまま次へ。

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

3. CloudFrontをセットアップ

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

image.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

次の手順でRoute53の設定でCloudFrontのドメインをRoute53のサブドメインと紐づけます。
赤枠のドメインを控えておいてください。
image.png

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

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

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

image.png

接続確認

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

image.png

手順は以上になります。

補足

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

h-matsufuji
SIerの会社員です。 最近はDockerを触ることが多いです。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away