docker多阶段构建的示例

Dockerfile内容

# 构建阶段
FROM node:20 as builder
WORKDIR /app
# 设置 npm 使用淘宝镜像源
RUN npm config set registry https://registry.npmmirror.com
# 添加构建参数
ARG APP_VERSION
ENV APP_VERSION=${APP_VERSION}
ARG VITE_API_URL
ENV VITE_API_URL=${VITE_API_URL}
# 安装依赖
COPY package*.json ./
RUN npm ci
# 复制源代码并构建
COPY . .
RUN npm run build
# 生产阶段
FROM nginx:1
# 复制构建产物和nginx配置
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

分析

这个 Dockerfile 采用了多阶段构建的方式来构建一个前端应用的 Docker 镜像，主要分为构建阶段和生产阶段。下面为你详细解释每一部分的作用：
构建阶段
FROM node:20 as builder
使用 node:20 作为基础镜像，并且给这个构建阶段命名为 builder。node:20 镜像包含了 Node.js 20 版本的运行环境，适合用于前端项目的构建。
WORKDIR /app
设置工作目录为 /app，后续的命令都会在这个目录下执行。
RUN npm config set registry https://registry.npmmirror.com
执行 npm 命令，将 npm 的镜像源设置为淘宝镜像源（https://registry.npmmirror.com），这样可以加快在国内网络环境下下载依赖包的速度。
ARG APP_VERSION
ENV APP_VERSION=${APP_VERSION}
ARG VITE_API_URL
ENV VITE_API_URL=${VITE_API_URL}
使用 ARG 指令定义了两个构建参数 APP_VERSION 和 VITE_API_URL。ARG 用于在构建镜像时传递参数。
使用 ENV 指令将这两个参数设置为环境变量，这样在后续的构建过程中可以使用这些环境变量。
COPY package*.json ./
RUN npm ci
将项目根目录下的 package.json 和 package-lock.json（如果存在）复制到工作目录 /app 中。
执行 npm ci 命令来安装项目依赖。npm ci 会严格按照 package-lock.json 中的版本信息来安装依赖，保证依赖安装的一致性。
COPY . .
RUN npm run build
将整个项目目录复制到工作目录 /app 中。
执行 npm run build 命令来构建前端项目，通常会生成一个包含静态文件的 dist 目录。
生产阶段
FROM nginx:1
使用 nginx:1 作为基础镜像，这个镜像包含了 Nginx 服务器，用于部署静态网站。
COPY --from=builder /app/dist /usr/share/nginx/html
使用 COPY --from=builder 指令从前面命名为 builder 的构建阶段复制构建产物（即dist目录）到 Nginx 的默认网站根目录 /usr/share/nginx/html 中。
COPY nginx.conf /etc/nginx/conf.d/default.conf
将本地的 nginx.conf 文件复制到 Nginx 的配置目录 /etc/nginx/conf.d/default.conf 中，用于配置 Nginx 服务器的行为。
EXPOSE 80
声明容器在运行时会监听 80 端口，但这并不会实际进行端口映射。
CMD ["nginx", "-g", "daemon off;"]
指定容器启动时默认执行的命令，即启动 Nginx 服务器并以非守护进程模式运行。
总结
这个 Dockerfile 通过多阶段构建的方式，将构建过程和生产部署分离。构建阶段使用 Node.js 镜像来构建前端项目，生产阶段使用 Nginx 镜像来部署静态网站，这样可以减小最终镜像的大小，提高部署效率。同时，通过使用构建参数和环境变量，可以在构建镜像时灵活配置应用的版本和 API 地址。