GitHub Action持续集成服务,目前已经免费开放使用,由于大部分人的个人项目都是放在Github上,那么使用它来发布、测试、部署,是非常方便的。

最近写了一个基于Vue3 + Vant4 的移动端模板,由于每次想查看线上效果都要手动去打包部署,就去学习了一下Github actions 自动打包发布 项目地址 欢迎 star (_)

如果对 Github actions 还不了解的可以看一下阮一峰老师这篇文档 参考文档

修改部署配置

  1. 在package.json中添加一个homepage字段
"homepage": "https://[username].github.io/github-actions-demo"
  • 将[username]替换成你的 GitHub 用户名
  1. 在vite.config.ts中修改base
export default ({ mode }) => defineConfig({
  base: mode === 'production' ? '/vue3-vite-vant-h5-template/' : '/',
})
  • 这需要注意一下,由于github pages默认的地址是包含子目录的,所以我这这需要指定一下 base 的路径为我们的项目名。

配置文件

  1. 在这个仓库的.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 # 这里填打包好的目录名称
  1. 同步 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 环境变量

  1. 进入到仓库点击 Settings

github android 开机自启_前端

  1. 展开 secrets 项 点击 actions

github android 开机自启_git_02

  1. 点击 New repository secret 按钮

github android 开机自启_h5_03

  1. 输入名称和值后点击 Add secret 按钮

github android 开机自启_github android 开机自启_04

生成密钥并配置

  1. 在命令行终端或 Git Bash 使用命令 ssh-keygen -t rsa -C “huangwantong@example.com” 生成 SSH Key,注意替换为自己的邮箱。生成的 id_rsa 是私钥,id_rsa.pub 是公钥。(⚠️注意此处不要设置密码,一路回车即可,生成的公私钥用于下面 GitHub / Gitee 的配置,以保证公私钥成对,否则从 GitHub -> Gitee 的同步将会失败。)

github android 开机自启_前端_05

  1. 根据上面设置环境变量的方式设置需要的变量即可,以上面的同步gitee为例,在 GitHub 上设置 GITEE_PRIVATE_KEY 存放 id_rsa 私钥,然后在 Gitee 上设置SSH公钥,也就是 id_rsa.pub 文件离的内容

github android 开机自启_github_06

完。。。