AWS Amplify にデプロイすることがあったので手順と注意点を備忘録として残します。
Nuxt側の設定は特段必要ではありませんが、環境変数の設定に少し苦労したので注意して読むとスムーズにデプロイできると思います。
Nuxt プロジェクトを作成
すでにNuxtのプロジェクトがある人は読み飛ばしてください。
pnpm create nuxt@latest <project-name>
pnpm install
lockファイルがないとデプロイの処理でエラーになります。
プロジェクトの作成とセットで実行してください。
今回はパッケージマネージャーがpnpmなのでpnpm-lock.yamlが生成されました。
Nuxtのドキュメントにもあるように、ゼロコンフィグでデプロイできるのでデプロイの下準備はこれでおしまいです。
コミット&プッシュは忘れずに。
1. AWS Amplify のコンソールから新しいアプリを作成
コンソールの右上の検索欄からサービスなどを検索できます。
アプリをひとつも作ってないとランディングページみたいなのが表示されますが基本は同じです。
2. Git のプロバイダーを選択
今回はGithubを選択します。
3. Github で Amplify を承認する
デプロイしたいリポジトリを選択したください。
承認後コンソールにリダイレクトされます。
4. レポジトリとブランチを選択
認証したスコープでレポジトリが選択できます。
デプロイしたいリポジトリとブランチもこのページで選択します。
5. デプロイ設定を書く
ビルド設定
「アプリケーションの設定」に遷移した時点で設定が自動検出されます。
このままだとビルドに失敗するので少し設定を加えます。
せっかく自動生成してくれましたがYMLファイルを編集しちゃいます。
ポリレポ場合の設定例
version: 1
frontend:
phases:
preBuild:
commands:
- corepack enable
- npx --yes nypm i
build:
commands:
- env | grep -e NUXT_SOME_ENV >> .env # 必要に応じて環境変数を設定
- pnpm run build
artifacts:
baseDirectory: .output # .amplify-hostingから.outputに変更
files:
- '**/*'
モノレポ場合の設定例
version: 1
applications:
- frontend:
phases:
preBuild:
commands:
- corepack enable
- npx pnpm install
build:
commands:
- env | grep -e NUXT_SOME_ENV >> apps/web/.env # appRootに合わせる
- pnpm build --filter=web
artifacts:
baseDirectory: apps/web/.output
files:
- "**/*"
buildPath: /
appRoot: apps/web
Basic認証の設定（オプション）
「自分のサイトをパスワードで保護」にチェックを入れることで入力欄が表示されます。
詳細設定
- 環境変数の設定
- SSRアプリケーションログを有効にする（オプション）
6. デプロイ
「保存してデプロイ」を押すと設定したブランチでビルドして自動でデプロイされます。
デプロイに成功すると以下のようになります。
ページを表示
Nuxtのデフォルト表示出ました〜
おまけ. 環境変数の読み込みチェック
バックエンドで環境変数を取得してページに表示させてみます。
NUXT_SOME_ENV="I LOVE NUXT"
export default defineNuxtConfig({
compatibilityDate: '2025-07-15',
devtools: { enabled: true },
+ runtimeConfig: {
+ someEnv: process.env.NUXT_SOME_ENV
+ }
})
export default defineEventHandler(async (event) => {
const runtimeConfig = useRuntimeConfig(event)
return runtimeConfig.someEnv || 'NUXT_SOME_ENV is not set'
})
<script setup lang="ts">
const { data }= await useFetch('/api/someEnv')
</script>
<template>
<div>
NUXT_SOME_ENV: {{ data }}
</div>
</template>
いけました！笑
Discussion