[Docker][React]docker-composeで起動したDockerコンテナ内の環境変数をReactアプリケーション内で参照するには

Question

聞きたいこと

docker-composeで立ち上げたDockerコンテナの環境変数を、Reactアプリ内部で参照したいと思っています。
(例: APIエンドポイントを環境変数に入れて、本番環境・ローカル環境等で切り替える)

Dockerコンテナ内の環境変数では下のように定義されていることは確認できたのですが、Reactアプリケーション内でprocess.envをしても、Dockerコンテナ内の環境変数が存在しません。

Dockerコンテナの環境変数をReactアプリケーション内で参照できるようにするにはどのようにすればいいのか教えていただきたいです。

• Dockerコンテナ

※ API_ROOTが環境変数で存在している

root@fc0912d97d16:/app# env
YARN_VERSION=1.22.5
HOSTNAME=fc0912d97d16
API_URL=http://localhost:
PWD=/app
HOME=/root
NODE_VERSION=14.15.3
TERM=xterm
SHLVL=1
PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
_=/usr/bin/env
root@fc0912d97d16:/app# 

• フロントエンドのソースコード

const API_URL = process.env.API_URL;

const example = () => {
  console.log(API_URL);  // undefinedになってしまう
}

Comments

[hoshi-takanori]

その React アプリも Docker にあるのでしょうか？

[sabx]

はい、React自体もコンテナ上にあります。

[hoshi-takanori]

なら、dotenv を使って .env ファイルに書けばいいのでは。
https://qiita.com/HorikawaTokiya/items/c1a476ceeab0bf644311

Answer 1

create-react-appで作ったアプリのことでしょうか？
であれば、環境変数の最初に REACT_APP_ をつける必要があります
https://create-react-app.dev/docs/adding-custom-environment-variables/