はじめに

今回はNuxtのアプリケーションをS3+CloudFrontの構成へデプロイする手順を紹介します。

前提

リポジトリ：GitLab
フレームワーク：Nuxt3

実装手順

S3構築

下記の設定でS3を作成していきます。

バケットタイプ > 汎用
バケット名 > 任意
オブジェクト所有者 > ACL有効
　※パブリックへ公開するためにACLの設定を有効化する必要があります。

暗号化はデフォルト暗号化のままで問題ありません。

静的ウェブホスティングの有効化
2-1 .
S3 > 作成したバケット > [プロパティ]タブ　最下部
静的ウェブホスティング > [編集]

2-2.

静的ウェブホスティング > 有効にする
ホスティングタイプ > 静的ウェブサイトをホストする
インデックスドキュメント > ウェブサイトのデフォルトページ

アプリケーションをアップロードして確認する

手動でアプリケーションをアップロードして確認したい場合、Nuxtアプリケーションはdist配下をアップロードすることで
挙動を確認することができます。
先ほど有効化したS3静的ウェブホスティングの設定箇所にエンドポイントが記載されていますので、アップロード後にURLへアクセスするとアプリケーションが公開されていることを確認できます。

CloudFrontの作成

下記の設定でCloudFrontを作成していきます。
オリジンの指定以外は要件に合わせて変更いただればと思います。

オリジン > 1.で作成したS3

パイプラインの構築

GitLabの場合は.gitlab-ci.ymlファイルを作成することで
パイプラインを構築することができます。

バケット名やAWSアクセスキーは
Settings > CICD > Variablesから設定できるシークレットを指定し、ymlファイルに書き込まないようにします。

stages: 
    - build
    - deploy

build:
  image: node:20
  stage: build
  artifacts:
    untracked: true
    when: on_success
    access: all
    expire_in: 1 days
  only:
    - main
  script:
    - npm install
    - npm run generate

deploy:
  image: python:alpine
  stage: deploy
  dependencies:
    - build
  only: 
   - main 
  script:
   - apk add python3-dev
   - pip3 install awscli
   - aws configure set aws_access_key_id $AWS_ACCESS_KEY_ID
   - aws configure set aws_secret_access_key $AWS_SECRET_ACCESS_KEY
   - aws s3 sync ./dist s3://$BUCKET

まとめ

今回はS3 + CloudFrontへのCICDを含めたNuxtアプリケーションのデプロイについてご紹介しました。
IaCの作成やアプリケーションの作りこみ等も今後記事にしていけたらと思います。