Amplifyで環境変数を設定しても反映されない場合の処方箋

Amplifyのホスティングを使用している時、環境変数を設定しても反映されていない場合の処方箋です。
自分の実体験から原因と解決法を紹介します。

状況

筆者はNext.jsを使ったプロジェクトをAmplifyを使用してホスティングしました。
環境変数タブから変数を追加し、設定完了しました。

しかし、変数は読まれずエラーが発生。
再ビルドしてもダメです。

原因

クライアントサイドではそのまま環境変数が反映されますが、サーバーサイドではビルド時に参照するように.envファイルに渡し直す必要があるそうです。
筆者はサーバーサイドで環境変数を使用していたので、そのままだと無理だったというわけです。

公式にも記されていました。
https://docs.aws.amazon.com/amplify/latest/userguide/environment-variables.html#access-env-vars

対策

commandsに追加記述します。

...
    build:
      commands:
        - echo "API_KEY=$API_KEY" >> .env
        - yarn run build
...

API_KEYの部分で.envファイルに変数を出力しています。
これで環境変数を参照できるようになりました。