使用 docker + webhook 实现前端自动化部署

image

前言

得益于 node 的横空出世以及前端工程化的兴起，无论是开发模式，还是开发框架，前端生态链都产生了翻天覆地的变化，与此同时前端慢慢开始向其他领域探索，项目部署就是其中一个领域

在刀耕火种的时代，当执行 npm run build 将生成产物交给运维后，前端的任务就算完成了，运维同学在生产服务器上将产物的路径写入 nginx 配置文件，至此完成了“简单”的部署

随着项目的不断迭代，前端开始发现问题的严重性，每次都需要耗费大量的时间在打包上，开发5分钟，打包半小时的情况屡见不鲜，另外开发者自身环境的差异会导致最终的产物也有不同

但办法总比困难多，例如可以将打包操作放到远端服务器上，又比如可以将上述流程结合 git 仓库实现自动部署

本着不设边界的“字节范”，本文将从零开始，实现前端自动化部署流程，打开项目部署的“黑盒”

涉及技术栈如下：

  • docker

  • node

  • pm2

  • shell

  • webhook

文章中的命令大部分为 linux 命令，本地是 windows 系统的读者请使用 git bash

介绍 docker

着手开发前，先介绍这次的主角 docker

image

什么是 docker

简而言之，docker 可以灵活的创建/销毁/管理多个“服务器”，这些“服务器”被称为 容器 (container)

在容器中你可以做任何服务器可以做的事，例如在有 node 环境的容器中运行 npm run build 打包项目，在有 nginx 环境的容器中部署项目，在有 mysql 环境的容器中做数据存储等等

一旦服务器安装了 docker ，就可以自由创建任意多的容器，上图中 docker 的 logo 形象的展示了它们之间的关系，🐳就是 docker，上面的一个个集装箱就是容器

安装 docker

为了方便本地调试，可以先在本地安装 docker

Mac：https://download.docker.com/mac/stable/Docker.dmg

Windows：https://download.docker.com/win/stable/Docker%20for%20Windows%20Installer.exe

Linux：https://get.docker.com/

下载安装完毕后，点击 docker 图标启动 docker，此时在终端中就可以使用 docker 相关的操作

image

出现以下情况，检查 docker 应用程序是否正常启动

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n36" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">docker: Cannot connect to the Docker daemon at unix:///var/run/docker.sock. Is the docker daemon running?.</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n58" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">
<h1>Hello docker</h1></pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="dockerfile" cid="n59" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"># Dockerfile
FROM nginx
COPY index.html /usr/share/nginx/html/index.html
EXPOSE 80</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n69" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">hello-docker
|____index.html
|____Dockerfile</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n72" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">docker build . -t test-image:latest </pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n85" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">docker run -d -p 80:80 --name test-container test-image:latest</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n102" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">docker pull nginx
docker run -d -p 81:80 --name nginx-container nginx</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n155" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">less ~/.ssh/id_rsa.pub </pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n158" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">$ ssh-keygen -o
Generating public/private rsa key pair.
Enter file in which to save the key (/home/schacon/.ssh/id_rsa):
Created directory '/home/schacon/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /home/schacon/.ssh/id_rsa.
Your public key has been saved in /home/schacon/.ssh/id_rsa.pub.
The key fingerprint is:
d0:82:24:8e:d7:f1:bb:9b:33:53:96:93:49:da:9b:e3 schacon@mylaptop.local</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n159" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">$ cat ~/.ssh/id_rsa.pub
ssh-rsa AAAAB3NzaCxxxxxxxxxxxxxxxxxxxxxxxxBWDSU
GPl+nafzlHDTYxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxPppSwg0cda3
Pbv7kOdJ/MxxxxxxxxxxxxxxxxxxxxxxxxxxxQwdsdMFvSlVK/7XA
t3FaoJoxxxxxxxxxxxxxxxxxxxxx88XypNDvjYNby6vw/Pb0rwert/En
mZ+AW4OZPnTxxxxxxxxxxxxxxxxxxo1d01QraTlMqVSsbx
NrRFi9wrf+M7Q== schacon@mylaptop.local</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n164" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">ssh <username>@<hostname or IP address></pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n170" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"># Step 1: 安装必要的一些系统工具
sudo yum install -y yum-utils

