AWS Amplify x Next.js 構成で API Route から .env.local を参照できない
y3nOverview
公式 doc 通り build 時に amplify console で設定した環境変数から .env.local を生成して渡してる。
過去の同アーキテクチャ別 project ではこれで動作した記憶・メモがあったが、今回、新規プロジェクトでこれら環境変数が next の api route などで読み取れない ( undefined となる ) 問題があった。
As is
具体的には PROD_SMTP_HOST のような環境変数を amplify console で設定し ...
# .env.amplify.template
SMTP_HOST=${PROD_SMTP_HOST}
... のような next が読み取らないテンプレートファイルを中継して、以下 amplify.yml のように build のたびに envsubst で設定した環境変数バラして .env.local を生成するという流れを組んでいた。
# amplify.yml
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci --ignore-scripts
- cat .env.amplify.template | envsubst > .env.local
build:
commands:
- npm run build
artifacts:
baseDirectory: .next
files:
- '**/*'
cache:
paths:
- node_modules/**/*
Expected / Actual
想定では Lambda@Edge で動作する backend code (api route や getServerSideProps) で、上記環境変数を process.env.SMTP_HOST のように参照できるはず。
が、なぜか参照できず undefined になってしまう。
y3nなぜか .env.production だと通る
いくつか枝切りして、ふと aws 公式 doc どおり .env.production にしたらどうかなと思ったら、普通に参照できた。
.env.local でも参照可能な気がするんだけど ... なんでだ。
y3n所感
感覚的には「まぁ local だし」とか思うけど、公式読んでも .env.local のほうが優先される (NODE_ENV === 'test' では ignore だけど) って書いてある。
あと、ちょと前の issue だけど ↓ らへんでも「 amplify で next デプロイするとき env 渡すなら ci で .env.local 生成がいいかもねー」みたいな話してる。
y3n- amplify 側で何らか制御してて、公式 docs の説明が足らない説
- 単純に自前の構成のどこかにポカミスがある説
- ドキュメントの解釈・理解を誤っている説
いくつか追加検証の線があるけど、一旦は動いたので気が向いたらもっかい調べる。