React项目集成SonarQube至Azure DevOps Pipeline遇发布问题求助

一、常见错误点分析 #

• 漏掉核心分析步骤：你的流水线只配置了SonarQubePrepare和SonarQubePublish，但中间缺了SonarQubeAnalyze任务——这是执行代码扫描的关键环节，没有它就不会生成分析结果，Publish任务自然会失败。
• 配置重复冲突：SonarQubePrepare里手动设置了cliProjectKey、cliSources等参数，同时又维护了sonar-project.properties文件，两者配置如果不一致会导致解析混乱，Publish阶段无法匹配到正确的分析任务。
• 令牌权限不足：确认$(SonarToken)对应的SonarQube令牌是否拥有该项目的分析执行权限（至少需要"分析者"角色）。

二、正确的sonar-project.properties配置示例 #

如果选择用properties文件管理配置，就不用在SonarQubePrepare里重复设置项目键、源路径等参数，示例如下：

# 项目唯一标识
sonar.projectKey=ServicePortal
# 项目显示名称
sonar.projectName=ServicePortal
# 项目版本
sonar.projectVersion=1.0.0
# 待扫描的源码路径（React项目按需调整，比如src、public）
sonar.sources=src,public
# JS/TS相关配置
sonar.javascript.eslint.reportPaths=eslint-report.json
sonar.typescript.tsconfigPath=tsconfig.json
# 排除无需扫描的文件
sonar.exclusions=**/node_modules/**,**/*.test.js,**/*.spec.tsx

三、正确的Azure DevOps Pipeline任务配置 #

根据是否使用sonar-project.properties，分两种方案：

方案1：依赖properties文件配置 #

# 1. 准备SonarQube分析环境
- task: SonarQubePrepare@4
  displayName: 'Prepare SonarQube analysis'
  inputs:
    SonarQube: 'ServiceConnection' # 你的服务连接名称
    scannerMode: 'CLI'
    configMode: 'file' # 改为从properties文件读取配置，替换manual
    extraProperties: |
      sonar.host.url=https://xxx.azurewebsites.net/
      sonar.login=$(SonarToken)

# 2. 执行代码扫描分析（必须步骤）
- task: SonarQubeAnalyze@5
  displayName: 'Run SonarQube analysis'

# 3. 发布分析结果到SonarQube
- task: SonarQubePublish@5
  displayName: 'Publish SonarQube results'
  inputs:
    pollingTimeoutSec: '300' # 可根据项目大小调整超时时间

方案2：完全手动配置（不使用properties文件） #

如果不想维护properties文件，直接删除它，在Prepare任务里完整配置所有参数：

- task: SonarQubePrepare@4
  displayName: 'Prepare SonarQube analysis'
  inputs:
    SonarQube: 'ServiceConnection'
    scannerMode: 'CLI'
    configMode: 'manual'
    cliProjectKey: 'ServicePortal'
    cliProjectName: 'ServicePortal'
    cliProjectVersion: '1.0.0'
    cliSources: 'src,public' # 明确指定React源码路径，不要用'.'避免扫描node_modules等无关文件
    extraProperties: |
      sonar.host.url=https://xxx.azurewebsites.net/
      sonar.login=$(SonarToken)
      sonar.exclusions=**/node_modules/**,**/*.test.js,**/*.spec.tsx
      sonar.javascript.eslint.reportPaths=eslint-report.json
      sonar.typescript.tsconfigPath=tsconfig.json

- task: SonarQubeAnalyze@5
  displayName: 'Run SonarQube analysis'

- task: SonarQubePublish@5
  displayName: 'Publish SonarQube results'
  inputs:
    pollingTimeoutSec: '300'

四、额外注意事项 #

• React项目建议先执行ESLint检查并生成报告文件，让SonarQube复用检查结果，提升扫描效率。
• 确保流水线代理环境已安装Node.js，SonarQube扫描JS/TS文件依赖它。
• 如果Publish任务还是超时，可适当调大pollingTimeoutSec的值，比如设置为600（10分钟），大型项目更需要充足时间。

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