CodeArts 流水线 + 云宝助手：把前端构建部署从半小时压到五分钟的心得

前言

最近把一个 Vue 前端项目的发布流程从手工搬上了华为云 CodeArts 流水线，顺手用成长中心的云宝助手查了几个配置细节。以前一次上线大概要半小时，现在提交代码后五分钟内就能完成构建加部署，顺手把做法和踩过的坑记下来。

以前手工发布的三点痛

一是环境不一致：本地 Node 版本和同事机器不一样，偶尔出现“在我机器上能跑”的构建失败；二是传错文件：手动上传 dist 到 OBS，手一抖就可能漏传或传到错桶；三是回滚靠运气：出问题只能重新打包上传，半夜尤其痛苦。

流水线四步搭起来

第一步，在 CodeArts 新建构建任务，选 Node.js 环境，执行 npm install 与 npm run build；第二步，把产物路径填为 dist，让构建产物归档进任务；第三步，新建部署任务，选 OBS 上传并开启静态网站托管；第四步，新建流水线，把构建任务和部署任务串起来，并给代码仓配上提交触发器，push 代码即自动跑流水线。

云宝助手帮了什么忙

配部署任务时，我在成长中心问了云宝助手：“CodeArts 流水线如何把前端部署到 OBS 静态网站托管？”它给出的关键步骤和我上面写的四步基本一致，还提醒了产物路径、桶权限与 CDN 刷新的注意事项。照着回答一次配通，少翻了三遍文档。对新手来说，先问助手再动手，比凭印象配要稳。

三个容易踩的坑

一是产物路径写错：构建任务里产物路径要填 dist，不要填成项目根目录；二是 Node 版本要和本地一致，否则依赖装不上；三是 OBS 桶要开静态网站托管并配好公开读权限，部署完记得刷新 CDN，否则用户看到的还是旧页面。

小结

流水线不是大团队的专利：一个 Vue 项目、两个任务、一条流水线，就能把“构建、上传、刷新”变成一次提交自动完成。省下来的时间，拿来写代码或者写这篇记录，都比手工传包值。