process.env を AWS Amplifyのconsole にて ビルド時の環境変数で差し替える

Node.js の env process.env.XXXを Amplify console においてフロントエンドのビルド時に環境変数を使って埋め込む

フロントエンド側

ファイル {プロジェクトのルート}/.env.local を作成

ファイル内は、以下とする

XXX=abc

XXXは、create-reacta-app で作成している場合は、REACT_APP を先頭に付与する。REACT_APP_MAX_XXXX=1000 のように。

ローカル環境で

• 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 での設定

1. AWS AMplfiy →　アプリの設定にある「環境変数」を選択

1. 「変数の管理」をクリック

1. 「変数を追加する」
   
   入力欄表示
   
   変数と値を入力し、「保存」をクリック
   

2. 変数の管理に保存した内容が表示される
   

3. アプリの設定にある「ビルドの設定」をクリック
   

4. 編集を押して、変更する。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 で参照されるようになる

ライセンス情報を埋め込むために上記を利用しました。