背景
公司用github管理项目,而且这些项目(包括纯静态和node APP)大都是我们自己上服务器部署的.
场景:
我正在埋头写代码,突然,
-
pm过来说:
xxx
项目改个东西,很简单(例如换个图片,按钮,文案...) -
我: 哦,那就改呗,按要求先在本地,切到
test
分支改动后的上测试步骤:git add .
git commit -m fix(xxx): xxx
git fetch upstream test
git rebase upstream/test test
,合并conflict后git push upstream test
以上只是把
test
分支代码同步到github上,接下来,还要上服务器pull
代码,重启项目:ssh ubuntu@xxx
tmux a -t xxx
git checkout test
git log
git pull origin test
npm run build:test
现在成功上到测试了,看看效果,没问题就要上到生产了,步骤和上面差不多,先切到生产(我的是:
next
分支)上生产步骤:git fetch upstream next
git rebase upstream/next next
git merge test
,合并conflict后git push upstream next
以上只是把
next
分支代码同步到github上,接下来,还要上服务器pull代码,重启项目:ssh ubuntu@xxx
tmux a -t xxx
git checkout next
git log
git pull origin next
npm run build:next
终于完成领导交给的任务了,就为了一个小小的改动,用了这么多步骤,是不是很蛋疼,过了一会儿,pm又跑过来说还有一个地方要改....
以上经历是否有过呢?
确实太繁琐了,为了简化开发,js已经在工程化方面做的不错了,由前些年的grunt
,到glup
,又到现在的webpack
,以及rollup
,可以说是很成熟了,但是项目部署,可能很多前端小伙伴接触的还不多,可能只是打包出文件(dist
)甩给后端.
接下来我就讲讲如何简单的优化这些繁琐的步骤,不依靠ci
,仅仅借助webhooks
来简单的实现.
那么什么是webhooks?
- 简单的来说是一种回调,和异步编程中的"订阅-发布模式"很类似,一端触发事件,一端监听执行,webhooks是异步编程模型的一种实现,具体的可以看webhooks
流程
git push xxx
本地代码提交至远程github仓库- github仓库收到push后进行回调,发post(
Payload url
是来自webhooks的配置)请求 - 基于
Payload url
的服务根据传回来的信息进行提取,拉取最新代码并重新构建项目 - 可以看到,我们只需把代码提交到github仓库即可,不用再上服务器进行一些列的操作了
开始
-
搭建github-hook服务
-
目的是为webhooks提供payload url,并取得github 回调发来的信息,执行构建部署命令
-
选择:
a. copy我的github-hook,基于koa
b. 用这个自己写github-webhook-handler,基于node原生http服务的
c. 其他
-
介绍一下我的
github-hook
:目录:
. ├── README.md ├── config │ ├── data.example.js │ ├── data.js (配置项目的 dir/分支/启动命令) │ └── index.js (配置secret,与github的webhooks配置相同) ├── ecosystem.config.js (pm2启动配置文件) ├── package-lock.json ├── package.json └── src ├── controlers │ └── token.js (用于生成token,webhooks加密用) ├── index.js (启动文件) ├── jobs │ └── index.js (解析回调发来的信息,执行命令) └── routes └── index.js (路由,处理请求) 复制代码
-
-
在服务器启动
github-hook
服务- 登录服务器,进入工作目录(我的是
/var/nodejs
,可根据喜好自己改,别忘了改对应的config/data.js
文件的DIR
) git clone xxxgithub-hook.git
cd github-hook
npm i
npm run start
,用的是pm2,请先全局安装pm2curl ip:9002
,若有success字样,则成功- 注:本服务的端口是9002,若已占用,请自行更改
/index.js
,别忘记安全组开放端口
- 注:本服务的端口是9002,若已占用,请自行更改
- 登录服务器,进入工作目录(我的是
-
github配置webhooks
打开github,找到要配置的项目,进入setting-->webhooks-->新增一个:
- Payload URL: 输入上一步测试的api,即
http://ip:9002/payload/{reponame}
,我这里的reponame即github-hook
- Content type: 选择application/json
- Secret: 与上面
/config/index.js
中的appSecrcet
保持一致 - Which events would you like to trigger this webhook? 选择第一项 Just the push event 即可
- 配置完成,提交即可,配置后如下图:
- Payload URL: 输入上一步测试的api,即
-
测试
在本机更改
github-hook
代码,提交,然后打开刚刚的github页面看看下面是否有Recent Deliveries:
结语:
- 不需要登录服务器,
pull
代码,重启服务,直接在本地提交代码就可以重新构建部署是不是提高了效率? - 当然这只是简单的应用,想要更好地管理还是要靠
ci
系统,在版本回退,单元测试等方面更完善,也就是我下次要讲的,将项目放到docker
容器中 "用jenkins
打包构建部署项目".
== ps: ==刚开始写东西,以前没有这个习惯,还请多多提意见,谢谢~