GitHub Action持续集成服务,目前已经免费开放使用,由于大部分人的个人项目都是放在Github上,那么使用它来发布、测试、部署,是非常方便的。
最近写了一个基于Vue3 + Vant4 的移动端模板,由于每次想查看线上效果都要手动去打包部署,就去学习了一下Github actions 自动打包发布 项目地址 欢迎 star (_)
如果对 Github actions 还不了解的可以看一下阮一峰老师这篇文档 参考文档
修改部署配置
- 在package.json中添加一个homepage字段
"homepage": "https://[username].github.io/github-actions-demo"
- 将[username]替换成你的 GitHub 用户名
- 在vite.config.ts中修改base
export default ({ mode }) => defineConfig({
base: mode === 'production' ? '/vue3-vite-vant-h5-template/' : '/',
})
- 这需要注意一下,由于github pages默认的地址是包含子目录的,所以我这这需要指定一下 base 的路径为我们的项目名。
配置文件
- 在这个仓库的.github/workflows目录,生成一个 workflow 文件,名字可以随便取,这个示例是ci.yml
# ci.yml
name: Vue3 Vite Vant H5 Template
on:
push:
branches:
- main
jobs:
build-and-deploy:
concurrency: ci-${{ github.ref }}
runs-on: ubuntu-latest
steps:
- name: Checkout 🛎️ # 将代码拉取到虚拟机
uses: actions/checkout@v3
- name: Install and Build 🔧 # 安装依赖、打包,如果提前已打包好无需这一步
run: |
npm install
npm run build
- name: Deploy 🚀 # 部署
uses: JamesIves/github-pages-deploy-action@v4.3.3
with:
branch: gh-pages # 部署后提交到那个分支
folder: dist # 这里填打包好的目录名称
- 同步 gitee
在.github/workflows目录下新建一个 sync-gitee.yml 文件
name: Sync to Gitee
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Sync to Gitee
uses: wearerequired/git-mirror-action@master
env:
# 在 Settings->Secrets
SSH_PRIVATE_KEY: ${{ secrets.GITEE_PRIVATE_KEY }}
with:
# GitHub 源仓库地址
source-repo: git@github.com:java0088/vue3-vite-vant-h5-template.git
# Gitee 目标仓库地址
destination-repo: git@gitee.com:huangwantong/vue3-vite-vant-h5-template.git
# - name: Build Gitee Pages # 部署 gitee pages 因为已经部署了github所以就没必要了
# uses: yanglbme/gitee-pages-action@master
# with:
# # 注意替换为你的 Gitee 用户名
# gitee-username: huangwantong
# # 注意在 Settings->Secrets 配置 GITEE_PASSWORD
# gitee-password: ${{ secrets.GITEE_PASSWORD }}
# # 注意替换为你的 Gitee 仓库
# gitee-repo: vue3-vite-vant-h5-template
# branch: gh-pages
设置Github secrets 环境变量
- 进入到仓库点击 Settings
- 展开 secrets 项 点击 actions
- 点击 New repository secret 按钮
- 输入名称和值后点击 Add secret 按钮
生成密钥并配置
- 在命令行终端或 Git Bash 使用命令 ssh-keygen -t rsa -C “huangwantong@example.com” 生成 SSH Key,注意替换为自己的邮箱。生成的 id_rsa 是私钥,id_rsa.pub 是公钥。(⚠️注意此处不要设置密码,一路回车即可,生成的公私钥用于下面 GitHub / Gitee 的配置,以保证公私钥成对,否则从 GitHub -> Gitee 的同步将会失败。)
- 根据上面设置环境变量的方式设置需要的变量即可,以上面的同步gitee为例,在 GitHub 上设置 GITEE_PRIVATE_KEY 存放 id_rsa 私钥,然后在 Gitee 上设置SSH公钥,也就是 id_rsa.pub 文件离的内容
完。。。