Step 2: 添加软件源信息，使用阿里云镜像

sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

Step 3: 安装 docker-ce

sudo yum install docker-ce docker-ce-cli containerd.io

Step 4: 开启 docker服务

sudo systemctl docker start

Step 5: 运行 hello-world 项目

sudo docker run hello-world</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n174" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">yum install git</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n179" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n181" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">export NVM_DIR="HOME/.nvm" [ -s "NVM_DIR/nvm.sh" ] && . "NVM_DIR/nvm.sh" # This loads nvm [ -s "NVM_DIR/bash_completion" ] && . "$NVM_DIR/bash_completion" # This loads nvm bash_completion</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n183" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">nvm install node</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n186" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">npm i pm2 -g</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n190" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">vue create docker-test</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="dockerfile" cid="n213" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"># dockerfile

build stage

FROM node:latest as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
​

production stage

FROM nginx:latest as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n240" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">scp ./Dockerfile root@118.89.244.45:/root</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n244" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"># .dockerignore
node_modules</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n249" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">scp ./.dockerignore root@118.89.244.45:/root</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="javascript" cid="n253" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">const http = require("http")
​
http.createServer((req, res) => {
console.log('receive request')
console.log(req.url)
if (req.method === 'POST' && req.url === '/') {
//...
}
res.end('ok')
}).listen(3000,()=>{
console.log('server is ready')
})</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="diff" cid="n256" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">const http = require("http")

  • const {execSync} = require("child_process")
  • const path = require("path")
  • const fs = require("fs")
    ​
  • // 递归删除目录
  • function deleteFolderRecursive(path) {
  • if( fs.existsSync(path) ) {
  •    fs.readdirSync(path).forEach(function(file) {

  •        const curPath = path + "/" + file;

  •        if(fs.statSync(curPath).isDirectory()) { // recurse

  •            deleteFolderRecursive(curPath);

  •        } else { // delete file

  •            fs.unlinkSync(curPath);

  •        }

  •    });

  •    fs.rmdirSync(path);
  • }
  • }
    ​
  • const resolvePost = req =>
  • new Promise(resolve => {
  • let chunk = "";

  •    req.on("data", data => {

  •        chunk += data;

  •    });

  •    req.on("end", () => {

  •     resolve(JSON.parse(chunk));

  • });
  • });
    ​
    http.createServer(async (req, res) => {
    console.log('receive request')
    console.log(req.url)
    if (req.method === 'POST' && req.url === '/') {
  • const data = await resolvePost(req);

  • const projectDir = path.resolve(`./${data.repository.name}`)

  • deleteFolderRecursive(projectDir)

​

  • // 拉取仓库最新代码
  • execSync(git clone https://github.com/yeyan1996/${data.repository.name}.git ${projectDir},{
  •   stdio:'inherit',
  • })
    }
    res.end('ok')
    }).listen(3000, () => {
    console.log('server is ready')
    })</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="diff" cid="n270" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">const http = require("http")
