AWS AmplifyでReactアプリを公開する。環境変数の設定。

ReactアプリをAmplifyでデプロイする。

手順

１．GithubにReactアプリをアップロードする。
　　この際、フォルダ直下に.envのファイルを作成しておく。
　（※Purivate,Publicはどちらでも構わない。）
２．AWS Amplifyにて新しいアプリを作成する。
３．Githubを選択し、使用するアカウントでログインを行う。
４．リポジトリとブランチを選択する。
５．アプリケーションの設定で、任意の名前をつける。
　　Reactアプリの場合は、フレームワークが自動検出されるハズ。
６．確認画面から、保存してデプロイ。

■ 補足
上記でうまくいかない場合は、Github側で接続を許可していない可能性がある。

Amplifyで環境変数を設定する

ソースコードには書きたくない環境変数の設定をAmplifyで設定する手順について

手順

１．フォルダ直下に.envのファイルを用意されているものとする。[Github]
２．ソースコードでは、使用したい変数を以下のように定義するとする。[Github]

const API = process.env.REACT_APP_API;

３．Amplifyにて作成したアプリを開き、ホスティング\環境変数を開く[Amplify]
４．以下の画像のように、任意の値を設定する。[Amplify]

５．ホスティング\ビルドの設定にて、echoコマンドで変数を追加する一文を追加する。[Amplify]

    build:
      commands:
        - yarn run build
        - echo "REACT_APP_API=$REACT_APP_API" >> .env

６．アプリ画面より、本番稼働のブランチを開き、再デプロイを行う。[Amplify]

７．デプロイ完了後、ドメインを開いて環境変数の設定ができていることを確認する。