2025年8月12日

AmplifyにてNext.jsアプリをホスティングする際の注意

Amplifyのコンソール画面の「環境変数」に Next.jsが参照する環境変数を設定する…だけでは足りないこともあるのだ。 何気にハマったのでメモ。

実行環境

• Web/アプリサーバはAmplify
• アプリはNext.js(v15.4.6)で実装

amplify.ymlの例 Amplifyのコンソール画面等で設定した環境変数を frontend->build->commands 配下に記述。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - nvm install 22
        - nvm use 22
        - npm install
    build:
      commands:
        - env | grep -e COGNITO_CLIENT_SECRET >> .env
        - env | grep -e DDB_METRICS_TABLE_NAME >> .env
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - .npm/**/*

注意点

• コンソール画面の「環境変数」に設定するだけでは「実行環境」には取り込まれない。

その他メモ

• Amplify(Gen1 と Gen2 があるが、「今Gen1なのかGen2なのか」がコンソール画面を見てもわからない。
• “AWS_“で始まる環境変数名を設定しようとすると、「Environment variables cannot start with the reserved prefix “AWS”.」というエラーになり、設定できなかった。(2025/08/13時点)

申し送り事項

• Cliでの構成管理について要調査