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

Question

我正在使用 docker 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 ，因此代码将能够毫无问题地找到它。 我只是想知道如何处理这样的情况，因为它在我的道路上没有更早出现？

也可以随意评论或优化我的Dockerfile ，因为我不确定例如 Nginx 是否适合用于网站前端应用程序的这些生产构建。

Answer 1

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

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

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

• 如果在构建过程中需要执行npm ci或yarn之外的任何操作来安装东西，则 package.json 已损坏。 react-scripts应该是开发依赖项，Font Awesome 应该是常规依赖项。
• 您不需要在临时容器中添加nano和vim ，即使您这样做了，也最好在apk add中一步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;"]

Answer 2

这是我的 react docker 文件的示例。 如果您想优化，可能可以使用它。

PS：我从 kubernetes 运行它。

# #############################   Stage 0, Build the app   #####################
# pull official base image
FROM node:13.12.0-alpine as build-stage
# set working directory
WORKDIR /app
# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH
# install app dependencies
COPY package*.json ./
#RUN npm install
RUN npm install

# add app
COPY . ./

#build for production
RUN npm run-script build

# #### Stage 1, push the compressed  built app into nginx ####
FROM nginx:1.17

COPY --from=build-stage /app/build/ /usr/share/nginx/html