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 地址。