React Azure Pipeline构建环节出现CI/CD错误求助

问题概述 #

使用Azure Pipeline构建React应用时流水线任务失败，已尝试以下操作但未解决：

• 修改构建命令添加CI参数
• 更新依赖
• 解决代码警告
• 检查服务端与客户端路径

相关截图 #

• 完整任务执行失败截图
• 项目结构截图

azure-pipelines.yml配置 #

# Node.js with React
# Build a Node.js project that uses React.
# Add steps that analyze code, save build artifacts, deploy, and more:
# https://docs.microsoft.com/azure/devops/pipelines/languages/javascript

trigger:
- main

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- task: Npm@1
  displayName: "Installing modules in /Server"
  inputs:
    command: 'install'
    workingDir: 'Server/IglesiaFiel.WebAPI'
- task: Npm@1
  displayName: "Installing modules in /Client"
  inputs:
    command: 'install'
    workingDir: 'Client/iglesiafiel.front'
- task: Npm@1
  displayName: "Building modules in /Client"
  inputs:
    command: 'custom'
    workingDir: 'Client/iglesiafiel.front'
    customCommand: 'run build'
- task: CopyFiles@2
  inputs:
    Contents: |
      Client/iglesiafiel.front/build/**
      Sertver/IglesiaFiel.WebAPI/**
    TargetFolder: $(Build.ArtifactStagingDirectory)
- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)'
    ArtifactName: 'release'
    publishLocation: 'Container'

完整构建日志 #

1 verbose cli   '/opt/hostedtoolcache/node/10.24.1/x64/bin/npm',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@6.14.12
3 info using node@v10.24.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle iglesiafiel.front@0.1.0~prebuild: iglesiafiel.front@0.1.0
6 info lifecycle iglesiafiel.front@0.1.0~build: iglesiafiel.front@0.1.0
7 verbose lifecycle iglesiafiel.front@0.1.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle iglesiafiel.front@0.1.0~build: PATH: /opt/hostedtoolcache/node/10.24.1/x64/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/vsts/work/1/s/Client/iglesiafiel.front/node_modules/.bin:/opt/hostedtoolcache/node/10.24.1/x64/bin:/snap/bin:/home/vsts/.local/bin:/opt/pipx_bin:/home/vsts/.cargo/bin:/home/vsts/.config/composer/vendor/bin:/usr/local/.ghcup/bin:/home/vsts/.dotnet/tools:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin
9 verbose lifecycle iglesiafiel.front@0.1.0~build: CWD: /home/vsts/work/1/s/Client/iglesiafiel.front
10 silly lifecycle iglesiafiel.front@0.1.0~build: Args: [ '-c', 'CI= react-scripts build' ]
11 silly lifecycle iglesiafiel.front@0.1.0~build: Returned: code: 1  signal: null
12 info lifecycle iglesiafiel.front@0.1.0~build: Failed to exec build script
13 verbose stack Error: iglesiafiel.front@0.1.0 build: `CI= react-scripts build`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/opt/hostedtoolcache/node/10.24.1/x64/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:198:13)
13 verbose stack     at ChildProcess.<anonymous> (/opt/hostedtoolcache/node/10.24.1/x64/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:198:13)
13 verbose stack     at maybeClose (internal/child_process.js:982:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid iglesiafiel.front@0.1.0
15 verbose cwd /home/vsts/work/1/s/Client/iglesiafiel.front
16 verbose Linux 6.5.0-1016-azure
17 verbose argv "/opt/hostedtoolcache/node/10.24.1/x64/bin/node" "/opt/hostedtoolcache/node/10.24.1/x64/bin/npm" "run" "build"
18 verbose node v10.24.1
19 verbose npm  v6.14.12
20 error code ELIFECYCLE
21 error errno 1
22 error iglesiafiel.front@0.1.0 build: `CI= react-scripts build`
22 error Exit status 1
23 error Failed at the iglesiafiel.front@0.1.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

##[error]Error: Npm failed with return code: 1
Finishing: Building modules in /Client

排查建议 #

1. 升级Node.js版本：日志显示使用Node.js 10.x，但react-scripts从v5开始不再支持该版本，建议将NodeTool@0任务的versionSpec改为16.x或18.x（LTS版本），解决兼容性问题。
2. 修正路径拼写错误：CopyFiles@2任务中Sertver/IglesiaFiel.WebAPI/**拼写错误，应为Server/IglesiaFiel.WebAPI/**，避免后续发布丢失服务端文件。
3. 获取完整构建日志：当前日志仅显示npm错误栈，缺少react-scripts build的具体编译错误。可在Pipeline开启详细日志，或本地执行CI=true npm run build复现问题，查看完整报错信息。
4. 规范CI环境变量设置：当前构建命令CI= react-scripts build存在空格，正确写法为CI=true react-scripts build，或通过Pipeline任务的env参数注入变量：

   - task: Npm@1
     displayName: "Building modules in /Client"
     inputs:
       command: 'custom'
       workingDir: 'Client/iglesiafiel.front'
       customCommand: 'run build'
     env:
       CI: true
   

5. 清理缓存重装依赖：添加Cache@2任务缓存node_modules，或在install步骤执行npm clean install强制重新安装依赖，避免缓存导致的版本不一致问题。

内容的提问来源于stack exchange，提问作者Ricardo Cerda