GitHub Actions与Vercel搭建CI/CD流水线遇react-scripts build报错127

问题背景 #

正在搭建GitHub仓库与Vercel的CI/CD流水线，实现代码变更后自动测试并部署，但GitHub Action执行时触发错误：

Error! Command "react-scripts build" exited with 127

现有配置 #

package.json 脚本部分

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "deploy": "vc --cwd build --prod --yes --token=$VERCEL_TOKEN"
}

GitHub Action 工作流配置

on: [push]
jobs:
build-app:
  runs-on: ubuntu-22.04
  env:
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: "18.8.0"
    - run: tree
    - run: node -v
    - name: install node modules
      run: yarn
    - name: installing react-scripts
      run: npm install --save react react-dom react-scripts
    - name: Build the project
      run: yarn build
    - name: Sets the vercel env
      run: |
        cd build
        mkdir .vercel
        cd .vercel
        touch project.json
        echo "{\"projectId\":\"$VERCEL_PROJECT_ID\",\"orgId\":\"VERCEL_ORG_ID\"}" > project.json
    - name: Deploying the project on vercel
      run: yarn deploy
    - name: setup finish
      run: echo "done"
test-app:
  needs: build-app
  runs-on: ubuntu-22.04
  steps:
    - run: echo "end to end testing using cypress"

错误原因分析 #

退出码127表示系统找不到指定的命令，这里是react-scripts命令未被识别，核心问题有两个：

1. 包管理器混用：先用yarn安装依赖，再用npm安装react-scripts，会导致依赖目录（node_modules）出现冲突，react-scripts没有被正确添加到可执行路径中。
2. 变量引用错误：在生成vercel的project.json时，orgId没有正确引用环境变量，写成了VERCEL_ORG_ID而不是$VERCEL_ORG_ID，会导致部署时组织ID无效。

修复步骤 #

1. 统一包管理器，修复依赖安装逻辑 #

删除单独用npm安装react-scripts的步骤，全程使用yarn管理依赖。确保package.json的dependencies中包含react-scripts（如果没有，手动添加后执行yarn install提交到仓库）。

2. 修正GitHub Action工作流配置 #

修改后的工作流配置如下：

on: [push]
jobs:
build-app:
  runs-on: ubuntu-22.04
  env:
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
  steps:
    - uses: actions/checkout@v2
    - uses: actions/setup-node@v2
      with:
        node-version: "18.8.0"
        cache: "yarn" # 启用yarn缓存，加快安装速度
    - run: node -v
    - name: 安装所有依赖
      run: yarn install --frozen-lockfile # 锁定依赖版本，避免环境差异
    - name: 构建项目
      run: yarn build
    - name: 配置Vercel项目信息
      run: |
        cd build
        mkdir -p .vercel
        echo "{\"projectId\":\"$VERCEL_PROJECT_ID\",\"orgId\":\"$VERCEL_ORG_ID\"}" > .vercel/project.json
    - name: 部署到Vercel
      run: yarn deploy
    - run: echo "部署完成"
test-app:
  needs: build-app
  runs-on: ubuntu-22.04
  steps:
    - run: echo "执行Cypress端到端测试"

3. 可选优化：使用Vercel官方Action #

如果不想手动配置vc命令，可以改用Vercel官方提供的GitHub Action，简化部署流程：

# 替换原有的deploy步骤
- name: 部署到Vercel
  uses: amondnet/vercel-action@v20
  with:
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
    vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
    vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
    vercel-args: '--prod'
    vercel-working-directory: ./build

验证方法 #

推送代码到GitHub仓库，查看Action执行日志：

• 确认依赖安装步骤无报错
• 确认build步骤成功完成，生成build目录
• 确认部署步骤正常完成，Vercel控制台出现新的部署版本

内容的提问来源于stack exchange，提问作者nandan vasista