「前端 CI/CD 系列」第三篇：如何用建木 CI 构建前端项目并部署到 CDN

作者：Jianmu

2022 年 3 月 08 日
本文字数：3380 字
阅读完需：约 11 分钟

在上一篇如何用建木CI更新七牛云CDN证书文章里，我们已经成功将七牛云上的资源外链放在了指定域名下，并且将外链的协议升级成了 https。这次我们再利用建木 CI 干点更有意义的事吧。

对前端开发的小伙伴来说，写完一个项目，最大的价值体现是将自己的劳动成果发布到线上去，让更多的人了解使用。那么这里必定会涉及到的一个步骤便是项目的打包部署，但对于一些刚入行的小伙伴来说，相关的服务器知识，比如 linux 跟 nginx，可能会相对陌生；如果此时团队中又没有经验丰富的人带着去完成，只会更加捉襟见肘。但好消息是现在有了咱们的建木 CI，搭配上节点库已有的节点，就可以轻松实现前端项目的部署上线需求，这样前端开发人员就可以更加专注地在自己擅长的领域继续干活了。

准备工作

标题讲到利用建木 CI 构建部署前端项目到 CDN，所以我们需要先准备一个前端项目。本文将使用最近前端圈较火的 vite 来生成一套 vue3+ts 的代码。

vite 官网：https://vitejs.cn/

打开编辑器，终端输入。（npm init vite@last my-vue-app --template vue-ts）

yarn create vite my-vue-app--template vue-ts// ornpm init vite@last my-vue-app --template vue-ts # 习惯npm的小伙伴参考npm的命令即可

复制代码

终端输入 cd my-vue-app 进入项目根路径，执行下面命令接着为项目安装依赖。

yarn // or npm install

复制代码

让项目跑起来看看效果吧！执行下面命令(具体 script 指令，详见项目下的 package.json)

yarn dev

复制代码

浏览器输入 http://localhost:3000 看见下面的页面说明一个简洁的 vue3 项目已经搭建好了。

接下来还需要将代码放在 gitee 的仓库中，因为稍后建木 CI 会用到它。默认用 vite 创建的项目是没有进行 git 初始化的，所以回到终端输入

git init

复制代码

把项目交给 git 管理。

这里以在 gitee 上创建仓库为例，新建一个名为 my-vue-app 的仓库。

回到终端输入

git remote add origin https://gitee.com/[gitee空间名]/my-vue-app.git

复制代码

将本地提交代码 push 推送代码到 gitee 仓库，接下来只需要将下面的 dsl 流程拷贝至建木 CI 中等待流程跑通。新创建的 my-vue-app 仓库中的前端代码将会被自动 clone 下来，并且将 build 后生成的 dist 文件夹中的所有静态前端资源同步到之前七牛云上的 comyan 存储空间中。

name: Test前端CDN CI/CDdescription: Test前端CDN CI/CDpipeline:  git_clone:    type: git_clone:1.2.1    param:      # git地址      remote_url: https://gitee.com/comyan/my-vue-app.git      # 标签、分支或pr/mr      ref: refs/heads/master      # 用户名      username: ((gitee.comyan_username))      # 密码      password: ((gitee.comyan_password))  node_build:    type: nodejs_build:1.2.1-14.16.1    param:      # 工作目录      workspace: ${git_clone.git_path}      # 指定的npm仓库地址      registry_url: https://registry.npm.taobao.org  qiniu_upload:    type: qiniu:1.0.1-file-upload    param:      # 存储空间名      qiniu_bucket: comyan      # 七牛云的AK      qiniu_ak: ((qiniu_authorization.qiniu_access_key))      # 七牛云的SK      qiniu_sk: ((qiniu_authorization.qiniu_secret_key))      # 七牛zone  不设置时，自动识别，华东：z0；华北：z1；华南：z2；北美：na0；东南亚：as0      qiniu_zone: z1      # 上传后的uri前缀      qiniu_upload_uri_prefix: ""      # 要上传的目录      qiniu_upload_dir: ${git_clone.git_path}/dist

复制代码

如预期整个流程执行成功了，回到七牛云上看看想要的资源链接是不是都已经生成好了？

不错 index.html 在这儿了，那现在直接复制 index.html 的外链能不能看到页面呢？

