自动部署前端

写在前面 在公司偶尔会同时维护三四个甚至五六个项目。稀烂的项目管理导致每次快速更新迭代时部署成了重复性超高且烦人的事情

部署流程

由于原先开发规范不够，git 使用不足，所以暂时一直拖着。现在对项目管理严抓想起来这件事情。 Javaer 一定见过下面这个 Jenkins 。这是个Java 编写的开源的持续集成工具 持续集成是啥意思，CI/CD 啥意思

解释：CI/CD或CICD通常指的是持续集成（英语：continuous integration）和持续交付（英语：continuous delivery）或持续部署（英语：continuous deployment）的组合实践 from wiki

这就能懂啦，我对前端不是很明白但是现在我们的开发流程一般是

1

前端同学开发完毕->build->发 dist 给管服务器的同学->（往往是我），我把 dist 放在对应的 nginx 目录下

如果他不发给我的情况。我就需要

1

git 拉取源码-> npm 更新依赖 -> build -> mv to nginx/html

那么这里很明显是可以通过 github/gitlab 的通知机制实现自动化部署的

Webhooks

凑巧找到一篇文章完美作为教程 【CI/CD】写给前端的自动化部署攻略序 ​ 对于前端开发而言，静态页面的部署是容易的。只需要将打包好的页面，放入已经配 - 掘金

简而言之，git 仓库会提供 webhooks 功能。就是如果你对仓库做了某些操作，git 将通过 http 向你提供的地址发送操作信息（json）

这里这位佬用的 gitlab 做的例子。我们自部署的也是 gitlab，太好了

这是新建 webhooks 的页面 我们暂时不用 release ，所以就以 tag push event 作为发布的信号

如果使用内网地址 还需要配置 gitlab 的 outbound setting 允许 local network

这里我是配置了这样的地址。

这位佬用的 Next.js 我就用 fastapi 实现这个服务了

这里就很简单了。描述了一下需求 vibe-coding 建立了这个服务

最后实验一下，可以看到记录

非常完美