前言
目前公司内部项目部署都是基于docker容器,实际工作中可能只需要copy Dockerfile文件,然后就是使用公司的自动化部署,项目发布就OK了。
但是对于我们自己的私人项目,又该如何使用docker进行自动化的发布呢? 本文使用docker-webhook 自动化构建vue项目,详细阐述思路,希望能够一起交流。
具体实现:
- 使用vue-cli创建vue项目
- 本地构建vue项目镜像,push到docker镜像管理仓库(hub.docker.com),触发docker-webhook
- node服务监听docker-webhook,本地启动vue-demo容器,部署成功
相关版本:
- Docker version 20.10.10, build b485636 docker安装官方文档
- @vue/cli 4.5.15
- macOS Monterey Verison 12.0.1
创建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 也是显示成功的