在生产构建中反应安全的环境变量答案

【问题标题】：React secure environment variables on production build在生产构建中反应安全的环境变量
【发布时间】：2019-02-04 16:29:30
【问题描述】：

我正在构建一个 React 应用程序并使用 Docker 和 Jenkins 进行生产部署...如何安全地为这个静态应用程序提供环境变量？这是我的 Dockerfile：

# stage 1: build the react app
FROM node:10.15.0 as react-build

WORKDIR /app
COPY . /app

ARG REACT_APP_API_ENTRYPOINT
ARG REACT_APP_CONNECT_URI
ARG REACT_APP_CONNECT_CLIENT_ID
ARG REACT_APP_CONNECT_SECRET
ARG REACT_APP_CONNECT_CALLBACK_URL

RUN yarn
ENV NODE_ENV=production
ENV REACT_APP_API_ENTRYPOINT=${REACT_APP_API_ENTRYPOINT}
ENV REACT_APP_CONNECT_URI=${REACT_APP_CONNECT_URI}
ENV REACT_APP_CONNECT_CLIENT_ID=${REACT_APP_CONNECT_CLIENT_ID}
ENV REACT_APP_CONNECT_SECRET=${REACT_APP_CONNECT_SECRET}
ENV REACT_APP_CONNECT_CALLBACK_URL=${REACT_APP_CONNECT_CALLBACK_URL}
RUN yarn run -s build

# Stage 2: build the production environment
FROM openresty/openresty:alpine
COPY deploy/files/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=react-build /app /usr/local/openresty/nginx/html

# forward request and error logs to docker log collector
RUN ln -sf /dev/stdout /usr/local/openresty/nginx/logs/access.log && \
    ln -sf /dev/stderr /usr/local/openresty/nginx/logs/error.log

EXPOSE 8000
ENTRYPOINT ["nginx", "-g", "daemon off;"]

目前构建过程使这些变量暴露:(

【问题讨论】：

为什么要在 React 等客户端应用中使用一些秘密变量？
因为我需要连接到需要它的 API。保护这些变量的最佳做法是什么？
您是否有后端应用程序可以连接到 API？通常，当您连接到 API 时，您需要在后端进行连接，并且可以保护您的秘密变量。

标签： reactjs docker jenkins docker-compose yarnpkg

【解决方案1】：

您可以使用dotenv 在构建过程中使用.env 文件加载您的环境变量（例如在带有DefinePlugin 的webkpack 中）。

那么您只需 RUN yarn run -s build 而无需指定每个单独的环境变量。

甚至还有一个用于 webpack 设置的快捷方式 npm 包。 webpack-dotenv

【讨论】：

谢谢，但是一旦构建完成，这也会暴露变量。
@numediaweb 你不能隐藏任何环境变量。如果构建需要它们，你不能隐藏它们
我明白了，所以我想我需要一个后端服务器......奇怪的是，React 文档中没有提到类似的东西：我的意思是，大多数应用程序至少需要某种 env 变量用于 dev/暂存/生产环境...
@numediaweb React 是一个库。它不关心他们你用它做什么。任何 env 变量都通过 JS 环境和您使用的任何构建过程使用。你甚至可能不会运行 webpack。所以它根本不关心 React