1.ブラウザ側に晒しても OK な環境変数を読み込む
Amplify コンソールの環境変数のページへ行き、設定したい環境変数の prefix としてNEXT_PUBLIC_
をつける。これだけで完了。
ブラウザ側から見れてしまうので、シークレットな値は次に紹介する方法で設定すること。
2.Node.js 環境下(SSR や API routes など)で読み込む
Amplify コンソールの環境変数のページへ行き、環境変数を追加する。ただし prefix NEXT_PUBLIC_
はつけない。
次にamplify.yml
を編集する。ビルドの設定ページに行けばコンソール上で編集可能ですが、リポジトリのルートにamplify.yml
を置いておけば管理しやすくなるのでオススメ。
そしてamplify.yml
の編集内容としては以下になる。
version: 1
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- echo "ENV_TEST=$ENV_TEST" >> .env # この行を追加
- npm run build
artifacts:
baseDirectory: .next
files:
- "**/*"
cache:
paths:
- node_modules/**/*
これでデプロイすれば、読み込みができているはず。
参考情報
ブログ運営者
muuuuminn
経歴:
SE:1年半 → FE:5年 → ?スキル:
Next.js, TypeScript, React, Notion趣味:
ゲーム, 手品, 開発, コレクション, 映画