Vue 项目部署与 CI/CD

Vue 极速入门 第 20 节：Vue 项目部署与 CI/CD：从 Docker 到 GitHub Actions

引言

在现代前端开发中，项目的部署与持续集成/持续交付（CI/CD）是至关重要的环节。通过 Docker 容器化技术，我们可以轻松地将 Vue 项目部署到任何环境中；而借助 GitHub Actions，我们可以实现自动化部署，提升开发效率。本文将带你从零开始，掌握 Vue 项目的部署与 CI/CD 实践。

---

1. 使用 Docker 部署 Vue 项目：容器化与镜像构建

1.1 什么是 Docker？

Docker 是一种容器化技术，它允许开发者将应用程序及其依赖打包到一个轻量级、可移植的容器中。通过 Docker，我们可以确保应用在不同环境中运行的一致性。

1.1.1 Docker 的核心概念

概念	描述
镜像（Image）	一个只读模板，包含运行应用所需的代码、库和配置文件。
容器（Container）	镜像的运行实例，是一个独立的、可执行的进程。
Dockerfile	一个文本文件，包含构建镜像的指令。

1.2 创建 Vue 项目的 Dockerfile

1.2.1 项目目录结构

此次部署内容，采用 Vue 实战-电商商品列表的组件化设计与状态管理的源码，本文中所有仅展示项目结构，不涉及源码，已整理在此，读者可通过链接自行获取。

vue-docker-project/
├── public/                # 静态资源目录
├── src/                   # 源代码目录
├── package.json           # 项目依赖配置文件
├── Dockerfile             # Docker 构建文件
└── .dockerignore          # 忽略文件，类似 .gitignore

1.2.2 编写 Dockerfile

# 使用国内镜像源的 Node.js 18 镜像作为基础镜像
FROM node:18-alpine as build-stage

# 设置工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json ./

# 配置 npm 镜像源为国内镜像
RUN npm config set registry https://registry.npmmirror.com

# 安装依赖
RUN npm install

# 复制项目文件
COPY . .

# 构建项目
RUN npm run build

# 使用国内镜像源的 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;"]

1.2.3 关键代码解释

• FROM node:18-alpine as build-stage：使用 Node.js 18 的 Alpine 版本作为构建阶段的基础镜像，Alpine 版本更轻量。
• RUN npm config set registry https://registry.npmmirror.com：配置 npm 使用国内镜像源，加速依赖安装。
• FROM nginx:stable-alpine as production-stage：使用 Nginx 的 Alpine 版本作为生产环境的基础镜像。
• WORKDIR /app：设置工作目录为 /app。
• COPY package*.json ./：将 package.json 和 package-lock.json 复制到工作目录。
• RUN npm install：安装项目依赖。
• RUN npm run build：构建 Vue 项目，生成静态文件。
• COPY --from=build-stage /app/dist /usr/share/nginx/html：将构建好的静态文件复制到 Nginx 的默认静态文件目录。
• EXPOSE 80：暴露 80 端口，用于外部访问。
• CMD ["nginx", "-g", "daemon off;"]：启动 Nginx 服务。

1.3 构建 Docker 镜像并运行容器

1.3.1 构建镜像

docker build -t vue-docker-app .

1.3.2 运行容器

docker run -d -p 8080:80 vue-docker-app

1.3.3 访问应用

打开浏览器，访问 http://你的电脑IP:8080，即可看到部署的 Vue 应用。

---

2. 配置 GitHub Actions 实现自动化部署：持续集成与持续交付

2.1 什么是 GitHub Actions？

GitHub Actions 是 GitHub 提供的自动化工具，允许开发者在代码仓库中定义工作流（Workflow），实现持续集成与持续交付（CI/CD）。通过 GitHub Actions，你可以自动化构建、测试和部署流程，减少手动操作，提升开发效率。注意：由于此项内容涉及社区规则规范，暂不提供图示，如有需要可在评论区留言，我会单独开一篇博客讲解关于 GitHub Actions 的内容。

2.1.1 GitHub Actions 的核心概念

概念	描述
Workflow	一个自动化流程，由多个 Job 组成。
Job	一个任务，包含多个 Step。
Step	一个具体的操作，如运行命令或调用 Action。
Action	可重用的代码单元ÿ