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

在上一篇如何用建木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
// or
npm 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项目已经搭建好了。