aws amplifyでReact動かしたい時、環境変数の設定方法

aws amplifyでの環境変数の設定方法

Reactを動かす時、隠しておきたい情報などを.envに記述して動作させることが多々ある。
amplifyでは、GitHubのリポジトリを参照しビルド＝＞デプロイする流れがある。

リポジトリに.envを置いておく人は、あまりいない（少なくとも私は、しない）
じゃあどう設定するのか？

設定方法

環境変数

環境変数というタブがあるので案内に従い、変数管理まで進む

いつも使ってる.env
例
REACT_APP_API_ENDPOINT = "HOGEHOGE"

上の画像のように記入していく。

ダメ　"HOGEHOGE"
まる　HOGEHOGE

”などで囲むと思い通りに行かなかった。

ビルドの設定

下記の通りに記述してください。

frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn run build
        - echo "REACT_APP_API_REGION=$REACT_APP_API_REGION" >> .env

これで、設定は終了です。
私は、このやり方でうまくいきました。

もしうまく行かない時は、（buildに失敗する時）ビルド設定に下にある部分で
Amplify CLI latestこれを設定するのは、どうでしょうか？
nodeなどのバージョンの違いなどで失敗する時があるそうです。

あとがき

環境変数もそうですが、一番不明なのは、buildですね。
テンプレートだとうまくいくんですが、自分で作っていくとなぜか、通らなくなりました。

ビルドされるディレクトリの指定をすれば、うまくいきました。

しかし、URL先を見ると真っ白です。
ビルド時に出力される文を見てるとmoduleないよって書いてあったんですよ。
手元で問題なく動作しているのでまさか、パッケージが不足しているなんて思いもしませんでした。