乐趣区

关于github-actions:使用-Github-Actions-部署reactapp-到-Github-Pages

jiezi

前言 - 学以致用

之前始终忙于开发，总是零散的去看一些货色，想想学货色了么？额 … 如同学了，又如同没有学，不晓得你们有没有这种感觉，所以新年初始，换一种学习办法，本着学以致用去残缺的学一些货色，正好之前想接触 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}}."
  1. 提交代码，点击 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, 不然无奈进行设置）。

  1. 依照文档编辑.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 等，心愿能在闲暇之余学会整个流程。加油！

退出移动版