使用 Docker 构建创建用于生产的 React 应用程序？

Question

我正在使用docker build以下 Dockerfile 创建一个 React 应用程序：

# build env
FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY package-lock.json ./
RUN npm ci
RUN npm install react-scripts -g
RUN npm install --save @fortawesome/fontawesome-free
RUN apk add nano
RUN apk add vim
COPY . ./
RUN npm run build

# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

但我相信 Dockerfile 在这里并不是极其重要。在我的源代码中有一个主配置文件，我想将其排除在外，docker image以便能够轻松部署我的 React 应用程序。这会导致 Dockerfile 命令期间出现编译错误RUN npm run build，因为编译器找不到另一个文件引用的文件。对于开发版本这不是问题，因为npm start不是那么敏感。

我会将配置文件添加为docker volume最终应用程序中的 a，这样代码就能够毫无问题地找到它。我只是想知道如何处理这样的情况，因为它还没有出现在我的道路上？

也请随意评论或优化我的Dockerfile，因为我不确定 Nginx 是否适合网站前端应用程序的这些生产版本。

Answer 1

如果您的应用程序当前require是配置文件，则类似于在构建时将值“硬编码”到其中，正如您所注意到的。如果您确实需要能够在运行时动态交换另一个配置文件，则需要使用egfetch()来加载它，而不是捆绑它（就像require那样）。

如果在构建时进行配置没问题，那么我还建议查看CRA 自定义环境变量；然后，您可以在构建时注入合适的值作为环境变量。

除此之外，如果您正在寻找对 Dockerfile 的批评，从一个 Aarni 到另一个：

• 如果您需要在构建之外npm ci或构建期间执行任何操作来安装内容，则您的 package.json 就会损坏。应该是一个开发依赖项，而 Font Awesome 应该是一个常规依赖项。yarnreact-scripts
• 你不需要nano和在临时容器中，即使你需要，一步一步vim对他们也更好。apk add
• 您不需要修改构建容器中的 PATH。
• 使用 Nginx 绝对没问题。

# build env
FROM node:13.12.0-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build

# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]