如何创建工作流以将 React & Gatsby 应用程序部署到 Github 页面？

Posted 2023-03-28

【中文标题】如何创建工作流以将 React & Gatsby 应用程序部署到 Github 页面？

【英文标题】：How to create a workflow to deploy on a React & Gatsby app to Github pages?

【发布时间】：2021-10-20 03:52:01

【问题描述】：

我创建了一个工作流程，每当我将某些内容推送到我的 repo 的 main 分支时自动执行 npm run deploy，以保持 Github 页面的网站更新。

# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions

name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js $ matrix.node-version 
      uses: actions/setup-node@v2
      with:
        node-version: $ matrix.node-version 
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present
    - run: npm test
    
    - name: Deploy
      run: |
        git config --global user.name $user_name
        git config --global user.email $user_email
        git remote set-url origin https://$[e-mail]/$repository
        npm run deploy
      env:
        user_name: 'github-actions[bot]'
        user_email: 'github-actions[bot]@users.noreply.github.com'
        github_token: $ secrets.ACTIONS_DEPLOY_ACCESS_TOKEN 
        repository: $ github.repository 

所以基本上我使用了默认的node.js workflow 并添加了有关 Github 页面的部分，但工作流程一直失败。

我有以下错误：

build(12.x) 
 npm test
  shell: /usr/bin/bash -e 0

> react-portfolio@0.1.0 test /home/runner/work/my-portfolio/my-portfolio
> echo "Write tests! -> https://gatsby.dev/unit-testing" && exit 1

Write tests! -> https://gatsby.dev/unit-testing
npm ERR! Test failed.  See above for more details.

我该如何解决这个问题？

【参考方案1】：

echo "写测试！-> https://gatsby.dev/unit-testing" && exit 1

这是默认情况下运行npm run test 时的输出（在大多数starters 中）：

"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"

基本上，这是提示echo 消息并退出操作（&& exit 1）。这就是您的工作流程中断的原因。

因此，对于您当前的用例，我将离开工作流程，例如：

   - name: Use Node.js $ matrix.node-version 
      uses: actions/setup-node@v2
      with:
        node-version: $ matrix.node-version 
        cache: 'npm'
    - run: npm ci
    - run: npm run build --if-present

以后，如果您运行测试，您将需要更改命令以添加您的自定义单元测试而不跳过该过程。