web vue 项目 Docker化部署

Web 项目 Docker 化部署详细教程

目录

1. Web 项目 Docker 化部署概述
2. Dockerfile 详解
   • 构建阶段
   • 生产阶段
3. 构建和运行 Docker 镜像

1. Web 项目 Docker 化部署概述

Docker 化部署的主要步骤分为以下几个阶段：

1. 构建阶段（Build Stage）：

   • 使用 Node.js 镜像或其他构建环境来安装依赖并构建前端项目。
   • 安装依赖、执行构建命令，生成生产环境的静态文件。

2. 生产阶段（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 文件：

1. 创建不同的 .env 文件：.env.production、.env.development、.env.staging。
2. 在 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 化部署，整个流程包括：

1. 使用 Node.js 镜像进行构建，安装依赖并生成生产环境的静态文件。
2. 使用 Nginx 镜像提供静态文件服务。
3. 通过 Docker 构建镜像和启动容器，最终访问部署好的应用。