手摸手，带你实现代码自动部署

为什么要实现自动部署？

在2个月的时间里，一直都在忙着整理博客，每一个 程序员 都有一个博客梦（当然也不排除有些是没有的），我先后使用过各种博客系统:

• vuepress
• react-static
• jekyll
• hexo
  ...

这些都因为前前后后的原因，我没有采用，而是自己写了一个博客系统： vue-blog-generater 【请允许我再求一波star】点击这里查看说明文档

为什么呢？因为我需要一个自己对其高度熟悉的系统，这样有什么问题，我都知道问题出在哪，因为之前的这些系统，当然很好，但是无论是主题的编辑，还是代码的部署以及自定义，这些都不能满足我的要求。

话说回来，当我实现好了基础功能和页面之后，我开心了好一会儿，然后把一些还有意义的博文转移过来，这就涉及到了发布和部署。

我们都知道一个 vue-cli 生成的项目，通常打包的目录都是 dist ，那么我实际上需要挂载到服务器上的代码就是这个 dist 中的代码。

那按照常理，整个文章的更新流程应该是这样：

1. 新建文件，编写 markdown 博文
2. npm run build 编译到 dist
3. 将 dist 的文件上传到对应的代码仓库 dist
4. 将当前生成器的文件同步上传到对应代码仓库 main
5. 登录服务器， git clone dist仓库 到指定的位置

看到了吧，只是更新一篇文章，却需要这么多步骤，是不是觉得很麻烦呢？麻烦就对了，在这里我们就是来解决这个麻烦的。

如何做？

我明白了为什么要做自动部署，但是我从哪下手呢？

做一件事情之前，我们要理清楚思路，有哪些步骤呢？其实非常简单：

1. 新建文件，编写 markdown 博文【这一步是跑不掉的】
2. npm run build 编译到 dist ,执行 build.js 中判断 config.js 中是否配置了 dist 的远程仓库地址。
   如果配置了就对当前项目的 dist 目录，进行 git 初始化，同时将整体代码上传到 Main仓库 这里默认不配置， Main 仓库相当于本地仓库关联的远程仓库
3. 给本地 dist 目录关联远程仓库，并把代码推送到指定的 dist 对应的远程仓库中。
4. 服务器进行配置，当接受到托管平台发送的 POST 请求时，做出对应的响应：拉取远程 dist 仓库的 master 分支并且强制覆盖本地的 master 分支

具体实现？

我们先来看看在第2，3个所说的内容怎么实现。

• 准备工作：安装需要的库

  shell 帮助我们在nodejs中执行命令 chalk 丰富打印信息

//安装shell
yarn add shell --save
yarn add chalk --save
复制代码

• 我们在 build.js 中设计一个函数 autoUpdate ，来帮助我们提交 main 仓库和我们的 dist 仓库的更新，我们先实现更新 main 仓库： 请注意：这里需要使用await确保代码的执行顺序

const config = require('../config')
const shell = require('shelljs')

async function autoUpdate() {
  console.log(chalk.cyan(
    `Start to upload whole project to coding.net`
  ))
  if (!shell.which('git')) {
    //向命令行打印git命令不可用的提示信息
    shell.echo('Sorry, this script requires git');
    //退出当前进程
    shell.exit(1);
  }
  // 推送当前目录[main 目录]的代码
  await shell.exec('git add .')
  await shell.exec(`git commit -m '${config.commitMessage}'`).code
  await shell.exec('git push origin master -f');
  console.log(chalk.green(
    `main dir-> succeed`
  ))
}
复制代码

• 在 @/config/index.js 中配置 dist远程仓库 相关的属性的值

module.exports = {
   ...
   distOriginSSh: 'git@github.com:xxx/xxx-blog-xxx.git',
   ...
}
复制代码

• 在 autoUpdate 中添加提交 dist 仓库的更新的代码： 请注意：这里需要使用await确保代码的执行顺序