const {execSync} = require("child_process")
const fs = require("fs")
const path = require("path")
​
// 递归删除目录
function deleteFolderRecursive(path) {
if( fs.existsSync(path) ) {
fs.readdirSync(path).forEach(function(file) {
const curPath = path + "/" + file;
if(fs.statSync(curPath).isDirectory()) { // recurse
deleteFolderRecursive(curPath);
} else { // delete file
fs.unlinkSync(curPath);
}
});
fs.rmdirSync(path);
}
}
​
const resolvePost = req =>
new Promise(resolve => {
let chunk = "";
req.on("data", data => {
chunk += data;
});
req.on("end", () => {
resolve(JSON.parse(chunk));
});
});
​
http.createServer(async (req, res) => {
console.log('receive request')
console.log(req.url)
if (req.method === 'POST' && req.url === '/') {
const data = await resolvePost(req);
const projectDir = path.resolve(./${data.repository.name})
deleteFolderRecursive(projectDir)

// 拉取仓库最新代码
execSync(git clone https://github.com/yeyan1996/${data.repository.name}.git ${projectDir},{
stdio:'inherit',
})

  • // 复制 Dockerfile 到项目目录

  • fs.copyFileSync(path.resolve(`./Dockerfile`), path.resolve(projectDir,'./Dockerfile'))

​

  • // 复制 .dockerignore 到项目目录

  • fs.copyFileSync(path.resolve(__dirname,`./.dockerignore`), path.resolve(projectDir, './.dockerignore'))

​

  •  // 创建 docker 镜像

  • execSync(`docker build . -t ${data.repository.name}-image:latest `,{

  •   stdio:'inherit',

  •   cwd: projectDir
  • })
    ​
  •  // 销毁 docker 容器

  •  execSync(`docker ps -a -f "name=^${data.repository.name}-container" --format="{{.Names}}" | xargs -r docker stop | xargs -r docker rm`, {

  •   stdio: 'inherit',
  • })
    ​
  •  // 创建 docker 容器

  •  execSync(`docker run -d -p 8888:80 --name ${data.repository.name}-container  ${data.repository.name}-image:latest`, {

  •   stdio:'inherit',

  •  console.log('deploy success')
  • })
    res.end('ok')
    }
    }).listen(3000, () => {
    console.log('server is ready')
    })</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n272" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">scp ./index.js root@118.89.244.45:/root</pre>

<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="shell" cid="n275" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;">pm2 start index.js</pre>

  • travis-ci

  • circleci

    通过 yml 配置文件，简化上文中注册 webhook 和编写更新容器的 index.js 脚本的步骤

    image
    image

    <pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="yml" cid="n305" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); --select-text-bg-color: #36284e; --select-text-font-color: #fff; font-size: 0.9rem; line-height: 1.714285em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-size: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(218, 218, 218); position: relative !important; margin-bottom: 3em; margin-left: 2em; padding-left: 1ch; padding-right: 1ch; width: inherit; background-position: inherit inherit; background-repeat: inherit inherit;"># .travis.yml
    language: node_js
    node_js:

    • 8
      branchs:
      only:
    • master
      cache:
      directories:
    • node_modules
      install:
    • yarn install
      scripts:
    • yarn test
    • yarn build</pre>

    Best practices for writing Dockerfiles

    Dockerize Vue.js App

    山月的琐碎博客记录

    写给前端的Docker实战教程

    参考资料

    感谢你能看到这里，希望对各位有帮助～

    但本文的宗旨还是探索其中的原理，维护成熟的开源项目还是推荐使用上述平台

    image

    另外随着环境的增多，容器也会逐渐增加，docker 也推出了更好管理容器的方式 docker-compose

基于 github 平台也有非常成熟的 CI/CD 工具，例如

写在后面

关注 Dockerfile ，.dockerignore， index.js 文件

Docker-test

源码

大功告成～

image

最后访问 8888 端口可以看到更新后的文案

image

接着销毁旧容器，并使用更新后的镜像创建容器

image

克隆完毕后将 Dockerfile 和 .dockerignore 放入项目文件中，并更新镜像

image

不出意外，pm2 会输出克隆项目的日志

image

首先在云服务器上运行 pm2 logs 查看 index.js 输出的日志，随后本地添加 hello docker 文案，并推送至 github

来试试自动化部署的流程是否能正常运行

try it

image

启动成功后，访问云服务器 8888 端口看到部署的 demo 项目

