title: Gitea Actions/Github Actions 构建 Vue3 多平台 Docker 镜像
description: 借助 Gitea Actions/Github Actions 实现发布版本后，自动打包 Vue3 项目并构建成 Docker 镜像，推送到阿里云 Docker 仓库中
date: 2023-03-25 16:37:26
categories:

• git
• gitea

tags:
- git
- gitea
- gitea actions
- vue3
- vite
- docker image

借助 Gitea Actions/Github Actions 实现发布版本后，自动打包 Vue3 项目并构建成 Docker 镜像，推送到阿里云 Docker 仓库中

一、准备Vue3项目

自行参考 Vuejs Docs

二、准备docker相关文件

在根目录新建docker文件夹，并保存ui.conf和Dockerfile两个文件，文件内容如下

ui.conf

server {
    listen ${LISTEN_PORT};
    server_name ${SERVER_NAME};
    gzip on;
    gzip_static on;
    gzip_min_length 1k;
    gzip_comp_level 4;
    gzip_proxied any;
    gzip_types text/plain text/xml text/css;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.(?!.*SV1)";

    location / {
       root /html;
       index index.html;
       try_files $uri $uri/ /index.html;
    }
}

Dockerfile

FROM nginx

COPY ./dist/ /html
RUN chmod -R 755 /html

ENV LISTEN_PORT=80\
 SERVER_NAME=localhost

ADD ./docker/ui.conf /etc/nginx/templates/default.conf.template

三、准备build.yaml

新建.gitea/workflows/build.yaml文件
需要提前配置 Docker 仓库的密码到 Secrets 中，若需要企业微信通知，也需要配置企业微信机器人的 WebHook 到 Secrets 中。

name: Build Image

# 打标签时触发构建，另外标签需v开头，例如v1.0.0，同时需要配置 DOCKER_PASSWORD 的 secrets
# 构建后镜像为 ${docker_registry}/${docker_username}/${repo_name}:1.0.0
on:
  push:
    tags:
      - v*

env:      
  # 此处可修改为你任意 docker 镜像仓库地址和用户名
  DOCKER_REGISTRY: registry.cn-hangzhou.aliyuncs.com
  DOCKER_USERNAME: seepine

jobs:
  build-image:
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup Pnpm and Install
        uses: seepine/action-setup-pnpm@v1

      - name: Docker build push
        uses: seepine/action-docker-build-push@v1
        with:
          registry: ${{ env.DOCKER_REGISTRY }}
          username: ${{ env.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKER_PASSWORD }}
          file: docker/Dockerfile
          platforms: linux/amd64,linux/arm64

四、发布版本

当我们发布一个 v1.0.0 版本时，将会看到 Actions 进行工作，最终执行完成后将会推送构建成功的消息到企业微信中，消息为

springboot-demo构建成功。
镜像: registry.cn-hangzhou.aliyuncs.com/seepine/vue-demo:1.0.0

五、运行

docker run -p 80:80 registry.cn-hangzhou.aliyuncs.com/seepine/vue-demo:1.0.0