玩一玩阿里云 CodePipeline 镜像打包神器

先说说为什么我要玩这个东西

如果有听过前端预渲染这个玩意，并且恰好你也用 Vue 在开发 SPA，那么 prerender-spa-plugin 这个包你就不陌生了，这是实现预渲染的必备利器，后面我也会有文章专门分享预渲染的心得

也正是因为引入了这个预渲染的包，副作用也一起引入了，主要有几个问题：

预渲染原理是在打包阶段调用浏览器捕捉页面并生成 HTML，因此依赖于 Puppeteer 的 Chromium 内核，如果是 Docker 打包，这会增加镜像的体积
在大陆环境，Chromium 的获取也是心累，经常要受限网路原因下载失败，加上这个项目部署在海外服务器，每次发布要在海外仓库推拉镜像，推拉的时间有时我都能喝两杯咖啡。

因此为了提高发布效率，我也开始找寻解决方案

一开始我是想到直接找公司运维同学的，跟他们要一个 Jenkins 之类的远程打包机器，但由于我的项目规模太小，暂时也不值得去麻烦他们

第三方或者开源的持续集成 CI/CD 服务其实很多了，像腾讯云/阿里云/GitHub 都有自己的服务，免费/收费都有，最终我挑选了阿里云的 CodePipeline，原因比较简单：

这里我配置了两个项目，后面我拿一个配置来介绍

点进第一个项目可以看到历史构建的记录和日志

这里构建节点有国内/海外可选，据我观察海外节点是在香港，速度可观，正好满足。源码管理也支持了常见的仓库，这里我选择 Gitee 并绑定好项目地址和分支

这里就可以用钩子来触发 CodePipeline 自动构建，例如 push 到 master 分支就触发构建，Github/Gitee 都有官方支持的配置，这里我暂不需要就没配

由于支持多步骤构建，这里我也分了两步，第一步构建基础镜像，也就是上面包含 Chromium 内核及 node_modules 的镜像，也是因为这个镜像会比较大，又不需要每次都重新构建，单独打包利用缓存对最终打包提速效果非常大

第二步才是真正的业务代码构建，就是熟悉的 npm run build

构建步骤同样可以设置触发器，例如触发钩子去执行发布脚本等，至于以上涉及的基础/业务 Dockerfile 的内容，我会放在后面的文章一起分享

这里可以设置邮件/钉钉通知构建结果，当然我也是不需要的，毕竟我都是喝着咖啡看着构建进度条