image

通过之前安装的 pm2 将 index.js 作为后台脚本在云服务器上运行

运行 node 脚本

同样通过 scp 复制到云服务器上

然后给 index.js 添加 docker 相关逻辑

删除 name 为 docker-container 的容器（停止状态的容器才能被删除）

docker rm docker-container

停止 name 为 docker-container 的容器

docker stop docker-container

查看所有 name 以 docker 开头的 docker 容器，并只输出容器名

docker ps -a -f "name=^docker" --format="{{.Names}}"

在创建新容器前，需要先把旧容器销毁，这里先介绍几个用到的 docker 命令：

创建镜像和容器

data.repository.name 即 webhook 中记录仓库名的属性

当项目更新后，云服务器需要先拉取仓库最新代码

拉取仓库代码

本地项目里新建 index.js

由于我们是前端开发，这里使用 node 开启一个简单的 http 服务器处理 webhook 发送的 post 请求

创建 http 服务器

接着将 .dockerignore 文件也复制到云服务器上

第二次复制除 node_modules的所有文件

第一次只复制 package.json 和 package-lock.json，并安装依赖

由于需要保持本地和容器中 node_module 依赖包一致，在创建 Dockerfile 时用了两次 COPY 命令

本地项目里新建 .dockerignore

类似 .gitignore，.dockerignore 可以在创建镜像复制文件时忽略复制某些文件

创建 .dockerignore

最后通过 scp 命令，将 Dockerfile 文件复制到云服务器上

  • FROM nginx:latest as production-stage：基于 nginx 最新镜像，并将有 nginx 环境的阶段命名为 production-stage

  • COPY --from=build-stage /app/dist /usr/share/nginx/html：通过 --form 参数可以引用 build-stage 阶段生成的产物，将其复制到 /usr/share/nginx/html

  • EXPOSE 80：容器对外暴露 80 端口

  • CMD ["nginx", "-g", "daemon off;"]：容器创建时运行 nginx -g daemon off 命令，一旦 CMD 对应的命令结束，容器就会被销毁，所以通过 daemon off 让 nginx 一直在前台运行

将构建分为两个阶段，第一阶段基于 node 镜像，第二阶段基于 nginx 镜像

这里用到了 docker 一个技巧：多阶段构建

  • FROM node:latest as build-stage：基于 node 最新镜像，并通过构建阶段命名，将有 node 环境的阶段命名为 build-stage

  • WORKDIR /app：将工作区设为 /app，和其他系统文件隔离

  • COPY package*.json ./：拷贝 package.json/package-lock.json 到容器的 /app 目录

  • RUN npm install：运行 npm install 在容器中安装依赖

  • COPY . .：拷贝其他文件到容器 /app 目录，分两次拷贝是因为保持 node_modules 一致

  • RUN npm run build：运行 npm run build 在容器中构建

逐行解析配置：

先在本地项目里新建一个 Dockerfile 用于之后创建镜像

创建 Dockerfile

当云服务器接收到项目更新后发送的 post 请求后，需要创建/更新镜像来实现自动化部署

处理项目更新的请求

参数主要涉及当前仓库和本地提交的信息，这里我们只用 repository.name 获取更新的仓库名即可

image

配置完成后，可以向仓库提交一个 commit，然后点击最下方可以看到 post 请求参数

测试 webhook

点击 Add webhook 为当前项目添加一个 webhook，至此，当 docker-test 项目有代码提交时，就会往 http://118.89.244.45:3000 发送一个 post 请求

webhook 还可以设置一些鉴权相关的 token，由于是个人项目这里不详细展开了

  • 触发时机：Just the push event，即仓库 push 事件，根据不同的需求还可以选择其他事件，例如 PR，提交 Commit，提交 issues 等

  • Content type：选择 application/json 即发送 json 格式的 post 请求

  • Payload URL：填写云服务器公网 IP，记得添加 http(s) 前缀

