Webhook实现前端项目自动部署(Nuxt.js)
# 背景 “曾小满的盒子”第二版,采用了MVC三层架构,前端使用了PHP Laravel框架的blade作为模版渲染引擎。 在第三版中,网站采用了前后端分离的架构,后端仍然由PHP Laravel提供服务,前端考虑到SEO优化的问题选用了Nuxt.js(Vue SSR)作为界面框架。 之前使用PHP的模版引擎编写页面,只需替换服务器端有变动更新文件,php-fpm热重载后就能看到最新的页面内容。 而在前后端分离这种模式下部署项目就需要多一些步骤,多操作几次就发现这些步骤比较机械化,我们可以借助Webhook来进行项目自动部署。 # 部署分析 使用前端界面框架做UI开发,进行项目部署时,需要经历如下几个步骤: - Pull Commit - 拉取变动(从Git或Svn拉取最新的commit) - Stop Project - 停止(项目离线) - Install Denpendecies - 安装依赖(项目依赖如果有变动的话) - Build Project - 编译构建 - Run Project - 运行项目(项目上线) > 上面几个步骤是针对小型项目(如我的个人网站)所写,实际情况中技术栈不同步骤会有所差异。 同时,在工作环境中,一般会有专门的编译服务器承担编译构建的工作。 开发变动完成的最后一步通常是推送代码到Git/Svn,而部署的第一步是拉取Git/Svn中的变动。 Webhook就是介于这两个操作之间的一个“挂钩”,开发者提交完变动后,服务器便在“挂钩”的影响下自动开始部署流程。 > (来源于维基百科,关于Webhook的简介)在web开发过程中的webhook,是一种通过通常的callback,去增加或者改变web page或者web app行为的方法。这些callback可以由第三方用户和开发者维持当前,修改,管理,而这些使用者与网站或者应用的原始开发没有关联。webhook这个词是由Jeff Lindsay在2007年在计算机科学hook项目第一次提出的。 Webhook是一个概念,具体实现主要是通过对一个URL进行监听,具体怎么监听就可谓“八仙过海各显神通”了,监听到了变动后执行部署脚本进行项目部署。 变化的通知主要通过Githook来进行,项目进行Notify URL配置,以后每收到一次git push,git服务器就会去主动请求留下的Githook地址以达到通知的目的。 ![](http://sharemancdn.ochase.com/images/editor/2019/10/06/pq2JTn0klrg5X3mqmOTuWBpWbtzuSRPVZSD2pZjq.png) (上面这一部分本文不做探究) 对于我们而言,需要做的便是编写部署流程中的执行脚本,并进行测试,保证自动部署流程平滑进行。 # 部署脚本 部署脚本可以选择不同的编程语言调用系统API来编写,这里我选用Shell来编写。 关键步骤如下: ## 进入项目目录 ```shell cd $PROJECT_PATH echo "Into path $PWD" ``` ## 停止运行中的项目 ```shell sudo pm2 stop $PROJECT_NAME ``` ## 拉取项目代码变动 ```shell sudo git reset --hard origin/master sudo git pull sudo chown -R www:www $PROJECT_PATH ``` ## 安装依赖 ```shell yarn # or npm insatll ``` ## 运行项目 为了保证项目能够持久驻守系统,我选用了node项目管理器pm2来做项目运行支持。 不同情况下可以选择不同的工具。 ```shell sudo pm2 start $PROJECT_NAME ``` ## 运行日志 将上面步骤的代码进行控制台输出优化后就会变得人性化而易用,以下是我的项目部署后每次输出的日志: ```shell Deploy ShareManBoxNuxt ================================= Start time : 2019-10-06 00:34:18 ================================= [Centos] Enter work directory Into path /www/wwwroot/ShareManNuxt ================================= [Pm2] Stop running project [PM2] Applying action stopProcessId on app [shareman-box-v3](ids: 0) [PM2] [shareman-box-v3](0) ✓ ┌─────────────────┬────┬─────────┬──────┬─────┬─────────┬─────────┬────────┬─────┬────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├─────────────────┼────┼─────────┼──────┼─────┼─────────┼─────────┼────────┼─────┼────────┼──────┼──────────┤ │ shareman-box-v3 │ 0 │ 0.33.4 │ fork │ 0 │ stopped │ 0 │ 0 │ 0% │ 0 B │ root │ disabled │ └─────────────────┴────┴─────────┴──────┴─────┴─────────┴─────────┴────────┴─────┴────────┴──────┴──────────┘ Use `pm2 show ` to get more details about an app ================================= [Git] Pull new commit HEAD is now at f0e37f1 feat: update day item style Updating f0e37f1..9c72ee8 Fast-forward components/Pagination.vue | 2 +- components/Waterfall.vue | 4 +- components/item/blog.vue | 6 +- components/item/common.vue | 6 +- components/item/day-backup.vue | 4 +- components/item/day.vue | 18 +-- components/item/idea.vue | 4 +- components/item/mailbox.vue | 6 +- components/item/movie.vue | 6 +- components/item/plan.vue | 8 +- components/item/project.vue | 4 +- pages/day/_date.vue | 342 ++++++++++++++++++++++++++--------------- plugins/helper.js | 14 +- 13 files changed, 255 insertions(+), 169 deletions(-) ================================= [Yarn] Install dependencies yarn install v1.12.3 [1/4] Resolving packages... success Already up-to-date. Done in 0.80s. ================================= [Yarn] Build project yarn run v1.12.3 $ nuxt build ℹ Production build ✔ Builder initialized ✔ Nuxt files generated ℹ Compiling Client ✔ Client: Compiled successfully in 39.28s ℹ Compiling Server ✔ Server: Compiled successfully in 5.96s Done in 67.09s. ================================= [Pm2] Start project [PM2] Applying action restartProcessId on app [shareman-box-v3](ids: 0) [PM2] [shareman-box-v3](0) ✓ [PM2] Process successfully started ┌─────────────────┬────┬─────────┬──────┬───────┬────────┬─────────┬────────┬─────┬───────────┬──────┬──────────┐ │ App name │ id │ version │ mode │ pid │ status │ restart │ uptime │ cpu │ mem │ user │ watching │ ├─────────────────┼────┼─────────┼──────┼───────┼────────┼─────────┼────────┼─────┼───────────┼──────┼──────────┤ │ shareman-box-v3 │ 0 │ 0.33.4 │ fork │ 31713 │ online │ 0 │ 0s │ 0% │ 13.8 MB │ root │ disabled │ └─────────────────┴────┴─────────┴──────┴───────┴────────┴─────────┴────────┴─────┴───────────┴──────┴──────────┘ Use `pm2 show ` to get more details about an app ================================= [Webhook] Deploy completely ================================= End time : 2019-10-06 00:35:56 ```
评论 comment
暂无评论