Reactjs 使用react和typescript从docker容器中获取环境变量

我正在开发一个带有PythonFlask应用程序后端和react和typescript前端的网站

我想将它们记录下来以便开发。

我写了以下dockerfiles：

后码头文件

字体文件

要运行容器，我使用以下命令：

# 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，它将不再工作

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

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

# 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以获取环境值时，一切正常

docker exec -ti front sh
echo $API_ENDPOINT

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

const API_ENDPOINT=process.env.API_ENDOINT

但我在控制台中的值未定义！ 我的前面无法连接到后面

我还尝试在映像构建期间将该值作为build arg传递，并将该值放入.env文件中，但结果始终相同：value undefined

新前码头文件

提前感谢您的阅读和回答

---

对不起，我的基础英语

您必须使用前缀

REACT\u APP

您必须创建以REACT\u APP\u开头的自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免在机器上意外地公开可能具有相同名称的私钥。更改任何环境变量都需要重新启动正在运行的开发服务器

• 阅读更多

---

您必须使用前缀

REACT\u APP

您必须创建以REACT\u APP\u开头的自定义环境变量。除了NODE_ENV之外的任何其他变量都将被忽略，以避免在机器上意外地公开可能具有相同名称的私钥。更改任何环境变量都需要重新启动正在运行的开发服务器

• 阅读更多

---

如果您想在本地运行，我认为最好使用docker-compose.yml。这将为您管理网络，服务名称将是您可以从react应用程序连接到的主机。我认为如果您想在本地运行，最好使用docker-compose.yml。这将为您管理网络，服务名称将是您可以从react应用程序连接到的主机。非常感谢！非常感谢！

docker exec -ti front sh
echo $API_ENDPOINT

const API_ENDPOINT=process.env.API_ENDOINT

# 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"]