Zenn
😸

Dockerで起動したreactで環境変数が取得できない

2024/09/09に公開
Docker
React
env
tech

Dockerで起動したreactで環境変数が取得できなかったときのメモです。
環境変数の全体像が知りたい！という方は下記の記事を参照してね
https://zenn.dev/ponko22/articles/067_docker_env

摘要

  • マルチステージビルドでは、ビルドステージとランタイムステージが存在する
  • reactは環境変数をビルド時に読み込む
  • 具体的にはDockerfile内でビルドステージ中にENVコマンドを利用して環境変数を設定する
  • docker composeであれば、「.env」の値をdocker-compose.ymlを通じてargでビルド時の引数として渡すことができる（.envファイルはdocker compose時に読み込まれているが、ビルド時には設定されない）

ゴール

マルチステージビルドで起動したreact内で環境変数を取得する

現状

環境変数が取得できない

選択肢

前提

DockerfileのENVに環境変数を定義
値の読み込み先は複数の選択肢が存在する

  • 「--build-arg」オプション
    複数環境変数がある場合はコマンドが長くなる
docker build --build-arg API_URL=https://api.example.com -t my-app .
  • 「.env」ファイル（docker-composeでしか利用不可？）
    環境ごとに異なる設定が可能
    環境変数の一元管理が可能
[.env]
API_URL=https://api.example.com
  • docker-compose.ymlの「args」オプション
    環境ごとに異なる設定が可能
version: '3'
services:
  web:
    build:
      context: .
      args:
        API_URL: https://api.example.com
    ports:
      - "3000:3000"

どれが良いのか

環境変数を一元管理したいのと、docker-compose.ymlを複雑にしたくないので「.env」ファイルから取得する方法を採用・・・したいが今回は一旦「--build-arg」オプションで試してみる

やってみる

[dockerfile]
# ベースイメージとしてNodeを使用してビルドする
FROM node:18 AS build

# ビルド引数を定義
ARG REACT_APP_API_BASE_URL

# ビルド引数を使って環境変数を設定
ENV REACT_APP_API_BASE_URL=$REACT_APP_API_BASE_URL
RUN echo "Building for environment: $REACT_APP_API_BASE_URL"

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# Nginxをベースにして、ビルド結果を配信する
FROM nginx:alpine
RUN rm /etc/nginx/conf.d/default.conf
COPY ./docker/nginx.conf /etc/nginx/conf.d/
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
[コマンド]
$ docker build --progress plain  --no-cache -t test-get-variable:latest --build-arg REACT_APP_API_BASE_URL=http://env:8080 .
$ docker run -d --rm  -p 80:80 --name test test-get-variable nginx -g 'daemon off;'

結果

[ログ]
#10 [build 2/7] RUN echo "Building for environment: http://env:8080"

備考(docker composeで行う場合のメモ。確認後追記します)

[docker-compose.yml]
version: '3'
services:
  app:
    build:
      context: .
      args:
        API_URL: ${API_URL}
        API_KEY: ${API_KEY}
    ports:
      - "3000:3000"
[.env]
API_URL=https://api.example.com
API_KEY=myapikey
[Dockerfile]
FROM node:14

# ビルド引数を取得
ARG API_URL
ARG API_KEY

# 環境変数として設定
ENV REACT_APP_API_URL=$API_URL
ENV REACT_APP_API_KEY=$API_KEY

WORKDIR /app
COPY package.json .
RUN npm install

COPY . .
RUN npm run build

Discussion