9102年了 还没学会前端自动化部署?

2019-09-03 admin

前言

  • 最早期方式: 前端写好代码之后本地构建, 通过服务器xftpftp把文件上传到服务器进行更新
  • 使用Git后: 服务器通过git clone的项目, 在项目的根目录执行 git pull origin [branch] 拉去仓库中最新的代码
  • 自动化部署: 通过配置WebHook及服务器后: 项目打包完成提交到代码库中, 服务器自动拉去git仓库中最新的代码

底层实现原理:

  • 在github配置webhook的地方填写服务端的url, 每次push代码到github上, github都会向webhook中的url发送一条请求
  • 服务端接收到请求后, 经过验证后执行本地的bash脚本, 脚本中编写从github拉去代码的命令。
  • 使用环境: Centos7.*, Node, Git
  • 代码库平台: Gitee / Github
  • Tips: 不同的操作环境可以进行不同的配置, 都可以实现

流程说明

  • 一. 配置github项目中的WebHook
  • 二. 配置服务器, 增加Node项目, 运行项目

一. 配置WebHook

1.1 进入到代码库配置webhook界面

这里以github为例

登录github -> 进入到repository中 -> 找到设置 -> 进入webhook

clipboard.png

  • 这是已经配置好的webhook
  • 点击新增webhook

clipboard.png

  • 现在github中的webhook已经配置成功了, 接下来配置服务器

二. 配置服务器

配置环境

  1. 下载git, Node环境
  2. 创建一个Node项目, 最好保存到代码库中

使用Node编写自动化部署脚本

参考web-hook

1. 创建server.js监听一个端口

server.js

const http = require('http') // http模块
const { spawn } = require('child_process') // 子进程, 用来执行脚本
const { PORT, SECRET } = require('./src/config') // 配置文件
const { sign } = require('./src/utils') // 工具文件
const { resultString } = require('./src/resModel') // 服务端返回JSON

const server = http.createServer((req, res) => {
  // 打印进来的请求
  console.log(`--- ${req.method} --- ${req.url} ---`)
  // 设置header为json格式
  res.setHeader('Content-Type', 'application/json')

  if (req.method === 'POST' && req.url === '/webhook') {
    // post /webhook 都为github发来的请求
    console.log('--- 命中webhook ---')
    // 获取body
    let buffers = []
    req.on('data', buffer => {
      buffers.push(buffer)
    })
    req.on('end', () => {
      let body = Buffer.concat(buffers)
      // 获取header中event的字段, github 为push, gitee为 Push Hook
      let event = req.headers['x-github-event'] || req.headers['x-gitee-event']
      console.log(`--- Event 名字: ${event}  ---`)
      if (req.headers['user-agent'] === 'git-oschina-hook') {
        // gitee
        console.log('--- Gitee 平台 ---')
        // SECRET是在config.js中配置了
        if (req.headers['x-gitee-token'] === SECRET) {
          if (event === 'Push Hook') {
            console.log('--- push 任务命中 ---')
            let payload = JSON.parse(body)
            console.log(
              `--- 任务名称: ${payload.repository.name}, 路径: ${payload.repository.path} ---`
            )
            // 开启子进程执行对应的脚本
            // payload.repository.path 是gitee/github传来的repo的路径
            // 通过path的值执行sh目录下对应的脚本
            // 比如项目名字叫web_hook path的值就是web_hook
            // 执行的脚本就是./sh/web_hook.sh
            let child = spawn('sh', [`./sh/${payload.repository.path}.sh`])
            // 接收子进程传来的数据
            let buffers = []
            child.stdout.on('data', buffer => {
              console.log(`--- 接受data ${buffer.toString()} ---`)
              buffers.push(buffer)
            })
            child.stdout.on('end', () => {
              let log = Buffer.concat(buffers)
              console.log(log.toString())
              console.log('自动化拉取完毕')
            })
          }
          // 返回的json, 配置在./src/resModel中
          res.end(resultString('success', 0))
        } else {
          // 其他的请求返回不允许
          return res.end(resultString('Not Allowed', 1))
        }
      } else {
        // github
        // 基本和上面的gitee一样, 多一个校验身份的步骤
        console.log('--- Github 平台 ---')
        let signature = req.headers['x-hub-signature']
        // sign 方法配置在utils.js中
        if (signature !== sign(body, SECRET)) {
          return res.end(resultString('Not Allowed', 1))
        }
        if (event === 'push') {
          console.log('--- push 任务命中 ---')
          let payload = JSON.parse(body)
          console.log(payload.repository.name)
          let child = spawn('sh', [`./sh/${payload.repository.name}.sh`])
          let buffers = []
          child.stdout.on('data', buffer => {
            buffers.push(buffer)
          })
          child.stdout.on('end', () => {
            let log = Buffer.concat(buffers)
            console.log(log.toString())
            console.log('自动化拉取完毕')
          })
        }
        res.end(resultString('success', 0))
      }
    })
  }
  res.end(resultString('Not Found', 1))
})

// 监听端口, PORT配置在config.js中
server.listen(PORT, () => {
  console.log(`web-hook listen on http://localhost:${PORT}`)
})

Tips: 接收github发送来的post参数: Webhooks | GitHub Developer Guide

建议看gitee平台的说明(中文的, 参数差不多) Gitee

2. 编写sh文件

./sh/*.sh

#!/bin/bash
WORK_PATH="/home/wwwroot/tools/vue-back"
echo "------ 进入项目目录 ------"
cd $WORK_PATH
echo "------ 已进项目目录 ------"
echo "------ 开始清理代码 防止冲突 ------"
git reset --hard origin/master
git clean -f
echo "------ 清理代码完毕 ------"
echo "------ 拉取master分支代码 ------"
git pull origin master
echo "------ vue-back 持续集成完毕 ------"
  1. 部署到服务器
  • 把写好的这个Node项目部署到服务器
  • 阿里云服务器需要手动配置开放的自定义端口号
  • Node项目建议使用pm2

自动部署效果图:

clipboard.png

[转载]原文链接:https://segmentfault.com/a/1190000020275102

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-74238.html

文章标题:9102年了 还没学会前端自动化部署?

相关文章
好消息!好消息!饿了么ElementUI用户的福音——ElementUIVerify!
如果你受够了饿了么ElementUI原生的校验方式,那就来试试它吧! 前言 饿了么ElementUI虽好,但表单校验的体验不够理想 如果说产品开发要讲究用户体验,那插件开发也要讲究开发体验,而好的开发体验,要靠好的api设计来保障 本人专注...
2017-12-24
前端MV*框架的意义
经常有人质疑,在前端搞MV有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的,有什么必要再引入这种框架? 回答这些问题之...
2016-03-11
前端问答社区成立了
由雷锋网友提供的给大家相互交流的前端问答社区正式上线了,欢迎大家来此相互交流相互学习 ...
2016-03-30
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
HTML5渐行渐近 APP还能走多远
鎽樿?侊细浠讳綍浜嬬墿閮界洓鏋佽€岃“锛孉PP涔熶笉渚嫔?栥€傚湪鍙栧缑杈夌厡鎴愮哗镄勫悓镞讹紝APP涔熷悓镙烽溃涓寸潃璇稿?氶毦浠ラ€捐秺镄勯殰纰嶃€? 鍦ㄧ粡铡嗕简闀胯揪8骞寸殑闀胯窇鍚庯紝HTML5瑙勮寖缁堜簬鐡灭啛钂傝惤銆佹?e纺瀹...
2015-11-12
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
回到顶部