使用 React 和 TypeScript 从 docker 容器获取环境变量

Question

我正在开发一个带有 python flask 应用程序后端和 React 和 typescript 前端的网站。

我想docker开发它们。

我写了以下docker文件：

返回docker文件

# Use an official Python runtime as an image
FROM python:3.6

EXPOSE 5000

WORKDIR /app

# copy src files in app folder
COPY ./src/* /app/

# Install any needed packages specified in requirements.txt
RUN pip install -r requirements.txt

# Run api ap.py when the container launches with specific ip to reach it from the host
CMD python -m flask run --host=0.0.0.0

字体docker文件

FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# start app
CMD ["npm", "start"]

对于运行我的容器，我使用这些命令：

# Create docker network 
docker network create  --subnet=172.28.0.0/16 --gateway=172.28.5.254 example_network

# Create the api
docker run -d --rm --name backend --network example_network --ip=172.28.5.1 -v *Back/Source/Code/Dir*:/app -p 5000:5000 backend_img

# Create the front
docker run -it --rm --name front -p 3000:3000 --network example_network --ip=172.28.5.4 -v Back/Source/Code/Dir/src:/app/src  front_img

在这种情况下，一切正常，但 API 端点值在代码中，如果我更改后端的 docker 容器 ip，它将不再工作。

我有以下问题： 我尝试将我的后端端点作为环境变量传递给我的反应 docker 容器，但我无法获得反应中的值，我该如何让它工作？

我尝试对前端容器使用以下命令：

# Create the front
docker run -it --rm --name front -p 3000:3000 --network example_network --ip=172.28.5.4 -v Back/Source/Code/Dir/src:/app/src -e API_ENDPOINT=172.28.5.1:5000 front_img

当我连接到 docker 以获取 env 值时，没问题！

docker exec -ti front sh
echo $API_ENDPOINT

在代码中，我尝试使用以下指令来达到我的环境值：

const API_ENDPOINT=process.env.API_ENDOINT

但是我在控制台中的值是未定义的！我的前脸连不上我的后背

我还尝试在映像构建期间将该值作为构建参数传递，并将该值放入 .env 文件中，但结果始终相同：值未定义！

新战线docker档案

# pull official base image
FROM node:13.12.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install react-scripts@3.4.1 -g --silent

# add app
COPY . ./

# define env variables
ARG API_HOST=http://172.28.5.1:5000
ENV API_HOST=$API_HOST
RUN echo $API_HOST
RUN echo "API_HOST=$API_HOST" > .env

# start app
CMD ["npm", "start"]

提前感谢您的阅读和回答！ 抱歉我的英语很基础

Answer 1

您必须使用前缀 REACT_APP_

You must create custom environment variables beginning with REACT_APP_. Any other variables except NODE_ENV will be ignored to avoid accidentally exposing a private key on the machine that could have the same name. Changing any environment variables will require you to restart the development server if it is running.

阅读更多here

使用 React 和 TypeScript 从 docker 容器获取环境变量

Get environment variables from docker container with react and typescript

environment-variables

docker

reactjs

npm-start