コンテナで動くReactアプリに環境変数を注入する

背景

Reactのアプリケーションがあります。

接続先のAPIを指定するのにREACT_APP_API_URLを```.env``から読み込んでいます。golangと同様に開発環境からECSに載せようとする際に、この環境変数を書き換えたいです。

golangだとタスク定義で環境変数を渡せたのですが、Reactだと渡せないのです。

どのようにして渡したかを示します。

タスク定義では渡せないので、Dockerfileで渡します。他に良い方法があるかもしれないので、良い方法があったら教えてほしいです。

ENVにREACT_APP_API_URLを直接いれます。開発環境ではコンテナではなく、直接npm startで動作確認するので、以下のようにしても困らないと考えてのことです。

ENV REACT_APP_API_URL="http://myapi.ap-northeast-1.elb.amazonaws.com:8080"

COPY package.json package-lock.json ./

RUN npm ci

Dockerfile

ここからは補足。

ただ、これだと検証環境のAPIと本番環境のAPIを分けたりできません。

とすると、コンテナイメージのビルド時に変数で渡す方法が良いなと考えました。

ARG REACT_APP_API_URL

ENV REACT_APP_API_URL=${REACT_APP_API_URL}

COPY package.json package-lock.json ./

RUN npm ci

Dockerfile

コンテナイメージをビルドする際は以下のように--build-argを使います。

docker build --build-arg REACT_APP_API_URL="http://myapi.ap-northeast-1.elb.amazonaws.com:8080" -t my-react-app .

bash