ごっそログ

勉強したことなどを書いていきます

Nuxt 3+Spring BootでREST API #12 フロントのインフラを構築する（手動編）

イントロダクション

この回からはデプロイ周りを整備していく。
最終的にはAWS CDKで自動化するが、何をやっているかの理解を深めるために手動→CloudFormation→CDKと段階を踏みながら同じ作業をしていく予定。
今回はマネジメントコンソールをいじりながら手動でデプロイしていく。

目次

S3バケットを作成する

Nuxtのファイルを放り込むためのS3バケットを作成する。

一般的な設定

任意のバケット名を付ける。グローバルに一意な必要がある。

このバケットのブロックパブリックアクセス設定

「パブリックアクセスをすべてブロック」のチェックを外す。

「現在の設定により、このバケットとバケット内のオブジェクトが公開される可能性があることを承認します。」にチェックを入れる。

これ以外はデフォルトのままバケットを作成。

Nuxtのビルド & デプロイ

npm run generateを実行。

.output/publicにファイルが吐き出されるので、この中身を全てS3にアップロードする。

プロパティ > 静的ウェブサイトホスティングの編集を押す。

  • 静的ウェブサイトホスティング
    • 「有効にする」を選択。
  • インデックスドキュメント
    • index.htmlを指定。

「変更の保存」を押す。

CloudFrontディストリビューションを作成する

CloudFrontに移動し、「ディストリビューションを作成」を押す。

オリジン
  • オリジンドメイン
    • 先ほど公開したエンドポイントを登録。
  • 名前
    • オリジンドメイン設定時に自動で反映される。
  • S3 バケットアクセス
    • Origin access control settings (recommended) を選択。
  • Origin access control
    • 「コントロール設定を作成」から作成し設定。

デフォルトのキャッシュビヘイビア

設定
  • デフォルトルートオブジェクト - オプション
    • index.html を設定。

上記以外はデフォルトのままで「ディストリビューションを作成」をクリック。

S3バケットポリシーの更新

ディストリビューション作成後、下記のポップアップが出るので、ポリシーをコピーした後、S3のバケットポリシー編集画面に移動する。

ポリシーを貼り付け。

CloudFrontに戻り、一般 > 詳細 > ディストリビューションドメイン名 のURIにアクセスしてみる。
画面が表示されればOK。

参考

Nuxt3 (SSG) を S3 & CloudFront に CloudFormation でデプロイする | mirumi.tech