docker + webhook 自动化部署前端项目

1,146 阅读3分钟

前言

目前公司内部项目部署都是基于docker容器,实际工作中可能只需要copy Dockerfile文件,然后就是使用公司的自动化部署,项目发布就OK了。

但是对于我们自己的私人项目,又该如何使用docker进行自动化的发布呢? 本文使用docker-webhook 自动化构建vue项目,详细阐述思路,希望能够一起交流。

具体实现:

  • 使用vue-cli创建vue项目
  • 本地构建vue项目镜像,push到docker镜像管理仓库(hub.docker.com),触发docker-webhook
  • node服务监听docker-webhook,本地启动vue-demo容器,部署成功
相关版本:

创建vue应用

# 创建
npx @vue/cli create vue-demo

项目根目录创建Dockerfile文件

# Dockerfile

# 基于node镜像
FROM node:lts-alpine AS builder  

# 镜像创建src目录
WORKDIR /src
# 将项目package.json文件复制到src目录
COPY package*.json /src
RUN npm install
COPY . /src
RUN npm run build

# 还需要一个nginx镜像,用来部署vue项目
FROM nginx:stable-alpine
COPY --from=builder /src/dist /usr/share/nginx/html/

项目根目录创建.dockerignore文件

node_modules

现在的目录结构是这样的

本地构建vue-demo镜像,并启动vue-demo项目

docker build -t vue-demo . 

docker build 用来构建镜像
-t 是给镜像命名 这个名称可以随意
. 是基于当前目录的Dockerfile来构建镜像

执行结束之后,终端执行docker images,可以看到我们本地已经有了一个vue-demo 镜像

docker run -d -p 8080:80 --name vue-demo-container vue-demo  

docker run 启动容器
-d 后台运行
-p 8080:80 将主机的 8080 端口映射到容器中的 80 端口 (nginx默认启动80端口)
--name 容器的名称

docker ps命令可以看到容器vue-demo-container 已经启动,然后打开http://localhost:8080/ 可以看到vue项目已经启动

将构建的镜像推送到docker的镜像管理仓库

网址是 hub.docker.com/

账号需要自己创建一个

本地登录镜像仓库

docker login -u username
Password 

推送

docker tag vue-demo houhoz/vue-demo
docker push houhoz/vue-demo

docker tag : 标记本地镜像,将其归入某一仓库,houhoz 是我自己hub.docker 的用户名

推送成功,打开hub.docker.com/,就可以看到刚刚创建的镜像了

创建docker-webhook

想要实现docker镜像推送成功,就重新构建项目,我们还需要再创建一个node服务,用来监听webhook的触发事件

新建一个node-webhook项目

npm init -y
touch index.js
# index.js
const http = require('http')
const { execSync } = require('child_process')

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)
      // 关于webhook的回调可以看官方文档 https://docs.docker.com/docker-hub/webhooks/
      // 拉取 docker 镜像
      execSync(
        `docker pull ${data.repository?.repo_name}:${data?.push_data?.tag}`,
        {
          stdio: 'inherit',
        }
      )

      // 销毁 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 8080:80 --name ${data.repository.name}-container ${data.repository.repo_name}:${data?.push_data?.tag}`,
        {
          stdio: 'inherit',
        }
      )
      console.log('deploy success')
    }
    res.end('ok')
  })
  .listen(3000, () => {
    console.log('server:3000 is ready')
  })

本地启动node 项目 node index.js

因为docker-webhook 还要公网访问,还需要使用ngrok 内网穿透

./ngrok http 3000

然后复制0280-129-227-137-235.ngrok.io 添加

之后我们测试一下 本地 docker push houhoz/vue-demo, 之后可以看到,显示部署成功。

然后看到docker-webhooks 也是显示成功的

打开本地http://localhost:8080/

image.png