image
image

打开 github 的仓库主页，点击右侧 settings

配置 webhook

当仓库有提交代码时，通过将 webhook 请求地址指向云服务器 IP 地址，云服务器就能知道项目有更新，之后运行相关代码实现自动化部署

参考 Vue 生命周期，当组件挂载完成时会触发 mounted 钩子，在钩子中可以编写拉取后端数据，或者渲染页面等回调逻辑，而 github 的 webhook 会在当前仓库触发某些事件时，发送一个 post 形式的 http 请求

hook 翻译为“钩子”，还可以理解为“回调”

webhook

并将 demo 项目上传到 github，准备配置 webhook

简单使用 vue-cli 在本地创建项目

创建 demo 项目

image

node 安装完成后，还需要安装 pm2，它能使你的 js 脚本能在云服务器的后台运行

通过 nvm 安装最新版 node

将 nvm 作为环境变量

既然是前端自动化部署，云服务器上相关处理逻辑用 js 编写，所以需要安装 node 环境，这里用 nvm 来管理 node 版本

node

image-20200630125450964

由于 SSH 方式还需要在 github 上注册公钥，方便起见，之后会选择 HTTPS 的方式克隆仓库

自动化部署涉及到拉取最新的代码，所以需要安装 git 环境

git

image

弹出 Hello from Docker! 证明 Docker 已经成功安装啦～

云服务器安装和本地有些区别，根据 docker 官网 的安装教程，运行以下命令

之前在本地安装了 docker，但云服务器上默认也是没有的，所以需要给它也安装 docker 环境

docker

接着给云服务器安装基础的环境

安装环境

image

绑定完成后重新开机，至此就可以在本地通过 ssh 命令登陆云服务器啦

image

除了注册公钥，还需要将它绑定实例，将实例关机并进行绑定

将生成的公钥放在云服务器控制台图示部分，点击确定

没有生成过密钥本地运行以下命令即可，参考 服务器上的 Git - 生成 SSH 公钥

image

生成密钥的方式同 git，之前生成过的话本地执行以下命令就能查看

前者无需配置，但每次登陆都需要输入账号密码，后者需要注册 ssh 密钥，但之后可以免密登陆云服务器。个人比较喜欢后者，所以先在控制台注册 ssh 密钥
image

然后我们需要登陆云服务器，本地登陆云服务器的方式一般有两种，密码登陆和 ssh 登陆（或者用 ssh 工具，windows 系统可以用 xhell，macOS 可以用 putty）

image

公网 IP 用于之后 webhook 发送请求的地址

注册相关的操作不细说了，参考供应商教程，随后登陆控制台可以看到当前云服务器的公网 IP，例如下图中服务器的公网 IP 是：118.89.244.45

熟悉云服务器配置或者不是腾讯云的读者可以跳过这章

登陆云服务器

由于是个人项目，对云服务器的要求不高，大部分供应商会给新用户白嫖免费试用 1-2 周，这里我选择腾讯云 CentOS 7.6 64位 的操作系统，当然阿里云或其他云服务器也完全 ok

首先你得有一台服务器吧-。-

云服务器

可以发现，实现前端自动化部署后开发者需要做的只是把代码推到仓库，其余的事都可以通过服务器上的自动化脚本完成

  • git push 提交代码到仓库

  • 服务器自动更新镜像

  • 镜像中自动运行 npm run build 生成构建产物

  • 服务器自动创建容器

在实现前端自动化部署后：

  • 本地运行 npm run build 生成构建产物

  • 将产物通过 ftp 等形式上传到服务器

  • git push 提交代码到仓库

在没迁移 Docker 之前，若我想更新线上网站中内容时，需要：

介绍完 docker，接着我们从零开始实现前端自动化部署

前端自动化部署

相比于真实服务器/虚拟机，容器不包含操作系统，这意味着创建/销毁容器都十分高效

