yaml学习和github部署工作流记录

yaml语法

学习资料：www.cnblogs.com/wenxuehai/p...

一定要注意空格的使用！！！，在key后面和' - '后面要加空格，tab是不行的

对象语法

yml 复制代码

key: 
    name: value1
    age: value2

数组语法

yml 复制代码

- val1
- val2
- val3

数组对象

yml 复制代码

alan:
 - name
    - age
    - height
july:
    - name
    - age
    - heigth

引用

yml 复制代码

name: 21
childname: ${name}

github workflow

学习资料:

阮一峰github actions: www.ruanyifeng.com/blog/2019/0...

部署上线一个简单的github-vue

在根目录文件创建.github/workflow/vue3.yml 这样就可以开始我们的第一个工作流，一个项目可以有多个工作流 ,但是只能有一个git多个工作流是多线程执行的,如果使用VScode进行编写的话可以使用这个拓展提升开发体验

工作流分为三个流程

name

on

jobs

name

就是此工作流的名字，开始我们的第一步

yml 复制代码

name: vue3-test build

on

选择在哪个分支进行 git Actions 是一个数组这里，因此可以选择多个branch， workflow_dispatch 是允许gitActions选项卡进行手动执行此工作流，为了方便调试

yml 复制代码

on:
   push:
       branch: 
              - "your branch"
       workflow_dispatch:

jobs

这一段是主体也是最重要的一部分,这里分为两个流程一个是build一个是deploy，我们逐行来了解一下

yml 复制代码

jobs: 
  # 构建工作
  build: 
    # 运行环境
      runs-on: ubuntu-latest
      steps:
        - name: Checkout
          uses: actions/checkout@v4
          with:
            persist-credentials: false
        # 指定一下node版本，这里用node20
        - name: Setup pnpm
          uses: pnpm/action-setup@v3
          with:
            version: 8
        - name: Setup Node
          uses: actions/setup-node@v4
          with:
            node-version: 20
            cache: pnpm
        # 此项用户支持使用gitPage操作，如果不使用 不写即可
          - name: Setup Pages
            uses: actions/configure-pages@v4
        # 下载依赖
        - name: ⏬ Install dependencies
          run: pnpm run install:template
        # 打包构建
        - name: 📦 Build
          run: pnpm run build:template
        # 此项用于支持gitPage操作，用户上传dist文件夹
          - name: Upload dist
            uses: actions/upload-pages-artifact@v1
            with:
              path: dist
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

build

runs-on这里代表运行环境，最好选用ubuntu-latest

ubuntu-latest，ubuntu-18.04或ubuntu-16.04

windows-latest，windows-2019或windows-2016

macOS-latest或macOS-10.14

setps后面就是要进行的步骤，其实就是和我们在git clone下项目后要进行的一些操作,比如

npm i

npm run build

在此之前先把系统的环境配好

yml 复制代码

      steps:
      # 检查源码
        - name: Checkout
          uses: actions/checkout@v4
          with:
            persist-credentials: false
        # 如果这里使用pnpm要单独引入pnpm 最高版本为v3
          # - name: Setup pnpm
          #   uses: pnpm/action-setup@v3
          #   with:
          #    version: 8
          # - uses: oven-sh/setup-bun@v1 # 如果使用 Bun，请取消注释
        # 指定一下node版本，这里用node20
        - name: Setup Node
          uses: actions/setup-node@v4
          with:
            node-version: 20
            cache: npm # pnpm 或者 yarn
          # 此项用户支持使用gitPage操作，用于初始化gitPages如果不使用不写即可
        - name: Setup Pages
          uses: actions/configure-pages@v4

接着就是构建流程

注意⚠️：这里是run 不是 uses 要分清，

注意⚠️：这里可以去run自己在package.json写的scripts脚本，执行目录为根目录

yml 复制代码

        # 下载依赖
        - name: ⏬ Install dependencies
          run: npm install
        # 打包构建
        - name: 📦 Build
          run: npm run build
        # 此项用于支持gitPage操作，将打包产物dist文件夹进行上传
          - name: Upload dist
            uses: actions/upload-pages-artifact@v1
            with:
              path: dist

进行到这里所有的构建流程已经结束

deploy

deploy就是部署流程，这里大家直接复制黏贴就好，记得取settings去开启gitActions和gitPages

yml 复制代码

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4