为自己的项目添加自动部署

为自己的项目添加自动部署

做了一个简单ppt大家可以参照这个看一下 地址：自动部署

前言

有没有前端小伙伴们像我一样，自己开发了一个的项目想让大家都能看到，然后去弄域名、弄服务器, 当进入到服务器的时候又需要在每次项目变更的的时候手动进入到服务器的项目目录中进行手动更新打包。如果稍有不慎就需要从新弄一遍，费时费力。

作为一名前端的小学渣，努力的想用前端的知识就能解决这个问题， 这也就是这篇文章的目的。

目的

当我们更新项目代码后，希望服务器中的项目进行自动更新并且自动部署

技术储备

• git
• node.js

实现思路

我比较喜欢分享解决问题的思路，我解决一个问题可以利用多种技术手段，更为重要的是你解决问题的思路。

分解问题

如果让服务器上的项目自动更新部署，主要就是两个问题：

1. 我怎么能知道什么时候代码更新了
2. 知道了更新我应该怎么做
复制代码

解决问题

1. 我怎么能知道什么时候代码更新了

服务器要知道项目的代码什么时候跟新了，也就是说我们没每次更新代码都需要告诉服务器一声。

既然这样，我们可以在服务器上开启一个专门用来接收更新信息的服务。

每次我们为更改项目的时候只需要告诉这个服务我们的项目更新了，这样服务器就能获取到信息进而去思考下一个问题。

2. 知道了更新我应该怎么做

这问题就相对简单，既然知道了什么时候， 只需要让服务器把项目更新一下并且在把项目在打包部署到制定的文件夹就好了。

用技术实现

项目地址 GitHub

开启一个专门用来接收更新信息的服务

利用koa来开启一个监听服务，当收到项目更新通知的时候进行后续操作

/* app.js */
const Koa = require('koa')
const app = new Koa()
const router = require('./server/index.js') // 设置一个监听路由
app.use(router.routes())
app.listen(3000) // 开启一个3000端口的服务

console.log('server ok!')
复制代码

设置一个路由监听（主要用来设置路由）

/* ./server/index.js */
const router = require('koa-router')()
router.post('/deploy/:projectName', async ctx => {
  // projectName 是代表项目的文件名称
  // 进行后续部署操作
})

module.exports = router
复制代码

告诉这个服务我们的项目更新

这里我们利用git来为项目进行版本控制，以GitHub为例，在git中每个项目都会有一个webhooks，为想要自动部署的项目设置webhooks

设置的地址就是你服务器的地址, 这里设置比较简单就是设置对应服务器的域名地址就行。 后面端口和路由设置成我们的端口和路由，例如：http://xxx.xxx.xx:3000/deploy/test ,这里最后的test就是我们要设置自动部署的项目名。

设置玩这些，每次我们每次在本地编写完代码，然后push到master分支的时候GitHub就会帮我们向设置的http://xxx.xxx.xx:3000/deploy/test发送一个post请求（如果不想只有在push到master的时候发送可以自行设置），里面会带很多提交信息，如果有需要可以自行测试差看一下。

把项目打包部署

在前端项目中多数打包都是利用webpack来完成的，而部署也是提前设置输出路径并利用nginx根据域名代理到不同的文件路径。

所以我们可以在本地项目中的package.json中的script中添加一句脚本把只想该项目如果上线应该执行的操作。例如：

"scripts": {
    "build": "xxxx",
    "test": "xxx",
    "deploy": "npm run test && npm run build"
  },
复制代码

这样我们只需要在服务器收到更新通知的时候先运行git pull然后再执行npm run deploy,这样就完成了我们的自动部署。

这样我们可以修改一下我们的路由设置以及做一下简单的排查

const router = require('koa-router')()
const path = require('path')
const exists = require('fs').existsSync // node中fs模块的查看子目录是否存在的方法
const { atten, log, success, fatal } = require('../utils/logger.js')  // 自定义的log提示信息
const exec = require('util').promisify(require('child_process').exec)  // node中执行终端命令方法
const ora = require('ora') // 加载loadding动画
router.post('/deploy/:projectName', async ctx => {
  atten()
  if (!ctx.header['user-agent'].includes('GitHub-Hookshot')) {
    fatal('请求来源未知：\n     %s', ctx.header['user-agent'])
    return (ctx.status = 401)
  }
  const dirHome = path.join(__dirname, `../../${ctx.params.projectName}`)
  const shellOperation = `git pull && yarn && yarn deploy`   // 获取通知的时候执行终端命令
  const spinner = ora('work').start()

  ctx.body = (await exists(dirHome)) ? '请求部署成功请稍后' : '确认项目是否存在'
  exec(shellOperation, { cwd: dirHome, shell: '/bin/zsh' })
    .then(res => {
      spinner.succeed()  // 成功图标提示
      success(` success : ${ctx.params.projectName} 部署成功  `)
    })
    .catch(err => {
      spinner.fail()   // 失败图标提示
      fatal(` error : ${ctx.params.projectName} 部署失败  `)
      log(`检查 ${dirHome} 文件`)
      log(`检查  ${shellOperation} 命令`)
      fatal(err)
    })
})

module.exports = router

复制代码

运行起来

我的服务器是操作系统是linux，最开始什么都不懂，连怎么把项目弄到服务器上都不会，好在网上有很多的爬坑教程。这里我是在我的服务器上安卓node，和git。手动将我的项目利用git clone 到服务器上，然后将这个自动部署项目添加到服务器上，每次只需要在本地改完，合并master然后在push到远程上就可以实现自动部署。

设置为完webhooks,将项目放到自己的项目同级目录运行起来npm run start，同样可以实现自动部署功能。

webhooks设置成功

服务器部署成功

小结

这篇文章只是自己理解的自动部署，内容所包含的方面可能见解并不准确，欢迎指出，天下开源是一家，如果感兴趣可以给个star ?。项目地址: deploy_web