webhook+docker实现vue项目的持续集成

 
 

前言

前段时间将vue项目署到了云服务器，可是后续每次项目有修改时都需要我手动将代码push到云服务器和码云，并且还要重启docker容器，实在麻烦。于是开始研究持续集成。
本文涉及到技术有下面这些，但不会谈及太多基础知识：

• linux
• docker/docker-compose
• pm2
• nodejs
• http-server

思路是这样的：

1. 提前写好Dockerfile与docker-compose文件存在服务器。
2. 提前在云服务器写好一个shell脚本，内含拉取最新代码的git命令，以及重启docker-compose的命令。
3. 提前在服务器运行一个nodejs服务器脚本，用于接收来自码云的webhook请求(http)。
4. 在自己电脑上使用git将项目push到码云。
5. 码云的webhook会以发送http请求的方式告知云服务器有用户push了代码。
6. 当服务器收到webhook的请求后自动启动一个新进程运行此shell脚本。

我的项目目录如下:

 

Docker

Dockerfile

想使用docker部署vue项目必然需要一个合适的镜像，然而我没找到直接可用的镜像。vue官网确实给出了一个Dockerfile，可以构建出包含nodejs环境的镜像，不过这个镜像内是没有c语言编译环境的，而我常用的sass是需要在本机编译的，所以只得自己写了一个Dockerfile，读者可以借鉴。另外，如果有可以简化的地方请留言告诉我，谢谢。

在项目根目录下创建Dockerfile文件，下面是文件的内容：

# escape=`
FROM ubuntu
RUN apt-get update --assume-yes && `
apt-get upgrade --assume-yes && `
apt-get install --assume-yes curl software-properties-common && `
curl -fsSL http://mirrors.aliyun.com/docker-ce/linux/ubuntu/gpg | apt-key add - && `
add-apt-repository "deb [arch=amd64] http://mirrors.aliyun.com/docker-ce/linux/ubuntu $(lsb_release -cs) stable" && `
apt-get update --assume-yes && `
apt-get install nodejs --assume-yes && `
apt install nodejs --assume-yes && `
apt install npm --assume-yes && `
npm config set registry http://registry.npm.taobao.org/ && `
npm install n -g && `
n stable && `
npm install -g http-server
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 8080
CMD [ "http-server","dist","-c-1" ]

唯一需要注意的就是在使用http-server的时候要指定-c选项并将其值设为-1,表示不使用强缓存，这也是目前通常的策略。详情可以参考这篇博文。

docker-compose

可以看到npm install和npm run build都是在镜像的构建过程中执行的，也就是说，一但项目使用了新的包，或者代码发生了修改就需要：

1. 停止正在运行的容器
2. 重新构建镜像
3. 使用新镜像创建容器

如果我使用docker启动容器的话，在不知道容器id的情况下无法停止指定的容器。为了解决这个问题，可以借助docker-compose。
在项目根目录下创建docker-compose.yml文件，下面是文件的内容：

version: "3.7"
services: 
    web:
        build: .
        image: word/ys
        ports: 
            - "8080:8080"

是否指定image无关紧要，build的值为.表示使用当前目录下的Dockerfile文件来构建镜像。ports表示将容器内的8080端口(后)映射到服务器的8080端口(前)。

 
 

编写服务器脚本

我们需要在云服务器启动一个小型服务器脚本，目的是接收托管服务器(码云)发来的webhook请求。我将脚本直接放在了项目的根目录下且命名为webhook-gitee，脚本使用nodejs编写，内容如下：

const http