Node.js の env process.env.XXXを Amplify console においてフロントエンドのビルド時に環境変数を使って埋め込む
フロントエンド側
ファイル {プロジェクトのルート}/.env.local を作成
ファイル内は、以下とする
XXX=abc
ローカル環境で
process.env.local で参照できることを確認する
const key: string = process.env.XXX || '';
|| で結合しているのは、nullにならないようにしたいための策
{プロジェクトのルート}/.gitignore は以下のような記載を想定
# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
Amplif console での設定
AWS AMplfiy → アプリの設定にある「環境変数」を選択
「変数の管理」をクリック
「変数を追加する」
入力欄表示
変数と値を入力し、「保存」をクリック
変数の管理に保存した内容が表示される
アプリの設定にある「ビルドの設定」をクリック
編集を押して、変更する。echo の行が編集内容
version: 1.0
backend:
phases:
build:
commands:
- '# Execute Amplify CLI with the helper script'
- amplifyPush --simple
frontend:
phases:
preBuild:
commands:
- npm install
build:
commands:
- npm run build
- echo "XXX" >> .env
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
- node_modules/**/*
以上で、 Amplify console でビルドされたフロントエンド側は、process.env.XXX で参照されるようになる
ライセンス情報を埋め込むために上記を利用しました。
↧