页面可以成功访问，那不就意味着项目部署发布成功了吗？这种方式实现前端部署上线也太简单了吧，那岂不是又可以愉快的摸🐟了。

但是此时你们的老大突然发来一条消息说自带的这个 logo 太丑了想换成一个 react 的 logo。此时此刻你心中可能一万只沃泥🐎在奔腾，但是没办法只有改呗。还好建木 CI 已经有了一套流程示例，logo 更改替换一下也是很快的。

嗯，确实不错这 react 的 logo 像大饼一样又大又圆。确定改完了又接着在建木 CI 上重新执行了刚才的流程。

流程执行成功，于是你高兴的去跟老大交代 logo 已经替换成功。

老板：”what？你改了个啥，你瞎还是我🦐，明天不想来了是吧？”

哎这是怎么肥事，流程不是跑成功了吗，建木 CI 难道这次没给我替换文件？算了还是打开网页的源代码看看究竟是怎么回事。

注意事项

其实在本地我们已经将 logo.png 替换掉了，但是通过查看网页源代码发现 index.html 中的图片的 src 还是用的同一个 cdn 外链。这样也会造成一个在使用 cdn 时经常遇到的问题—缓存机制导致文件不能及时更新。但是 cdn 缓存问题又是不可避免的,因为正是有了 cdn 缓存才让我们在网页访问时加载资源更加迅速。那应该怎样去解决刚才这个问题呢？这里也是本篇文章要重点说明的地方。指定文件资源 uri 前缀和前端项目打包时指定文件资源的基础路径，这里以 vite 前端打包工具为例，在项目中在找到并修改 vite.config.js。

import {defineConfig, UserConfig} from 'vite'import vue from '@vitejs/plugin-vue'import { name, version } from './package.json';// https://vitejs.dev/config/export default defineConfig(({command,mode})=>{  return {    plugins: [vue()],    // base public path    base:      command === 'build' && mode === 'cdn'        ? `/${name}/${version}/`        : '/',  }})

复制代码

对上面的参数稍做一些解释，base 参数会让 vite 在为项目打包时生成的 index.html 中所有的链接加上你指定的路径前缀。当在终端执行了 yarn build –mode cdn 命令后，打包后的 index.html 文件中的资源路径前缀，都会拼接上 package.json 中的 name 和 version 键的值。这样为后面在七牛云上同步生成的资源链接相对应。后续在前端项目中的每一次改动后，只需要在 package.json 中升级一下版本。这里示例将 package.json 中的 versio 升级为 1.0.1，重新提交 commit，推送到 gitee 的 my-vue-app 仓库。这样重新用建木 CI 进行部署打包之后，七牛云上都会根据 version 的不同，从而将每一次更改后的文件资源放在不同 version 号的文件夹下。这也很好的规避了因 cdn 缓存造成更新失效的问题。除此之外，还需要对 dsl 做细微的调整。复制升级版的 DSL 跑个流程看看效果吧！

name: Test前端CDN CI/CDdescription: Test前端CDN CI/CDpipeline:  git_clone:    type: git_clone:1.2.1    param:      # git地址      remote_url: https://gitee.com/comyan/my-vue-app.git      # 标签、分支或pr/mr      ref: refs/heads/master      # 用户名      username: ((gitee.comyan_username))      # 密码      password: ((gitee.comyan_password))  node_build:    type: nodejs_build:1.2.1-14.16.1    param:      # 工作目录      workspace: ${git_clone.git_path}      # 指定的npm仓库地址      registry_url: https://registry.npm.taobao.org      # 构建参数      build_arg: --mode cdn  qiniu_upload:    type: qiniu:1.0.1-file-upload    param:      # 存储空间名      qiniu_bucket: comyan      # 七牛云的AK      qiniu_ak: ((qiniu_authorization.qiniu_access_key))      # 七牛云的SK      qiniu_sk: ((qiniu_authorization.qiniu_secret_key))      # 七牛zone  不设置时，自动识别，华东：z0；华北：z1；华南：z2；北美：na0；东南亚：as0      qiniu_zone: z1      # 上传后的uri前缀，这里自定的uri前缀跟vite.config.js中指定基础路径一致      qiniu_upload_uri_prefix: ${node_build.package_name}/${node_build.package_version}      # 要上传的目录      qiniu_upload_dir: ${git_clone.git_path}/dist