前端Github Actions自动化部署笔记

步骤

1. 创建一个vite vue项目

pnpm create vite githu-action-viteapp -- --template vue

2. 编写Github Actions的配置文件，在刚才创建的项目根目录下创建./github/workflow目录，github actions的配置文件是用yaml文件编写的，文件如下

# action 的名称
name: Github Actions ViteApp DEPOLY

# 触发条件：在 push 到 main 分支后
on:
  push:
    branches:
      - main

# 任务
jobs:
  build-and-deploy:
    # 服务器环境：最新版 Ubuntu
    runs-on: ubuntu-latest
    steps:
      # 拉取代码
      - name: Checkout
        uses: actions/checkout@v2
        with:
          persist-credentials: false

      # 生成静态文件
      - name: Build
        run: pnpm install && npm run build

      # 部署到 GitHub Pages
      - name: Deploy
        # 使用别人写好的一个 action
        uses: JamesIves/github-pages-deploy-action@releases/v3
        with:
          # 这里的 ACCESS_TOKEN 名字需要和下文中的相对应
          ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
          # 打包后的文件部署到哪个分支上
          BRANCH: gh-pages
          # 打包后的文件在哪里
          FOLDER: dist

可以在Github marketplace中搜索别人写好的acitions，也有别人收集的awesome-actions

3. 在该仓库中创建一个Github密钥 这里的密钥名称为ACCESS_TOKEN与2中的${{secrets.ACCESS_TOKEN}} 对应，另外需要注意的是github密钥的value只能是字母、数字或下划线，具体可以看Github Docs
4. 在Github创建一个仓库github-action-viteapp,并且把刚才的viteapp项目push到仓库中
5. 提交后，Github Actions能够自动识别项目仓库中的.github/workflow下的yaml文件，如下图所示

如果Github Actions的workflow能够执行成功的话，在仓库的Settings中可以看到部署的页面地址

注释

// Todo

参考链接

Github Actions
阮一峰的Github Actions入门教程