如何利用GitHubAction和GithubPage部署React应用

本文是从物联网工程与技术实践期末文档中抽取出来的，可能格式比较奇怪。
本文原发表于个人博客，转换为CSDN可能排版可能有些许差异，正确排版原文请查看
地址：https://blog.fivezha.cn/2020/07/21/github-action-demo/

GithubAction

官网的第一段，便讲明了此功能的用途和作用。

在 GitHub 操作 的仓库中自动化、自定义和执行软件开发工作流程。 您可以发现、创建和共享操作以执行您喜欢的任何作业（包括 CI/CD），并将操作合并到完全自定义的工作流程中。

看上去云里雾里，其实就是利用yml进行的自定义脚本操作，用于测试/部署的时候的一些列繁琐重复工作实现全流水线自动化作业的功能。

GithubPage

您可以为自己、您的组织或项目设置一个基本 GitHub Pages 站点。

白嫖Github服务器用来部署自己的web应用。部署后链接格式：<用户名>.github.io/<仓库名>

开始编写

生成密钥

cd ~/.ssh
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

此时会生成.pub的公钥与没有后缀的私钥：

此时再将公钥私钥部署到GitHub：

编写deploy.yml文件

首先先在仓库根目录新建.github/workflows文件夹，然后在此文件夹下新建deploy.yml文件

然后编写此文件：

name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build

此时自动化流程部署已完成，每次commit便会自动部署到GitHub服务器中。

添加依赖缓存

上面的流程如果仔细查看的话，会发现一个问题——每一次commit都会进行一次Install Package的操作，这样不仅浪费了性能，还极大的浪费了时间，每一次都会浪费平均50s左右的时间进行依赖下载，占用了我们的开发时间，所以我在这里对于node_modules做了缓存操作，最终deploy.yml文件如下：

name: Deployment
on:
  push:
    branches:
      - master
jobs:
  deploy:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x]
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}
    - name: Cache node modules
      uses: actions/cache@v1
      with:
        path: node_modules
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.OS }}-build-${{ env.cache-name }}-
          ${{ runner.OS }}-build-
          ${{ runner.OS }}-
    - name: Install Packages
      run: npm install
    - name: Build page
      run: npm run build
    - name: Deploy to gh-pages
      uses: peaceiris/actions-gh-pages@v3
      with:
        deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
        publish_dir: ./build

测试一下：

可以看到下载依赖的时间从42s变为了9s，可以说是质的飞跃了~

成果

部署成果查看

Github仓库

本文原发表于个人博客，转换为CSDN可能排版有些许差异，正确排版原文请查看
地址：https://blog.fivezha.cn/2020/07/21/github-action-demo/