前言
这是我的 模仿抖音 系列文章的第五篇：这篇我们讲解如何用 Github Actions 自动化实现打包、发布、翻译等任务
第一篇：200行代码实现类似Swiper.js的轮播组件
第二篇：实现抖音 “视频无限滑动“效果
第三篇：Vue 路由使用介绍以及添加转场动画
第四篇：Vue 有条件路由缓存，就像传统新闻网站一样
Github Actions
GitHub Actions 是 GitHub 的持续集成服务，可用于自动执行生成、测试和部署，非常强大
GitHub 还允许开发者将自己的脚本，放到代码仓库，供其他开发者引用。如果你需要某个 action，不必自己写复杂的脚本，直接引用他人写好的 action 即可，整个持续集成过程，就变成了一个 actions 的组合。这就是 GitHub Actions 最特别的地方
GitHub 做了一个官方市场，可以搜索到他人提交的 actions。另外，还有一个 awesome actions 的仓库，也可以找到不少 action
基本概念
GitHub Actions 有一些自己的术语。
- workflow （工作流程）：持续集成一次运行的过程，就是一个 workflow
- job （任务）：一个 workflow 由一个或多个 jobs 构成，含义是一次持续集成的运行，可以完成多个任务
- step（步骤）：每个 job 由多个 step 构成，一步步完成
- action （动作）：每个 step 可以依次执行一个或多个命令（action）
workflow 文件
GitHub Actions 的配置文件叫做 workflow 文件，存放在代码仓库的 项目根目录 > .github > workflows 目录，如果你的项目没有这两个目录(默认是没有的)，则需要自行创建，如果有可以跳过这一步
workflow 文件采用 YAML 格式，文件名可以任意取，但是后缀名统一为.yml，比如foo.yml。一个库可以有多个 workflow 文件
Github 会自动读取这个目录下的文件，根据其规则自动运行该文件，所以你想要执行哪个脚本，放在这个目录下，写好执行规则（设置好条件为条件触发或是手动触发），推送到 Github 就行了
workflow 文件的配置字段非常多，这里介绍一下 on 字段，on 字段指定触发 workflow 的条件，通常是某些事件，也可以设置为仅手动触发
on:
# 仅在推送到默认分支时运行。
push:
branches: [ 'master' ]
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
其他字段详见阮一峰的这篇文章：GitHub Actions 入门教程
自动部署 Github Pages
Github Pages 有两种使用方式
提示：只是部署 Github Pages 的话， 无须 key 、 token 之类的，直接复制我的脚本代码就可以了，网上有的老教程还需要 token ....
其他的 Actions 需要什么key 、token 的时候我会特别标注
一、自动打包并部署，不需要打包后的文件。Source 设置为 Github Actions
适用于只使用 Github Pages 的用户
脚本代码
这份脚本代码 不需要设置任何变量，直接复制就能用。
如果你的打包目录是不是 dist，不是的话要改成你的
如果你不需要 pnpm，可以把 Install pnpm 这一步去掉，并把后面的 pnpm 改成 npm
name: Deploy Github Pages1
on:
# 仅在推送到默认分支时运行。
push:
branches: [ 'master' ]
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
contents: write
pages: write
id-token: write
jobs:
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm run build
- name: Setup Pages
uses: actions/configure-pages@v3
- name: Upload artifact
uses: actions/upload-pages-artifact@v1
with:
# Upload dist repository
path: './dist'
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v1
一、设置 Pages 来源
在仓库设置的 Pages 功能里，将其 Source 设置为 Github Actions
二、推送脚本
将脚本放到 项目根目录 > .github > workflows 目录下并推送到 Github，脚本会自动运行
三、查看脚本是否成功执行
点到仓库的 Actions 界面，就可以看到我们所有的 Actions 脚本，和脚本运行状态，点进每个任务里面可以查看运行详细流程和重新运行脚本(需要在脚本里面声明 workflow_dispatch) ，如果没报错，就可以去项目 Setting 里面查看 Github Pages 的地址了
四、查看 Github Pages 访问地址
二、自动打包，将打包后的文件推送到指定分支。Source 需要设置为 Deploy from a branch
适用于同时需要使用 Gitee Pages 的用户
这种方式可以把 Github Pages 想象成 nginx，指定的某个分支便是 nginx 的项目目录。当我们打包后，Ations 把打包文件放到指定分支，我们就能访问了。同时当我们同步代码到 Gitee 时，也会把所有分支的代码同步过去，Gitee 也可以部署 Pages
我们需要打包后生成的文件，则需要用到 peaceiris/actions-gh-pages@v4 这个 Actions，它可以将打包后的文件推送到指定分支
脚本代码
这份脚本代码 不需要设置任何变量，直接复制就可以用，里面的GITHUB_TOKEN不需要我们去定义，Actions 会处理。
同样要注意你的打包目录是不是 dist，不是的话要改成你的，另外脚本里面默认将打包文件推送到 gh-pages 分支，可以自定义
name: Deploy GitHub Pages2
on:
# 仅在推送到默认分支时运行。
push:
branches: [ 'master' ]
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages。
permissions:
contents: write
pages: write
id-token: write
jobs:
# 单次部署的工作描述
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Install pnpm
uses: pnpm/action-setup@v2
with:
version: 8
- name: Set up Node
uses: actions/setup-node@v3
with:
node-version: 18
cache: 'pnpm'
- name: Install dependencies
run: pnpm install
- name: Build
run: pnpm run build
- name: Deploy to Github Pages
uses: peaceiris/actions-gh-pages@v4
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
publish_branch: gh-pages
一、创建 gh-pages 分支， 设置 Pages 来源
创建一个用于存放打包文件的分支 gh-pages，并在仓库设置的 Pages 选择里面，将 Source 设置为 Deploy from a branch ，然后将 Branch 选项设置为刚刚创建的分支，最后点击 Save 保存
二、推送脚本
将脚本放到 项目根目录 > .github > workflows 目录下并推送到 Github，脚本会自动运行
三、查看脚本是否成功执行
等 Actions 执行完了，刷新一下项目，会发现多了一个分支
四、查看 Github Pages 访问地址
同第一种方式，这里不在赘述
同步代码到 Gitee
脚本代码
需要用下面这个 Actions，它是专门用于同步代码到 Gitee 的。
我们只需把下面代码添加到 “自动部署 Github Pages” 第二种方式的脚本代码后面就可以了
- name: Sync to Gitee
uses: wearerequired/git-mirror-action@master
env:
// ssh 私钥
SSH_PRIVATE_KEY: ${{ secrets.GITEE_PRIVATE_KEY }}
with:
// 仓库源地址
source-repo: git@github.com:zyronon/douyin.git
// gitee 的仓库地址
destination-repo: git@gitee.com:zyronon/douyin.git
同步到 Gitee 需要配置 SSH Key ，即私钥和公钥，如何生成 SSH Key ？参考这篇文章
生成
SSH key的命令：ssh-keygen -t ed25519 -C "your_email@example.com"
生成的 SSH Key 默认在 C 盘的用户目录下的 .ssh 目录下
比如说你的用户名叫：abc，就是 C:\Users\abc/.ssh/ 目录
一、Github 项目中添加私钥
在 Github 的 项目设置 里面添加一个 Actions 的 secrets ，名字叫 GITEE_PRIVATE_KEY，内容是我们生成的私钥
注意：复制私钥的时候，要把开头结尾的内容也加上。
-----BEGIN OPENSSH PRIVATE KEY-----
-----END OPENSSH PRIVATE KEY-----
二、Github 个人设置里面添加公钥
在 Github 的 个人设置 里面添加一个公钥 ，名字叫 GITEE_PUB_KEY，内容是我们生成的公钥
三、Gitee 个人设置里面添加公钥
同第二步，名字也叫 GITEE_PUB_KEY，内容也是我们生成的公钥
四、将脚本推送到 Github
把脚本代码复制到 项目根目录 > .github > workflows 目录下并推送到 Github，等待执行结果即可
自动部署 Gitee Pages
截至写稿日期：2024/5/7 ，Gitee Pages 一直无法使用中，据说是下线了😅
不过我还是决定把教程分享出来，说不定以后又可以使用了
脚本代码
在上一个 Actions 中，我们已经把代码同步到 Gitee 了，现在只需要在脚本后面添加触发 Gitee Pages 部署的代码就可以了
里面用到 yanglbme/gitee-pages-action@main 这个 Actions ，它是专门用于触发 Gitee Pages 部署的
- name: Build Gitee Pages
uses: yanglbme/gitee-pages-action@main
with:
# 注意替换为你的 Gitee 用户名
gitee-username: zyronon
# 注意在 Settings->Secrets 配置 GITEE_PASSWORD
gitee-password: ${{ secrets.GITEE_PASSWORD }}
# 注意替换为你的 Gitee 仓库，仓库名严格区分大小写，请准确填写，否则会出错
gitee-repo: zyronon/douyin
# 要部署的分支，默认是 master，若是其他分支，则需要指定（指定的分支必须存在）
branch: gitee-pages
我们需要在项目里面配置一个 GITEE_PASSWORD 变量，值是你 Gitee 的密码，配置过程和前面的一样，这里不再赘述
然后推送到 Github ，等待执行结果即可
绕过 Gitee Pages 审核
当部署时， Gitee Pages 会对所有内容审查，不符合要求的会被拒绝。
像我这个 模仿抖音 的项目，里面的 json 数据总是被提醒有敏感内容，我一个 json 4M多，我怎么改啊 - -
后面我新建了一个项目，里面放了一些 zip 文件，发现 Github Pages 不会审查，但同时也会被过滤掉，它似乎是白名单机制，只允许指定后缀的文件
然后我又试了一试，把 json 压缩成 zip 包后，修改文件后缀为 md，伪装成是个 markdown 文件，部署试了试，果然没问题，直接跳过了审查
问题来了，前端怎么把压缩包解压呢？？？
libarchive-wasm 库
这里给大家介绍一个库 libarchive-wasm，这个库可以解压 zip 、 7z 等格式
我这里写一个工具方法 _fetch，代替 fetch 使用，如果你用 axios ，原理也差不多
import { ArchiveReader, libarchiveWasm } from 'libarchive-wasm'
/**
* 逃避国内某pages审查，因为json文件被提示有违禁词，json压缩成7z文件，7z和zip文件被屏蔽了，所以7z重命名为md
* @param url
* @returns Promise<{ json(): Promise<any> } | Response>
* @privateF
*/
export async function _fetch(url: string): Promise<{ json(): Promise<any> } | Response> {
// 判断是否是开发环境或者 是否是 Gitee Pages 环境
if (IS_DEV || !IS_GITEE_PAGES) {
url = url.replace('.md', '.json')
return fetch(url)
} else {
// eslint-disable-next-line no-async-promise-executor
return new Promise(async (resolve) => {
const r = await fetch(url)
if (url.includes('.md')) {
const data = await r.arrayBuffer()
const mod = await libarchiveWasm()
const reader = new ArchiveReader(mod, new Int8Array(data))
for (const entry of reader.entries()) {
if (entry.getPathname().endsWith('.json')) {
const data = new TextDecoder().decode(entry.readData())
resolve({
json() {
return Promise.resolve(JSON.parse(data))
}
})
}
}
reader.free()
} else {
resolve(r)
}
})
}
}
同时需要在 public 目录下放 libarchive.wasm 这个文件，😅😅😅 作者也没说要放，但不放无法解压！
这个文件在 node_modules 下面，复制出来放在 public 目录下就可以了
翻译 README.MD
直接用下面这个脚本就行，要什么语言自己在里面加
语言代码: cloud.google.com/translate/d…
无需其他步骤，直接复制到目录下，推送到 Github 就可以用，需注意这个脚本我设置为了 手动触发
name: Translate README
on:
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: 12.x
# ISO Langusge Codes: https://cloud.google.com/translate/docs/languages
- name: Adding README - English
uses: dephraiim/translate-readme@main
with:
LANG: en
- name: Adding README - Japanese
uses: dephraiim/translate-readme@main
with:
LANG: ja
- name: Adding README - German
uses: dephraiim/translate-readme@main
with:
LANG: de
- name: Adding README - French
uses: dephraiim/translate-readme@main
with:
LANG: fr
- name: Adding README - Spanish
uses: dephraiim/translate-readme@main
with:
LANG: es
打包 docker 镜像
脚本代码
name: Docker Image CI
on:
push:
tags:
- v*
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: get version
id: vars
run: echo ::set-output name=version::${GITHUB_REF/refs/tags/v/}
- uses: actions/checkout@v4
- name: set up QEMU
uses: docker/setup-qemu-action@v3
- name: set up docker buildx
uses: docker/setup-buildx-action@v3
- name: login ghrc hub
uses: docker/login-action@v3
with:
registry: ghcr.io
username: ${{ github.repository_owner }}
password: ${{ secrets.GHCR_TOKEN }}
- name: build and push
uses: docker/build-push-action@v5
with:
push: true
platforms: linux/amd64,linux/arm64
tags: |
ghcr.io/${{ github.repository_owner }}/你的项目名（或者你想取的镜像名）:${{ steps.vars.outputs.version }}
ghcr.io/${{ github.repository_owner }}/你的项目名（或者你想取的镜像名）:latest
设置 GHCR_TOKEN
需要注意的是，里面的 GHCR_TOKEN 变量，同样需要自己在项目里面添加，同前面一样，这里不在赘述
GHCR_TOKEN 变量的值是你自己 Github 账号的 token，需要在个人设置里面生成一个token ，最好选择 Generate new token (classic)，把权限都够选上，设置 token不过期
设置链接：github.com/settings/to…
Dockerfile
Dockerfile 是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明。
我们可以安装在 www.docker.com/ 安装 docker desktop 来本地构建镜像，本地没问题再推送到 Github 上
Dockerfile文件代码
# syntax = docker/dockerfile:experimental
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} node:20-buster AS builder
WORKDIR /src
COPY ./ ./
RUN npm install
RUN npm run build
FROM --platform=${BUILDPLATFORM:-linux/amd64,linux/arm64} ghcr.io/rookie-luochao/nginx-runner:latest
COPY --from=builder /src/dist /app
推送到 Github
和前面一样，推送到 Github 就可以了，不过这次比较特别，我们写的触发时机是当有 git tag 推送时才会触发
因为 docker 镜像一般都需要版本号，所以触发工作流的时机为打 tag 触发 docker 镜像构建
on:
push:
tags:
- v*
# 这个选项可以使你手动在 Action tab 页面触发工作流
workflow_dispatch:
所以这次推送上去，并不会触发 Actions 运行。如果我们手动去运行 Actions 的话会报错， 因为找不到 git tag
所以需要在本地新建一个 tag ，推送到 github 上后，Actions 才会执行
排坑
我之前在本地构建镜像每次都成功，但在 Github Actions 执行时的容器里，一直报错
参考我前面写的这篇文章：我发现了 Vite 的一个 Bug
发布 docker 镜像
如果我们的 Github Actions 执行成功没报错的话，那么在我们个人主页的 Pageages 这个页面下，就会看到一个 docker 镜像
注意：镜像第一次推送到 ghrc 时，默认是私有的，别人是无法 pull 的，还需要我们点进去把权限改为 Public
docker 镜像地址为：ghcr.io/你的github用户名/项目名:latest
例如：
# pull Docker image
docker pull ghcr.io/zyronon/douyin-vue:latest
# start container, nginx reverse proxy custom port, for example: docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
docker run -d -p 80:80 ghcr.io/zyronon/douyin-vue:latest
结束
以上就是文章的全部内容，感谢看到这里，希望对你有所帮助或启发！创作不易，如果觉得文章写得不错，可以点赞收藏支持一下，我会更新更多实用的前端知识与技巧，期待与你共同成长~
