GitHub Action实操之Vue Demo

上次《GitHub Action初探》只是简单的说明了下大概,这次是演示如何使用 GitHub Actions 自动发布一个 Vue 应用到 GitHub Pages。

代码我已经托管到GitHub上了,文末会放出。

准备

先在GitHub上建一个仓库吧,例如我这里建的名称是github-actions-demo,然后再建立一个以gh-pages的分支,我们会把自动打包的文件,放在这个分支上。

然后,建立一个Vue的项目,我这里用的是脚手架搭的。

2020-07-21T07:37:29.png

然后,需要生成一个令牌,后期要用。GitHub现在的链接是这个:https://github.com/settings/tokens,不过不保证后期地址会变。

2020-07-21T07:43:05.png

2020-07-21T07:43:53.png

2020-07-21T07:44:26.png

Note 最好见名识意,然后 repo 务必要勾选上,生成完代码后,复制出来,以后就不会再显示了。

2020-07-21T07:46:43.png

然后到Settings中去把刚才的密钥填进去,名字配置为ACCESS_TOKEN和下面的代码中要对应。

2020-07-22T01:35:22.png

2020-07-22T01:36:51.png

开始

在根目录,建立一个.github/workflows的文件夹,然后新建一个以.yml的文件,我这里随便起的名字:build-deploy.yml

代码这里我补充了注释,基本上都能看明白,并且也把Vue/React单独标识出来:

# name字段是 workflow 的名称
name: GitHub Actions Build and Deploy Demo
# on字段指定触发 workflow 的条件,通常是某些事件
# 这里的触发条件是push代码到master的时候触发
on:
  push:
    branches:
      - master
# workflow 文件的主体是jobs字段,表示要执行的一项或多项任务
jobs:
  main:
    # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下:ubuntu-latest,windows-latest,macOS-latest
    runs-on: ubuntu-latest
    # steps字段指定每个 Job 的运行步骤,可以包含一个或多个步骤
    steps:
      # 获取源码,使用的 action 是actions/checkout
    - name: Checkout
      uses: actions/checkout@v2
      with:
        persist-credentials: false
        
    # react项目为npm run-script build,vue项目改为npm run build
    - name: Install and Build
      #构建脚本
      run: |
        npm install
        npm run build
     
    # 构建和部署,使用的 action 是JamesIves/github-pages-deploy-action
    # react项目的FOLDER为build,vue项目改为dist
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        # GitHub 密钥
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        # 发布分支
        BRANCH: gh-pages
        # 构建成果所在目录
        FOLDER: dist

构建

每次 push 代码后,都会自动执行,http://blog.wangdaodao.com/github-actions-demo

2020-07-21T08:08:12.png

结尾

失败是成功之母,多次尝试就没啥问题,你看我都失败了多少次:

2020-07-21T07:57:39.png

放出来demo地址,欢迎 Fork,后期会写一个 action 自动发布 NPM 包的教程,这样以来,每次发布都省事了……

另外,国内网络对于GitHub访问是有点慢的,所以,这里也可用把打包好的文件,推送到coding上。

github-actions-demo
github-actions-demo
Owner:wangdaodao
Updated:2022-08-21 16:26
Watch:0
Star:0
Fork:1

添加新评论