如何让 React 应用程序的 npm run build 包含我的环境变量？答案

【问题标题】：How do I have npm run build of a React app include my environment variables?如何让 React 应用程序的 npm run build 包含我的环境变量？
【发布时间】：2022-03-08 14:32:00
【问题描述】：

我正在尝试部署我的应用程序以供公众查看，但我坚持执行此步骤。作为序言，我使用 docker 将我的 React 应用程序容器化，并通过 docker run 的 --env-file 选项传入我的变量。当我使用 CMD ["npm", "start"] 运行应用程序时，这很好用，但是当我尝试更改 dockerfile 以进行生产时，该站点是可访问的，但依赖于环境变量的站点部分失败.

这是我使用的 docker 文件：

FROM node:latest as build-stage
WORKDIR /app
ADD . .
RUN npm install
RUN npm run build

FROM nginx:latest
COPY --from=build-stage /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

我不确定是 nginx 的问题还是我只是误解了 React 中的构建过程以及环境变量是如何注入其中的。

【问题讨论】：

您的环境变量是否以REACT_APP_ 开头？这在create-react-app docs 中有解释
是的，他们有。它在开发构建中正常工作。它只是不适用于 npm run build 命令。

标签： node.js reactjs docker nginx

【解决方案1】：

图像是一个容器（从 node:latest 开始），但该容器不继承您的环境变量。您可以使用 RUN bash 命令或使用 ARG/ENV 在容器中设置变量。您将需要设置应用程序运行所需的任何变量，因为它们将被捆绑到生成的构建中。您还可以在运行容器时设置环境变量，在这种情况下是在 nginx 服务器启动时。

【讨论】：