通过github的Actions 实现代码push仓库后自动构建容器并发布到DockerHub.
创建项目
首先我们创建一个项目,这里我就用Vue项目进行演示.
npm init vue@latest Actions-demo-swback
进去项目，按照提示执行 npm install npm run dev 启动项目.
首先保证项目的正常启动。
控制台显示如下，启动成功。
创建配置文件
在项目根目录创建.github\workflows\docker-build.yml 文件
目录结构
docker-build.yml 内容如下
name: Vue Image
on: [push]
jobs:
Docker-Build-Push:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Set up QEMU
uses: docker/setup-qemu-action@v1
- name: Set up Docker Buildx
id: buildx
uses: docker/setup-buildx-action@v1
- name: Login to DockerHub
uses: docker/login-action@v1
with:
username: ${{ secrets.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Build and push
id: docker_build
uses: docker/build-push-action@v2
with:
push: true
platforms: linux/amd64,linux/arm64
tags: ${{ secrets.DOCKER_USERNAME }}/actions:1.0
然后我们可以尝试修改vue代码.
然后build代码.
npm run build
这里要注意.gitignore文件里默认将dist文件是过滤的,我们需要删除,不然push不上去dist中的文件.
创建Dockerfile
既然自动构建,那么就需要Dockerfile
在项目根目录下创建Dockerfile文件
因为我这里是默认的nginx镜像. 默认web目录是/usr/share/nginx/html
FROM nginx:latest
COPY ./dist/ /usr/share/nginx/html/
#暴露端口
EXPOSE 80
github配置
github创建一个干净的仓库用来练习.
按照下图所示顺序,依次打开
创建变量,这里的DOCKER_USERNAME 需要和yml中一致,不然会在构建的过程中因为找不到而导致dockerhub无法登录.
创建完毕之后,进行git提交.
自动构建中
然后打开github,如下图所示, 可以看到Actions 下自动构建的项目正在进行.
如果运行失败,可以点进去查看详情.
我这里就是登录失败,原因是在上面创建变量的过程中,光截图忘记保存了.
可以点击左侧,使其重新运行,无需重新push.
成功之后如下:
dockerhub验证
dockerhub去查看验证
其中yml中最后一行的配置就是dockerhub的仓库名以及版本号
tags: ${{ secrets.DOCKER_USERNAME }}/actions:1.0
本地拉取镜像
docker run -itd -P swback/actions:1.0
启动镜像
docker run -itd -P swback/actions:1.0
自此,整个流程结束, 刚开始学习的时候会感到很麻烦,但是多练习几次,就会比较熟悉. 不需要我们每次都去修改代码,构建docker,上传仓库.
在这个过程中,我们只需要对代码进行修改以及提交. 当然,docker的版本号也要修改一下, 之后就可以等待片刻,然后从仓库直接拉去容器.
简化工作流程.