Web 项目 Docker 化部署详细教程
目录
- Web 项目 Docker 化部署概述
- Dockerfile 详解
- 构建阶段
- 生产阶段
- 构建和运行 Docker 镜像
1. Web 项目 Docker 化部署概述
Docker 化部署的主要步骤分为以下几个阶段：
-
构建阶段（Build Stage）：
- 使用 Node.js 镜像或其他构建环境来安装依赖并构建前端项目。
- 安装依赖、执行构建命令，生成生产环境的静态文件。
-
生产阶段（Production Stage）：
- 使用 Nginx 或其他 Web 服务器镜像，将构建后的静态文件部署到服务器，并通过反向代理提供服务。
在整个流程中，Dockerfile 是至关重要的文件，它定义了如何构建镜像以及如何将应用部署到容器中。
2. Dockerfile 详解
2.1 构建阶段（Build Stage）
在构建阶段，我们使用一个 Node.js 镜像来安装依赖、编译和构建前端项目。常见的构建工具有 npm、pnpm 或 yarn，这里以 pnpm 为例。
以下是构建阶段的详细 Dockerfile 配置：
# 使用 Node.js 镜像作为构建阶段的基础镜像
FROM node:20-alpine as build-stage
# 设置工作目录
WORKDIR /app
# 启用 corepack，并准备 pnpm 作为包管理工具
RUN corepack enable
RUN corepack prepare pnpm@latest --activate
# 设置 npm 镜像源为国内镜像源，避免依赖下载慢
RUN npm config set registry https://registry.npmmirror.com
# 复制 npm 配置文件、package.json 和 pnpm-lock.yaml
COPY .npmrc package.json pnpm-lock.yaml ./
# 安装项目依赖，使用 frozen-lockfile 确保依赖一致
RUN pnpm install --frozen-lockfile
# 复制项目的所有源文件到容器中
COPY . .
# 执行构建命令，生成生产环境的静态文件
RUN pnpm build
关键步骤解析：
FROM node:20-alpine as build-stage：选择基于 Alpine 的 Node.js 镜像，轻量且包含必要的构建环境。WORKDIR /app：设置工作目录为/app，后续的所有命令将在此目录下执行。RUN corepack enable：启用corepack，这是一个包管理工具，用于支持 pnpm、yarn 等。COPY .npmrc package.json pnpm-lock.yaml ./：复制项目的依赖配置文件（如.npmrc，package.json，pnpm-lock.yaml）。RUN pnpm install --frozen-lockfile：安装依赖，--frozen-lockfile选项确保依赖锁文件不被修改。RUN pnpm build：执行构建命令，生成静态资源。
2.2 生产阶段（Production Stage）
在生产阶段，我们使用 Nginx 镜像来提供静态文件服务。将构建阶段生成的静态文件拷贝到 Nginx 的服务目录，并启动 Nginx 服务。
以下是生产阶段的 Dockerfile 配置：
# 使用 Nginx 镜像作为生产阶段的基础镜像
FROM nginx:stable-alpine as production-stage
# 将构建阶段生成的静态文件复制到 Nginx 默认的服务目录
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 设置监听端口为 80
EXPOSE 80
# 启动 Nginx 服务
CMD ["nginx", "-g", "daemon off;"]
关键步骤解析：
FROM nginx:stable-alpine as production-stage：使用 Nginx 镜像作为生产阶段的基础镜像，选择稳定版 Alpine 版本。COPY --from=build-stage /app/dist /usr/share/nginx/html：将构建阶段生成的静态文件从build-stage中复制到 Nginx 服务目录（/usr/share/nginx/html），这是 Nginx 默认的 Web 目录。EXPOSE 80：暴露端口 80，供外部访问。CMD ["nginx", "-g", "daemon off;"]：启动 Nginx 服务，-g daemon off;让 Nginx 在前台运行，避免容器退出。
3. 构建和运行 Docker 镜像
3.1 构建 Docker 镜像
使用 docker build 命令根据 Dockerfile 构建镜像：
docker build -t my-web-app:latest .
-t my-web-app:latest：给镜像打上标签my-web-app:latest。.：表示 Dockerfile 位于当前目录。
3.2 运行 Docker 容器
构建完成后，使用 docker run 启动容器：
docker run -d -p 8080:80 --name web-container my-web-app:latest
-d：后台运行容器。-p 8080:80：将容器的 80 端口映射到本地的 8080 端口。--name web-container：给容器指定名称web-container。my-web-app:latest：使用刚刚构建的镜像启动容器。
补充一个更方便的本地验证命令（临时跑一下）
如果你只是想快速测，不想起名字、也不想后台跑，可以直接：
docker run --rm -p 8080:80 my-vue-app:latest
--rm：容器退出后自动删除- 非
-d：直接前台打印 nginx 日志
更适合本地测试开发。
3.3 访问应用
成功启动容器后，访问以下 URL 即可看到你的应用：
http://localhost:8080
4.根据不同环境区分 Dockerfile 中的配置
4.1 使用 ARG 和 ENV 传递环境变量
在 Dockerfile 中，ARG 用于定义构建时参数，ENV 用于定义容器内的环境变量。通过这两者，可以在构建时传递不同的环境变量，来区分不同的配置。
示例：
ile复制编辑# 定义构建时参数
ARG NODE_ENV=production
# 将构建时参数传递给容器环境变量
ENV NODE_ENV=${NODE_ENV}
在构建镜像时，通过 --build-arg 来传递不同的环境：
bash复制编辑# 构建生产环境镜像
docker build --build-arg NODE_ENV=production -t my-web-app:prod .
# 构建开发环境镜像
docker build --build-arg NODE_ENV=development -t my-web-app:dev .
在 Dockerfile 中使用 NODE_ENV 来选择不同的构建配置（如不同的静态文件或配置文件）。
4.2 根据不同的环境选择不同的配置文件
可以在 Dockerfile 中根据环境变量选择不同的配置文件。例如，使用 NODE_ENV 来决定是使用开发环境配置文件还是生产环境配置文件。
dockerfile复制编辑# 根据 NODE_ENV 选择不同的配置文件
COPY ./nginx/${NODE_ENV}.conf /etc/nginx/nginx.conf
在项目中准备不同的配置文件，如 nginx/production.conf 和 nginx/development.conf，然后根据 NODE_ENV 的值来选择使用哪个配置文件。
4.3 使用 .env 文件管理不同的环境变量
可以为不同环境准备不同的 .env 文件，然后在运行容器时加载对应的 .env 文件：
- 创建不同的
.env文件：.env.production、.env.development、.env.staging。 - 在
docker-compose或docker run命令中使用--env-file来加载相应的.env文件：
docker run --env-file .env.production my-web-app:prod
这样可以根据不同的 .env 文件来配置不同的环境变量
注：也可以在build阶段直接写环境，例如:（根据项目中 package.json 中命令决定）
RUN pnpm build:staging
5. 总结
本文详细介绍了如何将 Web 项目 Docker 化部署，整个流程包括：
- 使用 Node.js 镜像进行构建，安装依赖并生成生产环境的静态文件。
- 使用 Nginx 镜像提供静态文件服务。
- 通过 Docker 构建镜像和启动容器，最终访问部署好的应用。
