Reactjs 通过react-env插件为dockerize react应用程序读取docker环境变量？

我有一个docker容器，其中设置了一些环境变量。我知道在一个典型的用例中，React无法在

过程中读取这些变量。env

变量在传输过程中被替换

我正在尝试解决这个问题，而不必使用名为的插件来启动后端服务器

其核心思想是创建一个

.env

文件，该文件可以使用

bash

脚本写入。

bash

脚本将所有环境变量复制到

.env

文件中。该插件将生成一个

env.js

文件，然后React应用程序将在运行时使用该文件

在我的设置中，我创建了两个示例环境变量

• REACT\u APP\u SETUP=“OK”

  -在

  .env

  文件中硬编码

• REACT\u APP\u GCP\u PROJECT\u ID=“SOMEID”

  -由bash文件编写

.env

# .env
REACT_APP_SETUP="OK" //prewritten env for testing.

docker entrypoint.sh

#!/bin/sh
printf "\n" >> /usr/app/.env

//env that is supposed to be copied.
printf 'REACT_APP_GCP_PROJECT_ID="%s"' SOMEID >> /usr/app/.env 
serve build

Dockerfile

# Base version
FROM node:9

# Install yarn
RUN npm install yarn

# Install serve.js
RUN yarn global add serve

# Create app directory
WORKDIR /usr/app

# Copy all necessary files and grant permissions.
# - yarn.lock
# - package.json
# - .env
# - docker-entrypoint.sh
COPY . /usr/app/
COPY yarn.lock /usr/app
COPY package.json /usr/app
COPY .env /usr/app
COPY docker-entrypoint.sh /usr/app/docker-entrypoint.sh
RUN chmod 777 /usr/app/docker-entrypoint.sh

# Install dependencies.
RUN yarn

# Build application.
RUN yarn build

# Set entrypoint of application.
ENTRYPOINT [ "/usr/app/docker-entrypoint.sh" ]

OK
undefined

App.jsx

...

console.log(env("SETUP"));
console.log(env("GCP_PROJECT_ID"));

...

检查控制台

# Base version
FROM node:9

# Install yarn
RUN npm install yarn

# Install serve.js
RUN yarn global add serve

# Create app directory
WORKDIR /usr/app

# Copy all necessary files and grant permissions.
# - yarn.lock
# - package.json
# - .env
# - docker-entrypoint.sh
COPY . /usr/app/
COPY yarn.lock /usr/app
COPY package.json /usr/app
COPY .env /usr/app
COPY docker-entrypoint.sh /usr/app/docker-entrypoint.sh
RUN chmod 777 /usr/app/docker-entrypoint.sh

# Install dependencies.
RUN yarn

# Build application.
RUN yarn build

# Set entrypoint of application.
ENTRYPOINT [ "/usr/app/docker-entrypoint.sh" ]

OK
undefined

在上面的示例设置中，我们可以看到插件的工作原理是，停靠的应用程序确实为React应用程序生成了

env.js

，因此产生了

OK

控制台输出

但是，我似乎无法让bash文件写入

.env

文件，因此无法获得

未定义的
控制台输出

exec
ing到容器中也会显示
.env
文件，该文件包含
REACT\u APP\u GCP\u PROJECT\u ID=“SOMEID”
和
REACT\u APP\u SETUP=“OK”
条目

我怀疑
env.js
是在bash文件有机会写入
.env
文件之前生成的

如何写入我的
.env
文件，以便插件可以生成一个
env.js
文件，我的应用程序可以从中读取环境变量？
我建议您在构建应用程序之前写入该文件：

FROM node:9

# Install yarn
RUN npm install yarn

# Install serve.js
RUN yarn global add serve

# Create app directory
WORKDIR /usr/app

# Copy all necessary files and grant permissions.
# - yarn.lock
# - package.json
# - .env
# - docker-entrypoint.sh
COPY . /usr/app/
COPY yarn.lock /usr/app
COPY package.json /usr/app
COPY .env /usr/app
COPY docker-entrypoint.sh /usr/app/docker-entrypoint.sh
RUN chmod 777 /usr/app/docker-entrypoint.sh

# Install dependencies.
RUN printf "\n" >> /usr/app/.env
RUN printf 'REACT_APP_GCP_PROJECT_ID="%s"' SOMEID >> /usr/app/.env 
RUN yarn

# Build application.
RUN yarn build

# Set entrypoint of application.
ENTRYPOINT [ "/usr/app/docker-entrypoint.sh" ]

你的入口点是：

#!/bin/sh 
serve build