reactjs - 在生产构建中 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;"]

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

Answer 1

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

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

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