💊

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

2023/01/20に公開

はじめに

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

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

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

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

commandsに追加記述します。

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

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