华为云 CodeArts Pipeline前端 Vue 项目自动打包发布配置指南

从零开始配置 Vue 项目 CI/CD 流水线，实现代码提交自动构建部署到 ECS

📋 适用产品：CodeArts Pipeline + Deploy🖥️ 目标环境：华为云 ECS（内网 192.168.1.77）📅 更新日期：2026-08-03

📑 目录

整体架构与流程概览
前期准备工作
[ECS 服务器环境配置](#ECS 服务器环境配置)
[创建 CodeArts 项目与代码托管](#创建 CodeArts 项目与代码托管)
[配置构建任务（Vue 打包）](#配置构建任务（Vue 打包）)
[配置部署任务（部署到 ECS）](#配置部署任务（部署到 ECS）)
配置流水线（串联构建与部署）
配置自动触发与通知
验证与常见问题排查

一、整体架构与流程概览

本方案使用华为云 CodeArts 一站式 DevOps 平台，实现前端 Vue 项目从代码提交到自动部署上线的全流程自动化。核心涉及三个服务组件协同工作：

代码提交 CodeArts Repo

→

CodeArts Build 构建打包

→

CodeArts Deploy 部署到 ECS

→

Nginx 提供访问

涉及的华为云服务

服务名称	作用	说明
CodeArts Repo	代码托管	Git 私有仓库，存储 Vue 项目源代码
CodeArts Build	编译构建	执行 npm install + npm run build，生成 dist 包
CodeArts Deploy	持续部署	将构建产物部署到 ECS 服务器
CodeArts Pipeline	流水线编排	可视化编排构建+部署全流程，支持自动触发
ECS 弹性云服务器	运行环境	内网 IP：192.168.1.77，部署 Nginx 托管静态资源

💡 内网部署说明

您的 ECS 使用内网 IP（192.168.1.77），CodeArts Deploy 需要通过**部署代理（Agent）**方式连接内网 ECS。在 ECS 上安装部署代理后，代理会主动与 CodeArts 服务建立连接，从而实现内网环境的自动化部署。

二、前期准备工作

2.1 华为云账号与权限

注册华为云账号并完成实名认证（个人或企业均可）
开通 CodeArts 服务（基础版免费体验即可入门）
确保账号拥有 ECS 管理员权限和 CodeArts 项目创建权限

2.2 ECS 服务器要求

操作系统：推荐 CentOS 7.x / 8.x 或 Ubuntu 20.04+
已安装 Nginx（用于托管 Vue 打包后的静态文件）
已配置安全组，确保服务器能访问外网（部署代理需要主动外连）
拥有 root 或 sudo 权限的账号

2.3 Vue 项目准备

项目使用 Vue CLI 或 Vite 创建，package.json 中已有 build 脚本
本地执行 npm run build 可正常生成 dist/ 目录
代码已提交到 Git 仓库（可先推送到 CodeArts Repo）

⚠️ 重要提示

如果您的 ECS 只有内网 IP，没有公网出口，请先确认 ECS 所在 VPC 已配置 NAT 网关 或 弹性公网 IP，确保 ECS 可以主动访问互联网，以便安装部署代理和拉取依赖。

三、ECS 服务器环境配置

3.1 安装并配置 Nginx

步骤 1：安装 Nginx

复制代码

# CentOS
yum install -y nginx

# Ubuntu
apt update && apt install -y nginx

# 启动并设置开机自启
systemctl start nginx
systemctl enable nginx

步骤 2：创建项目部署目录

复制代码

# 创建项目目录（根据实际情况修改路径）
mkdir -p /data/www/your-vue-project

# 设置目录权限（确保部署代理用户可写入）
chown -R nginx:nginx /data/www/your-vue-project
chmod -R 755 /data/www/your-vue-project

步骤 3：配置 Nginx 站点

复制代码

# 编辑 Nginx 配置文件
vi /etc/nginx/conf.d/your-vue-project.conf

添加以下配置（根据实际情况修改域名和路径）：

复制代码

server {
    listen 80;
    server_name your-domain.com;  # 替换为您的域名或服务器IP

    root /data/www/your-vue-project;
    index index.html;

    # Vue Router history 模式必备配置
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 静态资源缓存优化
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
    }

    # gzip 压缩
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml;
    gzip_min_length 1k;
}

验证并重启 Nginx：

复制代码

nginx -t
systemctl reload nginx

3.2 创建部署专用用户（推荐）

复制代码

# 创建 deploy 用户
useradd -m deploy

# 设置密码
passwd deploy

# 授予项目目录权限
chown -R deploy:deploy /data/www/your-vue-project

# 如需 sudo 权限（可选）
echo "deploy ALL=(ALL) NOPASSWD:ALL" >> /etc/sudoers.d/deploy

💡 安全建议

使用专用的 deploy 用户进行部署操作，避免直接使用 root 账号，降低安全风险。

四、创建 CodeArts 项目与代码托管

4.1 创建项目

登录华为云控制台，进入 CodeArts 软件开发生产线 服务
点击「立即使用」进入 CodeArts 首页
点击「新建项目 」，选择 Scrum 或看板模板
填写项目名称（如：vue-frontend-deploy），选择可见范围，点击「确定」

4.2 创建代码仓库

进入项目后，在左侧导航栏选择「代码」→「代码托管」
点击「新建仓库」
选择创建方式：
- 普通新建：创建空仓库，后续手动推送代码
- 导入外部仓库：从 GitHub/GitLab 等导入现有代码
填写仓库名称，设置私有可见，点击「确定」

4.3 推送 Vue 项目代码

在本地 Vue 项目目录执行：

复制代码

# 初始化 Git（如尚未初始化）
git init
git add .
git commit -m "initial commit"

# 添加远程仓库地址（替换为实际仓库地址）
git remote add origin https://codehub.devcloud.cn-north-4.huaweicloud.com/your-project/your-repo.git

# 推送代码
git push -u origin master

💡 凭据说明

首次推送时需要输入 CodeArts 的用户名和密码。可在 CodeArts 控制台「设置」→「私有令牌」中生成 HTTPS 密码，或配置 SSH 密钥。

五、配置构建任务（Vue 打包）

5.1 创建构建任务

在 CodeArts 项目左侧导航栏，选择「构建」→「编译构建」
点击「新建任务」
填写任务基本信息：
- 任务名称：vue-build
- 源码源：选择「CodeArts Repo」
- 仓库：选择您的 Vue 项目仓库
- 分支：master（或 main，根据您的主分支名称）
点击「下一步」进入构建步骤配置

5.2 配置构建步骤

步骤 1：选择构建模板

在构建模板中搜索并选择「Node.js 」相关模板，或选择「空白构建」手动添加步骤。

步骤 2：配置构建环境

构建集群：选择「华为云公共构建集群」
操作系统：Linux
构建镜像：选择 nodejs 镜像（推荐 Node.js 16.x 或 18.x，根据项目需求）

步骤 3：添加构建步骤

步骤 3.1：代码检出（通常已自动添加）

步骤类型：代码检出
确认仓库和分支正确

步骤 3.2：安装依赖

点击「添加步骤 」，搜索「Shell 」或「npm」
步骤名称：安装依赖
执行命令：

使用 npm

npm install --registry=https://registry.npmmirror.com

或使用 yarn（需项目已配置 yarn.lock）

yarn install --registry=https://registry.npmmirror.com

步骤 3.3：执行构建

添加步骤：Shell 或 npm
步骤名称：项目构建
执行命令：

Vue CLI 项目

npm run build

Vite 项目（命令相同，具体看 package.json 配置）

npm run build

步骤 3.4：打包构建产物

添加步骤：搜索「软件发布库 」或「归档到制品库」
步骤名称：归档构建产物
待归档目录/文件：dist/（Vue 构建产物目录）
版本号：可使用内置变量如 ${BUILD_NUMBER} 或自定义

💡 构建产物说明

归档后的 dist 包会存储在 CodeArts 软件发布库中，后续部署任务将从发布库拉取产物进行部署。

5.3 保存并测试构建

点击「保存」保存构建任务
点击「运行」手动触发一次构建
查看构建日志，确认所有步骤执行成功，dist 包正确生成并归档

⚠️ 常见构建失败原因

Node.js 版本不匹配：检查构建镜像的 Node 版本与项目要求是否一致
依赖安装失败：可切换 npm 镜像源（如 npmmirror）
构建产物路径错误：确认 dist 目录是否在项目根目录下

六、配置部署任务（部署到 ECS）

6.1 配置主机组与部署代理

步骤 1：进入部署服务

在 CodeArts 项目左侧导航栏，选择「部署」→「部署」，进入 CodeArts Deploy 服务。

步骤 2：创建主机组

在 Deploy 服务左侧菜单，选择「主机组管理」
点击「新建主机组」
填写信息：
- 主机组名称：prod-ecs-group（自定义）
- 操作系统：Linux
- 项目名称：选择当前项目
点击「确定」

步骤 3：添加主机并安装部署代理

进入刚创建的主机组，点击「添加主机」
选择「代理模式」（适合内网 ECS）
填写主机信息：
- 主机名称：prod-ecs-01（自定义）
- 主机 IP：192.168.1.77
- SSH 端口：22（默认）
- 用户名：deploy（或 root，根据 3.2 节创建的用户）
- 认证方式：密码 / 密钥（选择您配置的方式）
- 密码/密钥：填写对应认证信息
点击「安装代理并添加」
系统会生成代理安装命令，您需要登录到 ECS 服务器执行该命令

手动安装部署代理命令示例（实际以控制台显示为准）：

复制代码

# 在 ECS 服务器上执行（以 root 身份）
wget https://deploy.cn-north-4.myhuaweicloud.com/agent/download/deploy-agent-install.sh
chmod +x deploy-agent-install.sh
./deploy-agent-install.sh -t your-agent-token -r cn-north-4

✅ 代理安装成功判断

安装完成后，在主机组列表中查看主机状态，如果显示「在线」则表示代理安装成功，可以正常进行部署。

6.2 创建部署任务

在 Deploy 服务左侧菜单，选择「部署任务」
点击「新建任务」
填写基本信息：
- 任务名称：vue-deploy-to-ecs
- 部署类型：选择「主机部署」
点击「下一步」进入部署流程编排

6.3 编排部署步骤

步骤 1：配置部署来源

部署来源：选择「构建任务」
构建任务：选择上一步创建的 vue-build
构建产物：选择归档的 dist 包

步骤 2：选择主机组

在部署流程的「主机组」节点，选择刚才创建的 prod-ecs-group
部署策略：简单部署（单台服务器即可使用）

步骤 3：配置部署步骤

步骤 3.1：停止 Nginx（可选，视策略而定）

添加步骤：搜索「执行 shell 命令」
步骤名称：停止Nginx服务
执行命令：

sudo systemctl stop nginx

步骤 3.2：备份旧版本（推荐）

添加步骤：执行 shell 命令
步骤名称：备份旧版本
执行命令：

BACKUP_DIR="/data/www/backup/ $(date +%Y%m%d_%H%M%S)" mkdir -p$ BACKUP_DIR
if [ -d "/data/www/your-vue-project" ]; then
cp -r /data/www/your-vue-project/* $BACKUP_DIR/ echo "Backup completed:$ BACKUP_DIR"
fi

步骤 3.3：传输并解压构建产物

添加步骤：搜索「部署文件 」或「文件传输」
步骤名称：部署前端静态文件
源路径：构建产物中的 dist 目录
目标路径：/data/www/your-vue-project/
清理目标目录：是（部署前清空目标目录）

💡 文件传输说明

CodeArts Deploy 会自动将构建产物从软件发布库下载，然后通过部署代理传输到 ECS 目标路径。如果是 tar/zip 包，会自动解压。

步骤 3.4：设置文件权限

添加步骤：执行 shell 命令
步骤名称：设置文件权限
执行命令：

chown -R nginx:nginx /data/www/your-vue-project
chmod -R 755 /data/www/your-vue-project
find /data/www/your-vue-project -type f -exec chmod 644 {} ;

步骤 3.5：启动 Nginx

添加步骤：执行 shell 命令
步骤名称：启动Nginx服务
执行命令：

sudo systemctl start nginx

检查 Nginx 状态

sleep 2
if systemctl is-active --quiet nginx; then
echo "Nginx started successfully"
else
echo "Nginx failed to start"
exit 1
fi

步骤 3.6：健康检查（可选但推荐）

添加步骤：执行 shell 命令
步骤名称：健康检查
执行命令：

检查首页是否可访问

HTTP_CODE= $(curl -s -o /dev/null -w "%{http_code}" http://127.0.0.1/) if [ "$ HTTP_CODE" = "200" ]; then
echo "Health check passed: HTTP $HTTP_CODE" else echo "Health check failed: HTTP$ HTTP_CODE"
exit 1
fi

6.4 保存并测试部署

点击「保存并执行」
选择对应的构建版本（可选择最近一次成功的构建）
查看部署日志，确认所有步骤执行成功
访问服务器 IP 或域名，验证页面是否正常显示

七、配置流水线（串联构建与部署）

7.1 创建流水线

在 CodeArts 项目左侧导航栏，选择「持续交付 」→「流水线」
点击「新建流水线」
填写基本信息：
- 流水线名称：vue-ci-cd-pipeline
- 流水线源：选择「CodeArts Repo」，选择您的 Vue 仓库和分支
点击「下一步」选择模板

7.2 选择流水线模板

可选择「空白流水线」手动编排，或选择包含构建+部署的模板。推荐从空白开始，逐步添加阶段。

7.3 编排流水线阶段

阶段 1：构建阶段

点击「添加阶段 」，选择「构建」类型
阶段名称：构建阶段
在阶段内添加任务：
- 点击「添加任务」
- 任务类型：选择「构建」
- 构建任务：选择 vue-build

阶段 2：部署阶段

点击「添加阶段 」，选择「部署」类型
阶段名称：部署阶段
在阶段内添加任务：
- 点击「添加任务」
- 任务类型：选择「部署」
- 部署任务：选择 vue-deploy-to-ecs

代码源

→

构建阶段

vue-build

→

部署阶段

vue-deploy-to-ecs

7.4 配置阶段依赖关系

默认情况下，阶段按顺序串行执行（构建成功后才执行部署），这符合我们的需求。如需并行执行多个任务，可在同一阶段内添加多个任务。

7.5 保存并运行流水线

点击「保存并运行」
选择分支，点击「运行」
在流水线详情页查看各阶段执行状态
点击阶段或任务可查看详细执行日志

八、配置自动触发与通知

8.1 配置代码提交自动触发

进入流水线编辑页面
点击流水线源（第一个阶段左侧的「代码源」）
在「触发方式」中开启「代码提交触发」
配置触发规则：
- 触发分支：master（或 main，即生产分支）
- 触发事件：Push 事件
- 文件过滤（可选）：可配置只在特定文件变更时触发
保存流水线配置

✅ 自动触发效果

配置完成后，开发者向 master 分支推送代码时，会自动触发流水线执行：自动构建 → 自动部署到 ECS，全程无需人工干预。

8.2 配置定时触发（可选）

如果需要定时部署（如每天凌晨自动部署最新代码），可在流水线源中开启「定时触发」，设置 Cron 表达式。

复制代码

# 每天凌晨 2 点执行
0 0 2 * * ?

8.3 配置消息通知

进入流水线编辑页面
点击右上角「更多」→「通知设置」
添加通知规则：
- 通知方式：邮件 / 短信 / 钉钉 / 企业微信等
- 通知时机：
  - 流水线开始执行
  - 流水线执行成功
  - 流水线执行失败（推荐必开）
- 通知对象：项目成员或指定邮箱/手机号

九、验证与常见问题排查

9.1 完整流程验证

按照以下步骤验证整条流水线是否正常工作：

本地修改 Vue 项目代码（如修改首页文字）

提交并推送到 master 分支：

复制代码

git add .
git commit -m "test auto deploy"
git push origin master

登录 CodeArts 控制台，进入流水线页面，观察流水线是否自动触发
等待构建和部署阶段全部执行成功（绿灯）
浏览器访问服务器地址，确认页面已更新

9.2 常见问题排查

问题现象	可能原因	排查方法 / 解决方案
代码提交后流水线未触发	触发配置未开启 / 分支不匹配 / Webhook 失败	检查流水线触发配置；确认推送的是配置的分支；检查仓库 Webhook 设置
构建失败：npm install 报错	网络问题 / 依赖版本冲突 / Node 版本不匹配	切换 npm 镜像源；锁定依赖版本（package-lock.json）；确认构建镜像 Node 版本
构建成功但产物为空	dist 目录路径错误 / 构建命令执行失败但未报错	检查构建日志中 dist 目录是否生成；确认归档路径配置正确
主机显示离线状态	部署代理未启动 / 服务器网络不通 / 代理版本过旧	登录 ECS 检查代理进程：`ps aux
文件传输失败	目标目录无写入权限 / 磁盘空间不足	检查目标目录权限；检查磁盘空间：`df -h`
部署成功但页面 404	Nginx 配置错误 / 文件路径不对 / Vue Router history 模式未配置	检查 Nginx 配置的 root 路径；确认 try_files 配置；查看 Nginx 错误日志
页面显示旧内容	浏览器缓存 / 部署路径错误 / Nginx 未重启	强制刷新（Ctrl+F5）；检查部署目标路径是否正确；确认 Nginx 已重载
内网 ECS 无法连接部署服务	安全组限制 / 无公网出口 / DNS 解析失败	配置 NAT 网关或弹性公网 IP；检查安全组出方向规则；测试网络连通性

9.3 常用排查命令

复制代码

# 查看部署代理状态
ps aux | grep deploy-agent
systemctl status deploy-agent

# 查看 Nginx 状态和日志
systemctl status nginx
tail -f /var/log/nginx/error.log
tail -f /var/log/nginx/access.log

# 检查磁盘空间
df -h

# 检查目录权限
ls -la /data/www/your-vue-project/

# 测试本地访问
curl -I http://127.0.0.1/

# 测试外网连通性
curl -I https://www.huaweicloud.com/

参考资料

PHP中文网，使用华为云 CodeArts 实现代码自动化部署入门。CodeArts 核心组件（Repo/Build/Deploy）及 CI/CD 配置流程介绍。使用华为云 CodeArts 实现代码自动化部署入门-linux运维-PHP中文网
华为云PaaS服务小智，2分钟快速上手华为云流水线 CodeArts Pipeline的创建与运行。流水线创建、模板选择、运行操作指南。2分钟快速上手华为云流水线 CodeArts Pipeline的创建与运行_artscode pipieline-CSDN博客
华为云PaaS服务小智，开箱即用!教你如何正确使用华为云CodeArts Pipeline!。CodeArts Pipeline 服务概述与能力介绍。开箱即用！教你如何正确使用华为云CodeArts Pipeline！-CSDN博客

华为云 CodeArts Pipeline前端 Vue 项目自动打包发布配置指南

📑 目录

一、整体架构与流程概览

涉及的华为云服务

二、前期准备工作

2.1 华为云账号与权限

2.2 ECS 服务器要求

2.3 Vue 项目准备

三、ECS 服务器环境配置

3.1 安装并配置 Nginx

步骤 1：安装 Nginx

步骤 2：创建项目部署目录

步骤 3：配置 Nginx 站点

3.2 创建部署专用用户（推荐）

四、创建 CodeArts 项目与代码托管

4.1 创建项目

4.2 创建代码仓库

4.3 推送 Vue 项目代码

五、配置构建任务（Vue 打包）

5.1 创建构建任务

5.2 配置构建步骤

步骤 1：选择构建模板

步骤 2：配置构建环境

步骤 3：添加构建步骤

使用 npm

或使用 yarn（需项目已配置 yarn.lock）

yarn install --registry=https://registry.npmmirror.com

Vue CLI 项目

Vite 项目（命令相同，具体看 package.json 配置）

npm run build

5.3 保存并测试构建

六、配置部署任务（部署到 ECS）

6.1 配置主机组与部署代理

步骤 1：进入部署服务

步骤 2：创建主机组

步骤 3：添加主机并安装部署代理

6.2 创建部署任务

6.3 编排部署步骤

步骤 1：配置部署来源

步骤 2：选择主机组

步骤 3：配置部署步骤

检查 Nginx 状态

检查首页是否可访问

6.4 保存并测试部署

七、配置流水线（串联构建与部署）

7.1 创建流水线

7.2 选择流水线模板

7.3 编排流水线阶段

阶段 1：构建阶段

阶段 2：部署阶段

7.4 配置阶段依赖关系

7.5 保存并运行流水线

八、配置自动触发与通知

8.1 配置代码提交自动触发

8.2 配置定时触发（可选）

8.3 配置消息通知

九、验证与常见问题排查

9.1 完整流程验证

9.2 常见问题排查

9.3 常用排查命令

参考资料