目标

使用docker为载体，需要准备服务器、域名各一个，实现

nginx部署前端服务
webhooks实现自动部署
nginx作为代理服务器，配置二级域名
docker-compose一次部署多个服务

域名解析

本文以腾讯云为例

DNS 解析 DNSPod/解析

云服务器

做完以上操作，有1个主域名、3个二级域名和一些端口号可以用了。登录服务器，使用docker起飞了~

ssh root@106.54.179.243

创建文件夹，以备测试使用，所有项目都放在这里

mkdir docker-git

nginx部署前端服务

启动docker

service docker start

查看nginx默认目录

cat /etc/nginx/nginx.conf

所以下面的default.conf，只有放到以上两个目录下，才生效，一般放到/etc/nginx/conf.d下就可以了。准备一个nginx静态项目

├── dist                         
│   ├── index.html           // 静态文件
├── nginx                         
│   ├── conf.d
│   │    └── default.conf    // nginx配置
├── docker-compose.yml       // docker配置

// default.conf
server {
    listen 80;
    server_name kaixin.world;
    location / {
        root /var/www/html;
        index index.html index.htm;
    }
}

# docker-compose.yml
version: '3.1'
services:
  nginx:
    restart: always
    image: nginx
    ports:
      - 80:80
    volumes:
      - ./nginx/conf.d:/etc/nginx/conf.d
      - ./dist:/var/www/html

先把项目push，然后在服务器拉取。

git clone https://gitee.com/liuyuetong/nginx-app.git

以下在docker中执行。停止运行的容器，并且会删除已停止的容器以及已创建的所有网络

docker-compose down

根目录执行，强制重新创建一次，所有的Dcokerfile文件重新创建

docker-compose up -d --force-recreate --build

进入该实例的终端

docker ps

找到以上指令的结果：CONTAINER ID

docker exec -it d1e12ad0d979 /bin/bash

webhooks自动部署

以上操作，会在执行git push后触发钩子回调。在nginx-app项目中执行

npm init -y
npm i gitee-webhook-handler
mkdir deploy-dev.sh

# deploy-dev.sh
echo deploy project

# 拉取最新代码
git pull

npm i

echo npm i end

# 停止运行的容器，并且会删除已停止的容器以及已创建的所有网络
docker-compose down

echo "docker-删除成功"

# 强制重新创建一次，所有的Dcokerfile文件重新创建
docker-compose up -d --force-recreate --build

echo "发布成功"

// webhooks.js
const http = require('http')
const createHandler = require('gitee-webhook-handler')

const handler = createHandler({
  path: '/webhooks',
  secret: 'nginx-app'
})

function run_cmd(cmd, args, callback) {
  const spawn = require('child_process').spawn
  const child = spawn(cmd, args)
  let resp = ''
  // 打印日志
  child.stdout.on('data', function (buffer) {
    resp += buffer.toString()
  })
  child.stdout.on('end', function () {
    callback(resp)
  })
}

const port = 9530
http
  .createServer((req, res) => {
    handler(req, res, (err) => {
      res.statusCode = 404
      res.end('服务器错误')
    })
  })
  .listen(port, () => {
    console.log(`webhook listen ${port}`)
  })

handler.on('error', (err) => {
  console.error('error', err.message)
})

handler.on('Push Hook', (e) => {
  if (e.payload.ref === "refs/heads/master") {
    console.log('nginx-app master push Hook ...')
    // 执行shall脚本
    run_cmd('sh', ['./deploy-dev.sh'], function (res) {
      console.log('run_cmd.res', res)
    })
  }
})

使用pm2，启动进程守护

docker pull pm2

开启webhooks监听

pm2 start webhooks.js

查看日志

pm2 log

清除所有日志

pm2 flush

查看所有进程

pm2 status

杀死进程

pm2 delete id

本地执行git push后，就会触发自动部署注意：一定要保证服务是启动状态

nginx代理二级域名

准备一个react的项目，不依赖后端。

├── src                      // 项目目录
├── nginx                         
│   ├── conf.d
│   │    └── default.conf    // nginx配置
├── docker-compose.yml       // docker配置,对外暴露9000端口

在服务器，将项目clone下来，准备发布

git clone https://gitee.com/liuyuetong/h5-app.git

下载依赖，执行npm run build，使用docker-compose发布

docker-compose up -d --force-recreate --build

线上已经有一个可以通过访问ip+port访问的项目了，下一步,在nginx-app添加以下配置

# nginx-app/nginx/conf.d/default.conf
server {
    listen 80;
    server_name m.kaixin.world; #二级域名
    location / {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_pass http://106.54.179.243:9000; #代理的服务：ip+port
    }
}

执行git push，会触发自动构建

同样的，我们也可在h5-app项目中添加webhooks，实现自动构建

docker部署

目标