//进入到dist目录下
  await shell.cd('dist');
  //执行 git init
  await shell.exec(config.initLocal)
  //删除本地的dist已经对应的远程仓库
  await shell.exec(config.deleteRemote)
  //添加目标远程仓库到dist
  await shell.exec(`git remote add origin '${config.distOriginSSh}'`)
  //提交
  await shell.exec('git add .')
  let code = await shell.exec(`git commit -m '${config.commitMessage}'`).code
  if (code !== 0) {
    await shell.echo('Error: Git commit failed');
    await shell.exit(code);
  } else {
    await shell.exec('git push origin master -f');
    //chalk 这个库是为了丰富打印信息的
    console.log(chalk.green(
      `dist-> succeed`
    ))
  }
复制代码

实现了本地上传到远程仓库，那么接下来我们需要去做几件事，来实现步骤4：

这里默认你已经在服务器上完成了对dist代码的部署

1. 在自己的服务器上启动一个服务，监听 POST 的请求，如果确定这个请求是通知我们需要更新服务器上对应 dist 目录对应的源码的话，执行对应的 git 命令来更新。
2. 配置远程仓库的 hooks ,在监听到我们的 push 请求时，就会自动 POST 一个请求到我们配置的 hooks 对应的地址中。这个地址也就是我们在服务器上启动的服务地址。

Okay，知道了要做什么，那我们就开始吧。首先在服务器上启动一个 node server ,我们新建一个 server.js ,并且进入到编辑状态

touch server.js
//如果你安装了vim
vim server.js
//如果没有安装vim,可以用vi
vi server.js
//进入文件后，我们可以按a健进入 insert状态
复制代码

可以参考我的 server.js 进行配置 请注意，需要你自己配置端口和路径，我已经去除了我自己的配置

var http = require('http')
  , exec = require('exec')

// 配制你的端口号
const PORT = XXX
  , PATH = './xxx'
//PATH:你的dist目录的路径，相对于server.js所在的目录而言。
var deployServer = http.createServer(function(request, response) {
  if (request.url.search(/deploy\/?$/i) > 0) {

    var commands = [
      'cd ' + PATH,
      'git fetch --all',
      'git reset --hard origin/master',
      'git pull'
    ].join(' && ')

    exec(commands, function(err, out, code) {
      if (err instanceof Error) {
        response.writeHead(500)
        response.end('Server Internal Error.')
        throw err
      }
      process.stderr.write(err)
      process.stdout.write(out)
      response.writeHead(200)
      response.end('Deploy Done.')

    })

  } else {

    response.writeHead(404)
复制代码

编辑完成后，然后我们先按下 esc 然后输入 :wq! 保存文件。然后 node server.js 启动一个服务。但是你又会发现， node server.js 这样启动的服务会在一段时间后自动停止，所以我们需要来用一个守护进程的 工具 来守护我们的服务，推荐大家使用 forever

#安装
npm install forever -g
#启动
forever server.js
复制代码

还没有结束，我们还需要在 nginx 配置文件中设置一个代理，将对应子域名代理到我们刚刚配置的端口上。这样做的原因是因为我只有一个域名···

你可能会问什么是子域名，比如我有一个一级域名 dendoink.com 那么我可以在解析的时候多添加一条新记录 xxx.dendoink.com ，这个就是子域名，他同样可以访问到我们域名对应的服务器。

如果你使用的也是nginx来管理服务，那可以参考我下面的配置

server {
    listen       80;
    # 配置你的子域名
    server_name  xxx.你的域名.com;

    #charset koi8-r;
    access_log  /var/log/nginx/githook.dendoink.com.access.log  main;
    
    # 这里是重点
    location / {
        proxy_pass http://127.0.0.1:1024;
    }
    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    # proxy the PHP scripts to Apache listening on 127.0.0.1:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http://127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0.0.1:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root
    # concurs with nginx's one
    #
    #location ~ /\.ht {
    #    deny  all;
    #}
}
复制代码

这样配置好以后我们就可以通过外部访问到我们定义好的服务啦。只需要把这个地址加入到对应的githook的配置中【具体的hook配置参考你的托管平台教程】。

是不是很简单呢？有任何问题可以掘金和我联系，或者邮件dendise7en@gmail.com

另外求一波关注和star -> 看这里，最美博客系统~

另外求一波关注和star -> 看这里，最美博客系统~

另外求一波关注和star -> 看这里，最美博客系统~

特别声明：题图来源unsplash