高效并节省资源

使用 docker 可以使你的服务器更干净，构建用到的环境可以都放在容器中

环境隔离

在创建镜像时可以使用 tag 标记版本，如果某个版本的环境有问题，可以快速回滚到之前版本

类似 git，docker 也有版本控制

便于回滚

服务器拉取账号 yeyan1996 下的 docker-test-image 镜像

docker pull yeyan1996/docker-test-image:latest

本地提交名为 docker-test-image 的镜像，镜像名需要加上 dockerhub 账号作为前缀

docker push yeyan1996/docker-test-image:latest

开发者可以将开发环境用 docker 镜像上传到 docker 仓库，在生产环境拉取并运行相同的镜像，保持环境一致

docker 的出现解决了一个世纪难题：在我电脑上明明是好的 :)

环境统一

有人会问，环境我都可以装在自己的服务器上，为什么还要放在一个个容器里呢？这里列举使用 docker 的几个优点

了解了 docker 的概念和使用方法，接着讲讲为什么要用 docker

为什么要用 docker

image

由于上一步操作本地 80 端口已经被占用了，这里使用 81 端口映射到容器的 80 端口，访问 localhost:81 可以看到 nginx 启动页面

第一步拉取了官方的 nginx 镜像，第二步用基于官方 nginx 镜像创建名为 nginx-container 的容器

开发者可以将 Dockerfile 生成的镜像上传到 dockerhub 来存储自定义镜像，也可以直接使用官方提供的镜像

如果说 github 是存储代码的仓库，那么 dockerhub 就是存储镜像的仓库

DockerHub

image

由于本地 80 端口映射到了容器的 80 端口，所以当输入 localhost 时，会显示 index.html 文件内容

  • run：创建并运行 docker 容器

  • -d： 后台运行容器

  • 80:80：将当前服务器的 80 端口（冒号前的 80），映射到容器的 80 端口（冒号后的 80）

  • --name：给容器命名，便于之后定位容器

  • test-image:latest：基于 test-image 最新版本的镜像创建容器

镜像成功创建后，运行以下命令可以创建一个 docker 容器

创建容器

image

  • build：创建 docker 镜像

  • .：使用当前目录下的 dockerfile 文件

  • -t：使用 tag 标记版本

  • test-image:latest：创建名为 test-image 的镜像，并标记为 latest（最新）版本

在创建 Dockerfile 文件后，在当前目录运行以下命令可以创建一个 docker 镜像

创建镜像

此时，你的文件结构应该是

其他 Dockerfile 配置参考官方文档

  • FROM nginx：基于官方 nginx 镜像

  • COPY index.html /usr/share/nginx/html/index.html：将当前目录下 index.html 替换容器中 /usr/share/nginx/html/index.html 文件， /usr/share/nginx/html 是 nginx 默认存放网页文件的目录，访问容器 80 端口会展示该目录下 index.html 文件

  • EXPOSE 80：容器对外暴露 80 端口，主要起声明作用，真实端口映射还需要在创建容器时定义

首先创建一个 hello-docker 目录，在目录中创建 index.html 和 Dockerfile 文件

创建文件

尝试用 Dockerfile 创建 docker 镜像

Dockerfile 是一个配置文件，类似 .gitlab-ci.yml/package.json，定义了如何生成镜像

Dockerfile

image

  • Dockerfile 文件创建而成

  • 直接使用 DockerHub 或者其他仓库上现有的镜像

有两种方式获取镜像

如果把容器比作轻量的服务器，那么镜像就是创建它的模版，一个 docker 镜像可以创建多个容器，它们的关系好比 JavaScript 中类和实例的关系

  • 镜像（image）

  • 容器（container）

  • 仓库（repository）

docker 有三个重要的概念

基本概念

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,126评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,254评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,445评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,185评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,178评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,970评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,276评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,927评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,400评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,646评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,213评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2赞 345