使用 Github Actions 部署react-app 到 Github Pages

前言-学以致用

之前一直忙于开发，总是零星的去看一些东西，想想学东西了么？额… 好像学了，又好像没有学，不知道你们有没有这种感觉，所以新年初始，换一种学习方法，本着学以致用去完好的学一些东西，正好之前想触摸CI,CD 这儿的知识，所以就从最常见的github开端吧，究竟免费又常用。

初始化项目

创建github代码库房，clone 项目到本地，进入目录初始化项目

npx create-react-app

然后依照指令提示输入完结初始化,推送项目到github。

装备github actions

方针是完结推送代码到master分支, 主动开端构建项目，布置到Gthub Pages。 依照文档先跑起来第一个流程，让自己看到作用，在去学习语法内容，这样更能激发兴趣，免得直接看文档看睡着了…

1. 在目录外层添加 .gihub/workflows文件夹，创建第一个first-demo.yml文件，拷贝示例内容.

name: GitHub Actions Demo
on: [push]
jobs:
  Explore-GitHub-Actions:
    runs-on: ubuntu-latest
    steps:
      - run: echo " The job was automatically triggered by a ${{ github.event_name }} event."
      - run: echo " This job is now running on a ${{ runner.os }} server hosted by GitHub!"
      - run: echo " The name of your branch is ${{ github.ref }} and your repository is ${{ github.repository }}."
      - name: Check out repository code
        uses: actions/checkout@v2
      - run: echo " The ${{ github.repository }} repository has been cloned to the runner."
      - run: echo "️ The workflow is now ready to test your code on the runner."
      - name: List files in the repository
        run: |
          ls ${{ github.workspace }}
      - run: echo " This job's status is ${{ job.status }}."

2. 提交代码，点击gihub库房上方的Actions按钮，检查作用，第一个作业流程就完结了。

开端编写自己的yml文件,完结主动构建

快速过一遍文档，学习一下语法，完结自己想要的作业流程。从demo能够看到主要有流程有这么几步

1. name 作业流程的称号。 GitHub 在库房的操作页面上显现作业流程的称号。
2. on 触发流程的事情，详细能够触发的事情有这些,咱们所要完结的是提交代码，所以用 push.
3. jobs 要按次序运行作业. 方针清晰后，开端编写yml

 # 显现得workflow称号
 name: First GitHub Actions Demo
 on: 
   # 推送到master分支开端打包
   push:
     branches:
       - master
 jobs:
   # 开端打包
   Build:
     runs-on: ubuntu-latest
     steps:
     - name: checkout code
       # 迁出触发的流程的版别 能让下面的作业流程拜访
       uses: actions/checkout@v2
       # setup-node 能够提供node环境，指定node版别以及 npm /yarn缓存
     - name: actions/setup-node@v2
       uses: actions/setup-node@v2   
       with:
         node: 16.14
     # 初始用的npm 打包时刻太长了，就想着用yarn 成果没仔细看文档，yarn 不用装置 ubuntu 上面有的 
     # - name: install yarn 
     #  uses: npm install yarn     
     # - run: yarn install
     # - run: yarn build
     # 简写为
     - run: yarn install && yarn build

好了提交代码看Actions（这是上面没有优化时的流程）。

到此现已完结了提交代码主动打包的进程了，但是一看打包时刻好家伙一分半，这要是实践开发大量依赖加入，那不得半个小时么？打开流程一看大部分时刻都是在下载依赖，所以是不是能够添加缓存呢？一查找公然有cache,麻溜的依照文档添加进入， 一看时刻46s,哈哈公然有用。到此yml内容为

name: First GitHub Actions Demo
on: 
  push:
    branches:
      - master
