1、安装docker

// 安装yum工具集
yum install -y yum-utils    device-mapper-persistent-data    lvm2

// 添加docker源(安装的是社区版本《ce》)，否则安装很慢
yum-config-manager \
	--add-repo \
  https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
 
//安装docker
yum install -y docker-ce docker-ce-cli containerd.io
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

2、切换docker的源

可以理解为docker是一个容器，它里面需要下载镜像，类似于github

mkdir -p /etc/docker
tee /etc/docker/daemon.json <<-'EOF'
{
	"registry-mirrors":["https://fwvjnv59.mirror.aliyuncs.com"]
}
EOF
// 重载所有修改过的配置文件即可完成安装docker
systemctl daemon-reload
systemctl restart docker
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.


3、配置git仓库ssh秘钥

ssh-keygen -t rsa -b 4096 -C "1131664585@qq.com"
cat /root/.ssh/id_rsa.pub
//复制该公钥到git的setting里
  • 1.
  • 2.
  • 3.


4、给需要自动部署的git仓库添加一个webhook

给仓库添加一个webhook后，每当我们提交代码(或者其他事件，可自定义)，它会自动向我们指定的服务器发送一个post请求

docker+webhook部署_docker

5、编写webhook后台服务

const express = require("express");
const bodyParser = require("body-parser");
const { spawn } = require("child_process");
const crypto = require("crypto");
const SECRET = "88888888";
const app = express();
const sign = (body) => {
  return `sha1=${crypto.createHmac("sha1", SECRET).update(body).digest("hex")}`;
};
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.post("/webhook", (req, res) => {
  console.log("webhook Listen Event");
  const event = req.headers["x-github-event"]; // event === push
  const signnature = req.headers["x-hub-signature"];
  if (signnature !== sign(JSON.stringify(req.body))) {
    return res.end("Not Allowed");
  }
  const branch = req.body["ref"].split("/").pop();
  if (branch === "master" && event === "push") {
    console.log("开始执行子进程");
    let child = spawn("sh", [
      `${req.body.repository.name.includes("fe") ? "front" : "back"}.sh`,
    ]);
    let buffers = [];
    child.stdout.on("data", (buffer) => {
      console.log("正在执行");
      buffers.push(buffer);
    });
    child.stdout.on("end", () => {
      const body = Buffer.concat(buffers);
      console.log("执行结束");
    });
  }
  res.end(JSON.stringify({ ok: true }));
});

app.listen(4000, () => {
  console.log("webhook服务在4000端口运行");
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.


在webhook项目中新建一下两个文件

1、 front.sh

#!/bin/bash
WORK_PATH='/dockerprojects/antd-pro-project-fe'
cd $WORK_PATH
echo "清楚老代码"
git reset --hard origin/master
git clean -f
echo "拉去新代码"
git pull origin master
echo "开始拉去新的依赖"
npm install
# echo "开始打包"
# npm run build
echo "开始构建"
docker build -t front:1.0 .   
# -t是指tag名字为front:1.0  .是指当前文件夹(当前命令行路径在WORK_PATH)下的Dockerfile文件
echo "停止旧容器并删除旧容器"
docker stop front-container
docker rm front-container
echo "启动新容器"
docker container run -p 80:80 --name front-container -d front:1.0
# 运行docker容器front:1.0并把宿主的80端口映射到docker的80端口，
# 起一个名字教front-container -d后台运行不然会阻塞当前进程
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.

2、 back.sh

#!/bin/bash
WORK_PATH='/dockerprojects/antd-pro-project-be'
cd $WORK_PATH
echo "清楚老代码"
git reset --hard origin/master
git clean -f
echo "拉去新代码"
git pull origin master
echo "开始构建"
docker build -t back:1.0 .
echo "停止旧容器并删除旧容器"
docker stop back-container
docker rm back-container
echo "启动新容器"
docker container run -p 3000:3000 --name back-container -d back:1.0
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

图解

docker+webhook部署_nginx_02

Docker布属项目所需文件

react前端：

1、Dockerfile文件

FROM nginx   //继承自nginx
LABEL name="fornt"
LABEL version="1.0"
COPY ./dist /usr/share/webapp  //将./dist的文件拷贝到/usr/share/webapp里
COPY ./nginx.conf /etc/nginx/conf.d
EXPOSE 80    // 暴露80端口
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.

2、nginx.conf

server{
  listen 80;
  server_name 公网ip;
  location / {
    root /usr/share/webapp;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  location /api {
    # nginx代理
    proxy_pass http://ip地址:3000;
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.


3、.dockerignore

.gitignore
Dockerfile
node_modules
  • 1.
  • 2.
  • 3.

node后端：

1、Dockerfile文件

FROM node
LABEL name="back"
LABEL version="1.0"
COPY . /app
WORKDIR /app
RUN npm install
EXPOSE 3000
CMD npm run start
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

2、.dockerignore

.gitignore
Dockerfile
node_modules
  • 1.
  • 2.
  • 3.