前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >9102年了 还没学会前端自动化部署?

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

作者头像
Javanx
发布2019-10-14 15:06:27
1K0
发布2019-10-14 15:06:27
举报
文章被收录于专栏:web秀

前言

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

实现原理:

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

流程说明

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

一. 配置WebHook

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

这里以github为例

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

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

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

二. 配置服务器

配置环境

  1. 下载git, Node环境
  2. 创建一个Node项目, 最好保存到代码库中
  • 可以参考web-hook,这是一个服务端Node项目demo

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

参考web-hook

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

server.js

代码语言:javascript
复制
    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

代码语言:javascript
复制
    #!/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

自动部署效果图:

原文地址: https://juejin.im/post/5d9fee456fb9a04e3348c5ad?utm_source=gold_browser_extension#heading-0

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 流程说明
  • 一. 配置WebHook
  • 二. 配置服务器
    • 配置环境
      • 使用Node编写自动化部署脚本
        • 1. 创建server.js监听一个端口
        • 2. 编写sh文件
    相关产品与服务
    持续集成
    CODING 持续集成(CODING Continuous Integration,CODING-CI)全面兼容 Jenkins 的持续集成服务,支持 Java、Python、NodeJS 等所有主流语言,并且支持 Docker 镜像的构建。图形化编排,高配集群多 Job 并行构建全面提速您的构建任务。支持主流的 Git 代码仓库,包括 CODING 代码托管、GitHub、GitLab 等。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档