Github Actions简单部署一个vue/react项目

Posted 陌上兮月

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Github Actions简单部署一个vue/react项目相关的知识,希望对你有一定的参考价值。

大体介绍

本文对github actions部署前端项目做一个简单的总结,总体来说,我感觉用它想要部署一个前端项目,可以说非常简单,简单得令人震惊??。但是高度的封装,会让人没有那种以前travis书写shell的畅快体验感。

不过这也是github actions的初衷所在:开发者不用自己写很多脚本,而是直接拿别人写好的action,经过自己的搭配组合,形成自己项目的脚本。 所以从其诞生来说,就是为了共享而生,如果你无法忍受你的脚本里出现什么Bob、Nancy、Jack这样的字眼,选择自己手撸,那也就意味着你放弃了github actions的优势。

所以,这是一种天生的拿来主义,你可以在市场marketplace里自由挑选,搭配组合。

给项目一个token??

首先我们需要给即将开启github actions的项目一个token,这步操作的目的是给shell脚本的一些行为授权,正所谓没有规矩不成方圆,试想一下,假设有很多人都能向一个项目推送代码,假设某个小子突然有一天推送了一个脚本,这个脚本的目的是为了删除项目,然后项目真的被删除了,其他人都没得玩了。

所以这里必须要有一个授权的过程:只有该github所有者的做了某一步只能他自己完成的操作,给项目颁发了一个具有某些权限的令牌(权限完全由所有者配置),该项目的脚本拿到这个令牌,才能做一些权限内的事情。

首先进入github主页-->Settings-->Developer settings-->Personal access tokens-->Generate new token生成token,注意这里会让你输入密码,这就是为什么说这个授权的操作只能由github所有者本人来完成。

技术图片

生成token时,你可以自由配置这个token所拥有的权限,勾选??得越多,这个token权限越高,像一个持续集成部署的token,我并不希望它拥有过多的权限,所以只勾选了repo项目基础权限和workflow工作流权限,足矣。

技术图片

生成token后,复制它,然后切换到你希望开启github actions的项目目录中,依次点击该项目的Settings-->Secrets-->New Secrets技术图片

将刚刚复制的token粘贴进去,并取一个名字,保存。一般这种大家都很喜欢叫ACCESS_TOKEN。当然喜欢叫其他的名字也可以,但是后面的脚本也要跟着改。 技术图片`

配置项目路径

关于如何创建一个react/vue项目,这里不再赘述,因为这确实属于非常基础的操作了。我们打开项目的package.json,配置一下项目地址。这一步的操作是为了确定?项目的根目录,项目在加载jscss等资源文件时能引用到正确的路径。

技术图片

格式为:https://[你的github用户名].github.io/[你的项目名]。对照着图中改一下即可。

为项目开启actions

将上一步配置好的项目路径推送到远程,进入项目主页,可以看到一个很醒目的Actions。

技术图片

点击Actions-->set up a workflow yourself,就会进入到一个yml文件的编辑页面,这个脚本默认放在项目根目录/.github/workflows/下面,然后书写以下脚本:

name: CI
on:
  push:
    branches:
      - master

jobs:
  main:
    runs-on: ubuntu-latest
    steps:
    - 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-script build
     
    # react项目的FOLDER为build,vue项目改为dist   
    - name: Deploy
      uses: JamesIves/github-pages-deploy-action@releases/v3
      with:
        ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
        BRANCH: gh-pages
        FOLDER: build

首先我们形成一个基本的观念,对于一个workflow来说,从大到小可以按以下划分: workflow(最大) --> job --> step --> action(最小)

然后依次解释一下这个shell脚本。

  1. name。这个工作流的名称,没什么好说的。
name: CI
  1. on。定义工作流触发的时机,这里表示master分支有push事件时,本工作流会触发。
on:
  push:
    branches:
      - master
  1. jobs。表示任务,可以有多个任务,注意?,如果不特殊指定,?多个任务默认是同时执行的,我们可以通过设定needs来控制执行顺序,如下面的shell脚本,表示当first job执行完后才执行second job
jobs:
  first_job: 
  
  second_job:
    needs: first_job

而对于当前项目来说,拆分多个job感觉有点没必要,因为一共也就才那么几行shell脚本,我们写在一个job里面就好。

  1. runs-on,指定这个工作流会运行在哪个虚拟机,可选windowsmacosubuntu,除了辣鸡windows,其他两个都可以,默认的是ubuntu
runs-on: ubuntu-latest
  1. steps表示当前任务下的步骤,一个或多个都可以,从上到下依次执行。每个step可指定以下字段:
  • name 步骤名
  • run 步骤执行的命令
  • env 步骤所需环境
  • uses 步骤使用的actions,可以是一个或多个
steps:
- 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-script build
    
# react项目的FOLDER为build,vue项目改为dist       
- name: Deploy
  uses: JamesIves/github-pages-deploy-action@releases/v3
  with:
    ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}
    BRANCH: gh-pages
    FOLDER: build

这里首先第一步为Checkout,用到了一个checkoutaction,其作用是拉取你的代码;

第二步为Install and Build,其作用就是安装依赖、打包。

第三步为Deploy,用到了一个名叫JamesIves写的action,我们传入一些基本配置,比如权限钥匙??ACCESS_TOKEN,要推送的分支BRANCH,取打包好的静态文件目录FOLDER

注意??:shell脚本文件是严格缩进的,因为它需要根据空格个数来区分数据结构。如果你的脚本运行报错了,首先检查一下shell的缩进是否正确。

写在最后

在master分支提交脚本后,等待工作流??跑完(工作流流水线和日志可点击项目的Actions入口进入查看)。

技术图片

打开之前在package.json文件书写homepage地址,即可看到如下效果:

技术图片

 

以上是关于Github Actions简单部署一个vue/react项目的主要内容,如果未能解决你的问题,请参考以下文章

Github Actions - 更新 HTML 文件

GitHub Actions 完成CI CD

GitHub Actions 部署构建时出现错误

是否可以在 GitHub Actions 中的 Actions 之间保留 WORKDIR?

在 Github Actions 中创建动态密钥名称

Github Actions Artifact 在 Azure Web Apps 中部署需要花费很多时间