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

Posted 2023-02-22

【中文标题】使用 Docker 构建为生产创建 React 应用程序？

【英文标题】：Creating React application for production with Docker build?

【发布时间】：2020-12-22 17:19:23

【问题描述】：

我正在使用 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 是否适合用于网站前端应用程序的这些生产构建。

【问题讨论】：

如果不涉及 Docker，您将如何解决这个问题？您可能仍想npm run build 并让面向生产的服务器提供预构建文件。

【参考方案1】：

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

如果在构建时配置东西很好，那么我还建议查看CRA custom environment variables；然后，您可以在构建时将合适的值作为环境变量注入。

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

如果您需要在构建过程中执行npm ci 或yarn 之外的任何操作来安装东西，那么您的 package.json 就会损坏。 react-scripts 应该是一个开发依赖项，而 Font Awesome 应该是一个常规依赖项。 您不需要在临时容器中使用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;"]

【参考方案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
  

【讨论】：

这似乎与原始问题中的 Dockerfile 没有本质区别，并且似乎没有解决那里提出的配置问题。

tenia mis dudas pero esto me ayudo COPY --from=build-stage /app/build/ /usr/share/nginx/html gracias