Github Actions 自动部署前端项目

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:vangleer/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 文件离的内容

完。。。