Gitea Actions/Github Actions 构建 Vue3 多平台 Docker 镜像
借助 Gitea Actions/Github Actions 实现发布版本后,自动打包 Vue3 项目并构建成 Docker 镜像,推送到阿里云 Docker 仓库中
一、准备Vue3项目
自行参考 Vuejs Docs
二、准备docker相关文件
在根目录新建docker
文件夹,并保存ui.conf
和Dockerfile
两个文件,文件内容如下
ui.conf
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
| 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
1 2 3 4 5 6 7 8 9
| 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 中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33
| name: Build Image
on: push: tags: - v*
env: 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 进行工作,最终执行完成后将会推送构建成功的消息到企业微信中,消息为
1 2
| springboot-demo构建成功。 镜像: registry.cn-hangzhou.aliyuncs.com/seepine/vue-demo:1.0.0
|
五、运行
1
| docker run -p 80:80 registry.cn-hangzhou.aliyuncs.com/seepine/vue-demo:1.0.0
|