Amplifyで環境変数が反映されない問題を解決する

AWS Amplifyで環境変数を設定したのに反映されない場合の原因と解決方法を紹介します。

問題の状況

Next.jsプロジェクトをAmplifyでホスティングし、環境変数を設定しましたが、サーバーサイドで環境変数が読み込まれずエラーが発生しました。再ビルドしても解決しません。

原因

Amplifyでの環境変数の扱いには以下の違いがあります。

• クライアントサイド: 環境変数がそのまま反映される
• サーバーサイド: ビルド時に.envファイルに明示的に書き出す必要がある

公式ドキュメント: https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#access-env-vars

解決方法

amplify.ymlのbuild.commandsに環境変数を.envファイルに出力する処理を追加します。

version: 1
frontend:
  phases:
    build:
      commands:
        - echo "API_KEY=$API_KEY" >> .env
        - yarn run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'

ポイント:

• echo "変数名=$変数名" >> .envで環境変数を.envファイルに書き出す
• ビルドコマンドの前に実行する

まとめ

Amplifyでサーバーサイドレンダリング（SSR）やサーバーサイドの処理で環境変数を使用する場合は、ビルド時に.envファイルへの書き出しが必要です。クライアントサイドのみの場合は、この対応は不要です。