github-webhook+docker实现项目可持续自动化部署

使用nginx+pm2+github-webhook+docker实现项目自动部署

注：docker也能实现pm2的守护进程功能（持续启动项目），所以使用了docker就不需要使用pm2了

但是需要注意的是使用node启动的webhook服务器不能使用docker，因为在webhook内部的sh脚本执行时需要到服务器的前后端项目文件中去执行，如果对webhook使用了docker，那么webhook所在的docker内不会存在前后端项目文件，所以webhook项目只能自己手动去服务器拉取启动，所以webhook项目使用pm2来管理

补充：

github-action+docker实现自动部署和github-webhook+docker实现自动部署原理一样，但是实现步骤有区别：

github-action+docker实现自动部署的详细流程可以看我这篇文章：github-action+docker实现项目自动部署

（1）action是在github中的项目创建workflow工作流（yml脚本文件），yml脚本文件主要执行：

1、对仓库项目进行依赖下载及打包

2、根据项目创建的dockerfile文件生成docker镜像并将镜像push提交到腾讯云镜像仓库中

3、ssh登录腾讯云服务器pull提交的docker镜像并启动

上面的步骤执行完后push提交仓库代码会自动触发yml脚本文件完成自动部署

需要执行的包括创建yml脚本文件、dockerfile文件以及在github配置secret

（2）webhook是在github创建钩子，然后自己配置webhook服务器用于接收提交仓库代码的行为，然后在webhook服务器项目中新建.sh脚本文件用于触发webhook后对应在服务器中执行操作，包括下载项目依赖、打包项目，然后通过项目的dockerfile文件生成docker镜像并启动

webhook执行流程为push仓库代码后触发webhook钩子绑定的webhook服务器地址，执行自己定义的webhook服务器代码，然后根据代码会执行项目对应的sh脚本文件，会在服务器中下载项目依赖、打包项目、根据dockerfile创建docker镜像并启动

总结：action和webhook的原理一样，但是action更简便，不需要自己定义webhook服务器，而且还有一个不同在于action将项目下载依赖、打包项目、生成docker镜像放在了服务器外（github中）执行，而webhook把执行步骤都放在了服务器内执行

一、项目手动部署

在开始介绍自动部署之前，先看一下手动部署怎样实现的，以便于与自动部署进行对比：

1、本地项目上传到github仓库

2、xshell连接服务器，通过yum安装运行项目需要的环境（git、nvm）

# 安装git
yum install git -y

# 安装nvm
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

# 执行nvm命令
source /root/.bashrc

3、生成服务器对于github的ssh公钥并将公钥配置在github中，方便服务器拉取github代码

# 服务器生成ssh
ssh-keygen -t rsa -b 4096 -C "[email protected]"
# 查看生成的ssh公钥
cat /root/.ssh/id_rsa.pub

4、通过nvm安装node（npm），切换npm淘宝镜像源

# nvm安装node的最新稳定版本
nvm install stable

# 切换npm淘宝镜像源，使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

5、通过yum安装yum-utils等yum工具、切换yum阿里源

# 安装yum工具
yum install -y yum-utils   device-mapper-persistent-data   lvm2
# 切换yum源
yum-config-manager \
    --add-repo \
    https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

6、服务器新建/usr/projects目录存放项目代码，使用git clone将github的前后端项目代码克隆到该目录

mkdir /usr/projects
# 通过ssh拉取前端项目
git clone [email protected]:zhufengnodejs/vue-front.git
# 通过ssh拉取后端项目
git clone [email protected]:zhufengnodejs/vue-back.git

7、启动项目：切换到后端项目目录->cnpm i 下载依赖->npm run start启动项目(注意服务器开启端口号安全组)、启动前端项目步骤一样

cd /usr/projects/vue-back
# 下载后端项目依赖
cnpm i
# 启动项目
npm run start
# curl命令可以查看url显示的结果
curl http://119.3.102.56:3000/api/users

此时手动部署的项目在服务器断开后就不能访问了，而且本地修改代码后需要手动上传代码然后服务器拉取代码再安装依赖重新启动等，很麻烦

二、项目自动部署

介绍了手动部署项目的方式，再来看看怎样实现自动部署：

1、通过yum安装docker，服务器新建/etc/docker目录修改docker配置文件配置docker阿里云镜像源加速

（docker相当于一个镜像仓库，里面存放着很多镜像比如nginx、centos、包括自己配置的镜像空间存放单独的项目等，配置docker加速可以让docker下载这些镜像的速度加快）

（可以将前端和后端项目分别存放在单独的docker镜像空间中，一个docker镜像空间运行一个项目，下载的项目依赖的版本比如vue、node等互不冲突）

# 安装docker
yum install -y docker-ce docker-ce-cli containerd.io

# 配置docker阿里云镜像源加速
mkdir -p /etc/docker
# 执行命令向文件写入镜像源
tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"]
}
EOF
# 重载所有修改过的配置文件
systemctl daemon-reload
systemctl restart docker

2、在github项目的settings中的webhooks配置webhook服务器（前端项目和后端项目都需要配置）

（表示该项目提交到github上就会触发配置的webhook，会发请求到webhook配置的服务器上进行逻辑处理比如执行脚本等）

（注意配置的密码在github发请求时会在请求头以签名的形式传递过来，vue-webhook会验证该签名是否正确）

3、本地新建vue-webhook项目使用node开启该服务器用于接收github发来的请求（webhook.js）、

项目上传到仓库、

服务器clone代码到/usr/projects/vue-webhook、

服务器启动该项目

4、服务器通过npm下载pm2管理vue-webhook项目持续开启

（可以通过pm2 logs查看项目启动日志，通过pm2 flush清空日志）

（使用docker之后就可以不使用pm2管理node项目了，可以通过docker logs -f 容器名查看启动日志，容器启动失败就使用docker logs查看启动日志排错）

cnpm i pm2 -g

配置本地vue-webhook项目package.json文件的启动方式为pm2启动

{
   
   
  "scripts": {
   
   
    //pm2启动项目，--watch出现错误自动重启项目
    "start": "pm2 start ./webhook.js --watch --name='vue-webhook'",
    //停止项目
    "stop": "pm2 stop vue-webhook"
  },
}

上传更新的vue-webhook代码到仓库

服务器拉取vue-webhook仓库代码

5、配置自动构建后端项目：本地vue-webhook新增后端项目vue-back的自动构建脚本vue-back.sh（名字随便取）

（服务器执行该自动构建脚本可以自动拉取仓库代码并将该项目创建单独的docker空间存放并启动）

# vue-webhook/vue-back.sh

#后端项目自动构建配置
#!/bin/bash
WORK_PATH='/usr/projects/vue-back'
cd $WORK_PATH
# echo命令--语句打印输出在服务器
echo "清理代码"
git reset --hard origin/master
git clean -f
echo "拉取最新代码"
git pull origin master
echo "删除旧容器"
docke