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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
| name: CI
on:
push:
tags:
- v*
jobs:
build-image:
runs-on: ubuntu-latest
container:
image: catthehacker/ubuntu:act-latest
volumes:
- ubuntu_dockercache:/opt/dockercache
env:
RUNNER_TOOL_CACHE: /toolcache
DOCKER_REGISTRY: registry.cn-hangzhou.aliyuncs.com
DOCKER_USERNAME: seepine
steps:
- name: Checkout
uses: actions/checkout@v3
- uses: seepine/hash-files@v1
id: get-hash
with:
patterns: |
**/package.json
**/yarn.lock
- uses: actions/cache@v3
id: cache
with:
path: node_modules
key: ${{ runner.os }}-yarn-${{ steps.get-hash.outputs.hash }}
- name: Dependent installation
if: steps.cache.outputs.cache-hit != 'true'
run: |
yarn -v || npm i -g yarn
yarn install
- name: Project Build
run: npm run build
- name: Set up QEMU
uses: docker/setup-qemu-action@v2
- name: Set up Docker BuildX
uses: docker/setup-buildx-action@v2
- name: Login to DockerHub
uses: docker/login-action@v2
with:
registry: ${{ env.DOCKER_REGISTRY }}
username: ${{ env.DOCKER_USERNAME }}
password: ${{ secrets.DOCKER_PASSWORD }}
- name: Get Meta
id: meta
run: |
echo REPO_NAME=$(echo ${GITHUB_REPOSITORY} | awk -F"/" '{print $2}') >> $GITHUB_OUTPUT
echo REPO_VERSION=$(echo ${{ github.ref }} | awk -F"/" '{print $3}' | awk -F"v" '{print $2}') >> $GITHUB_OUTPUT
- name: Build and push
uses: docker/build-push-action@v4
with:
context: .
file: ./docker/Dockerfile
platforms: |
linux/amd64
linux/arm64
push: true
tags: |
${{ env.DOCKER_REGISTRY }}/${{ env.DOCKER_USERNAME }}/${{ steps.meta.outputs.REPO_NAME }}:latest
${{ env.DOCKER_REGISTRY }}/${{ env.DOCKER_USERNAME }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}
cache-from: type=local,src=/opt/dockercache/.buildx-${{ steps.meta.outputs.REPO_NAME }}-cache
cache-to: type=local,dest=/opt/dockercache/.buildx-${{ steps.meta.outputs.REPO_NAME }}-cache-new,mode=max
- name: Rebuild docker cache
run: |
rm -rf /opt/dockercache/.buildx-${{ steps.meta.outputs.REPO_NAME }}-cache
mv /opt/dockercache/.buildx-${{ steps.meta.outputs.REPO_NAME }}-cache-new /opt/dockercache/.buildx-${{ steps.meta.outputs.REPO_NAME }}-cache
- name: WeChat Work notification
uses: seepine/action-wechat-work@master
if: ${{ env.WECHAT_WORK_BOT_WEBHOOK != '' }}
env:
WECHAT_WORK_BOT_WEBHOOK: ${{ secrets.WECHAT_WORK_BOT_WEBHOOK }}
with:
msgtype: markdown
content: "${{ steps.meta.outputs.REPO_NAME }}构建成功。\n
> 镜像: ${{ env.DOCKER_REGISTRY }}/${{ env.DOCKER_USERNAME }}/${{ steps.meta.outputs.REPO_NAME }}:${{ steps.meta.outputs.REPO_VERSION }}"
|
四、发布版本
当我们发布一个 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
|
