使用github actions发布react-app

前提条件：已经创建了react-app并且发布在了github上。

第一步：添加配置

在.github/workflows目录下(.github文件夹创建在根目录下）创建build-deploy.yml并输入以下代码：

name: Build & deploy

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  build:
    name: Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Installing Node.js
        uses: actions/setup-node@v1
        with:
          node-version: 16.x

      - name: Installing NPM packages
        run: npm ci

      - name: Building project
        run: npm run build

      - name: Running tests
        run: npm run test

      - name: Uploading production-ready build files
        uses: actions/upload-artifact@v2
        with:
          name: production-files
          path: ./build

  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: Downloading artifact
        uses: actions/download-artifact@v2
        with:
          name: production-files
          path: ./build

      - name: Deploying to gh-pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

（样例代码中默认分支是main，如果是其他的需要自行修改）

第二步：设置地址

在package.json中添加主页路径（homepage），如图所示

其格式如下：

"homepage": "https://[用户名].github.io/[仓库名]",

查询方法：在右侧设置中选中Use your GitHub Pages website，上方显示的内容。

第三步：创建分支

创建名为gh-pages的分支，网页将发布在这个分支上。

第四步：设置pages分支

在Settings->Pages->Build and deployment中，将显示分支设置为gh-pages

---

在这些步骤完成之后，actions应该就可以正常运行了，如果出现错误，可以点开查看具体的原因。如果页面显示404，等待一段时间或清除浏览器缓存重试可能解决问题。

我在操作中遇到的问题：

错误1：CI报错

​
Treating warnings as errors because process.env.CI = true.

Most CI servers set it automatically.


Failed to compile.

​

解决方法：Treating warnings as errors because process.env.CI = true | bobbyhadz

1.修改了packege.json文件中的scripts部分：

2.使用npm命令下载了cross-env

错误2：文本错误

test('renders learn react link', () => {
      5 |   render(<App />);
    > 6 |   const linkElement = screen.getByText(/learn react/i);
        |                              ^
      7 |   expect(linkElement).toBeInTheDocument();
      8 | });
      9 |
      at Object.getElementError (node_modules/@testing-library/dom/dist/config.js:38:19)
      at node_modules/@testing-library/dom/dist/query-helpers.js:90:38
      at node_modules/@testing-library/dom/dist/query-helpers.js:62:17
      at getByText (node_modules/@testing-library/dom/dist/query-helpers.js:111:19)
      at Object.<anonymous> (src/App.test.js:6:30)
      at TestScheduler.scheduleTests (node_modules/@jest/core/build/TestScheduler.js:333:13)
      at runJest (node_modules/@jest/core/build/runJest.js:404:19)
      at _run10000 (node_modules/@jest/core/build/cli/index.js:320:7)
      at runCLI (node_modules/@jest/core/build/cli/index.js:173:3)
Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 total
Snapshots:   0 total
Time:        1.518 s
Ran all test suites.
Error: Process completed with exit code 1.

在test阶段出现了该错误，原因是app.test.js中使用了默认文本进行匹配，但是由于重写代码导致匹配不到“learn react"。将其修改为代码中出现的文本后解决了问题 。

在测试中，你的测试用例尝试通过 screen.getByText(/learn react/i) 来找到文本内容为 "learn react" 的元素，但在提供的 HTML 结构中，并没有包含这个具体的文本。

如果你是在 Create React App（CRA）项目中使用默认的测试文件（src/App.test.js），那么测试用例中的 screen.getByText(/learn react/i) 是默认的 CRA 测试示例，需要根据你实际的页面结构来进行相应的修改。

错误3： 密钥错误

Error: Action failed with "The process '/usr/bin/git' failed with exit code 128"

使用默认的token时发生了密钥错误，将build-deploy.yml文件中对应字段修改为：

ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

并且添加自己创建的token 

参考链接：Action failed with "The process '/usr/bin/git' failed with exit code 128" - Stack Overflow

第五步：添加.nojekyll

由于网页显示的是md文档而不是react页面，在根目录下创建.nojekyll空白文件，推送提交后即可正常显示。

参考链接：https://github.com/docsifyjs/docsify/issues/192

参考文档：https://devangtomar.medium.com/using-github-pages-and-github-actions-to-deploy-a-react-app-9f679b5e256b

GitHub Actions 入门教程 - 阮一峰的网络日志

项目地址：

https://github.com/peaceiris/actions-gh-pages

我的个人参考网站：https://github.com/Jye10032/BlogR