在生产环境中保护React的环境变量

Question

我正在构建一个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;"]

目前的构建流程会暴露那些变量 :(

- numediaweb

---

为什么在 React 等客户端应用程序中要使用某些秘密变量？ - Tu Tran

因为我需要连接到一个需要它的API。保护这些变量的最佳实践是什么？ - numediaweb

你有连接API的后端应用程序吗？通常，当您连接到API时，需要在后端进行连接，并可以保护您的秘密变量。 - Tu Tran

Answer 1

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

然后你只需要运行 RUN yarn run -s build 而不必指定每个单独的环境变量。

甚至还有一个专门为你的 webpack 设置设计的快捷 npm 包。webpack-dotenv

- João Cunha

---

谢谢，但是这也会在构建完成后暴露变量。 - numediaweb

@numediaweb 你无法隐藏任何环境变量。如果构建需要它们，你就无法隐藏它们。 - João Cunha

我明白了，所以我猜我需要一个后端服务器...奇怪的是在React文档中没有提到这样的东西：我的意思是，大多数应用程序至少需要一些环境变量来区分开发/预发布/生产环境... - numediaweb

@numediaweb React是一个库。它不关心你用它做什么。任何环境变量都是通过JS环境和你使用的构建过程来使用的。你甚至可能不运行webpack。所以React根本不关心这些。 - João Cunha