通过 dockerize React 应用程序的 react-env 插件读取 docker 环境变量？答案

【问题标题】：Reading docker environmental variables through react-env plugin for a dockerize React application?通过 dockerize React 应用程序的 react-env 插件读取 docker 环境变量？
【发布时间】：2019-10-08 07:07:48
【问题描述】：

我有一个带有一些环境变量设置的 docker 容器。我知道在典型的用例中，React 无法读取这些变量，因为 process.env 变量在转译期间被替换。

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

核心思想是创建一个可以使用bash 脚本写入的.env 文件。 bash 脚本会将所有环境变量复制到.env 文件中。该插件将生成一个 env.js 文件，然后 React 应用程序将在运行时使用该文件。

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

REACT_APP_SETUP="OK" - 硬编码在 .env 文件中。
REACT_APP_GCP_PROJECT_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" ]

App.jsx

...

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

...

检查控制台

OK
undefined

在上面的示例设置中，我们可以看到插件的工作原理是 dockerized 应用程序确实为 React 应用程序生成了env.js，因此产生了OK 控制台输出。

但是，我似乎无法让 bash 文件写入 .env 文件，因此无法写入 undefined 控制台输出。

exec 进入容器还会显示具有 REACT_APP_GCP_PROJECT_ID="SOMEID" 和 REACT_APP_SETUP="OK" 条目的 .env 文件。

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

如何写入我的.env 文件，以便插件可以生成一个env.js 文件，我的应用程序可以从中读取环境变量？

【问题讨论】：

标签： reactjs bash docker

【解决方案1】：

我建议您在构建应用程序之前写入文件：

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

【讨论】：