jobs:
  Build:
    runs-on: ubuntu-latest
    steps:
    - name: checkout code
      uses: actions/checkout@v2
    - name: actions/setup-node@v2
      uses: actions/setup-node@v2   
      with:
        node: 16.14
    # 装备依赖缓存
    - name: yarn cache
      id: yarn-cahce-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"
    - uses: actions/cache@v2
      id: yarn-cache
      with: 
        path: ${{ steps.yarn-cahce-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
        restore-keys: | 
          ${{ runner.os }}-yarn-
    - run: yarn install && yarn build

布置页面到Github Pages

1. 首要需求设定一个分支，作为站点的根目录，详细设置文档，设置完结后会告诉你网站拜访地址（ps: 一定要把库房设置为Public,否则无法进行设置）。

2. 依照文档编辑.yml,添加发布流程

 # 上面的步骤拿过来
 # 新增 deploy
  - name: deploy
    uses: JamesIves/github-pages-deploy-action@v4.2.3
    with:
      branch: gh-pages # 布置的分支名 有一定要独立一个分支，第一次设置为master 好家伙构建完结后，直接把我的项目文件清除了，只剩下打包的文件了。
      folder: build   # build后文件目录

作用

到这儿基本的方针现已完结了，但是当我看公司内部的流程时，install, build, deploy流程是分开的，这样有利于添加一些校验，lint规则等流程，所以我在考虑怎样拆分流程呢，第一次我简略的拆分

name: First GitHub Actions Demo
on: 
  push:
    branches:
      - master
      - dev
jobs:
  Build:
    runs-on: ubuntu-latest
    steps:
      uses: actions/checkout@v2
      uses: actions/setup-node@v2   
      with:
        node: 16.14
    - name: yarn cache
      id: yarn-cahce-dir-path
      run: echo "::set-output name=dir::$(yarn cache dir)"
    - uses: actions/cache@v2
      id: yarn-cache
      with: 
        path: ${{ steps.yarn-cahce-dir-path.outputs.dir }}
        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
        restore-keys: | 
          ${{ runner.os }}-yarn-   
    - run: yarn install
    - run: yarn build
  Deploy:
    - name: depploy
      uses: JamesIves/github-pages-deploy-action@v4.2.3
      width:
        branch: gh-pages
        folder: build
        clean: true
        clean-exclude: |
          special-file.txt
          some/*.txt
        ssh-key: ${{ secrets.PAGE_ACCESS_TOKEN }}    

我想着这样应该就能够了，一提交代码直接GG,第一是没有Deploy没有等待build完结，第二是两个job之间的文件不能够直接用，又翻了下文档才发现官方给了这两个 actions/upload-artifact@v2 actions/download-artifact@v2 能够在不同job之间公用文件，所以又改了改,build阶段上传打包好的文件，deploy阶段下载打包好的文件进行布置（注意deploy也要运用checkout@v2）。 最终成果

name: First GitHub Actions Demo
on: 
  push:
    branches:
      - master
      - dev
jobs:
  Build:
    runs-on: ubuntu-latest
    steps:
    # 步骤称号
    - name: checkout code
      uses: actions/checkout@v2
    - name: actions/setup-node@v2
      uses: actions/setup-node@v2   
      with:
        node-version: '16.14'
        cache: 'yarn'
        cache-dependency-path: '**/yarn.lock'
    # 缓存 有需求能够敞开 一起 setu node 也能够进行缓存
    # - name: yarn cache
    #   id: yarn-cahce-dir-path
    #   run: echo "::set-output name=dir::$(yarn cache dir)"
    # - uses: actions/cache@v2
    #   id: yarn-cache
    #   with: 
    #     path: ${{ steps.yarn-cahce-dir-path.outputs.dir }}
    #     key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
    #     restore-keys: | 
    #       ${{ runner.os }}-yarn-    
    - run: yarn install && yarn build  
    # 上传打包好的文件，所以下一步能够运用
    - name: upload files 
      uses: actions/upload-artifact@v2
      with: 
        name: build-pages
        path: build
        retention-days: 1
  Deploy: 
    needs: Build # 确保build 阶段完结
    runs-on: ubuntu-latest
    steps:
      - name: checkout code
        uses: actions/checkout@v2
      - name: download build files
        uses: actions/download-artifact@v2
        with:
          name: build-pages
          path: build
      - name: deploy
        uses: JamesIves/github-pages-deploy-action@v4.2.3
        with:
          branch: gh-pages
          folder: build 
          token: "${{ secrets.DEPLOY_TOKEN }}"  

提交代码，检查运行成果，完结拆分。

到这儿能够愉快的拜访你的网站了。

结尾

写作思路是依照其时完结的思路一步一步的去完结这个流程来的，所以有些功能或许还没想到，一起如果流程有什么能够优化的当地，欢迎各位大佬指教。当然，完好的流程还短缺很多，现在只是先完结简略的打包构建流程，接下来还需求去学习gitlab 的CI、CD,完结后会在水一篇文章。在之后才会去看一些布置项目相关的内容。比方Docker,Nginx等，期望能在空闲之余学会整个流程。加油！