Azure静态Web Apps流水线发布产物缺失React构建目录问题

现有Azure Static Web Apps CI/CD流水线可成功生成Artifact，但下载后发现产物中未包含React项目的build目录，仅包含各类脚本文件。目标是生成包含React构建目录的产物，供后续流水线用于在其他资源中部署Web应用。已尝试使用流水线环境变量及指定publish为$(Build.ArtifactStagingDirectory)，但均未解决问题。

现有流水线代码 #

name: Azure Static Web Apps CI/CD

trigger:
  branches:
    include:
      - TestBranch

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Test Web App
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'],'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: <Name of your Static Web App Resource Group>
  steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_TOKEN_#####)
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "build" # Built app content directory - optional
      app_build_command: 'chmod 755 scripts/*.sh;./scripts/WebAppBuild.sh prod'
  - publish: build
    artifact: $(VARIABLE_IN_MY_PIPELINE)

异常产物文件列表 #

total 196
drwxrwxr-x 4 root root  4096 Jun 21 21:05 tools
-rwxrwxr-x 1 root root  1580 Jun 21 21:05 testStartupScriptGenerators.sh
-rwxrwxr-x 1 root root  2411 Jun 21 21:05 testRunTimeImages.sh
-rwxrwxr-x 1 root root  3605 Jun 21 21:05 testIntegration.sh
-rwxrwxr-x 1 root root  1786 Jun 21 21:05 testDetector.sh
-rwxrwxr-x 1 root root  1260 Jun 21 21:05 testBuildScriptGenerator.sh
-rwxrwxr-x 1 root root  2196 Jun 21 21:05 testBuildImages.sh
-rw-rw-r-- 1 root root   574 Jun 21 21:05 release.txt
-rwxrwxr-x 1 root root   740 Jun 21 21:05 generateConstants.sh
drwxrwxr-x 2 root root  4096 Jun 21 21:05 detector
-rwxrwxr-x 1 root root  4078 Jun 21 21:05 createSymlinksForDotnet.sh
-rw-rw-r-- 1 root root 15174 Jun 21 21:05 constants.yaml
-rwxrwxr-x 1 root root  2068 Jun 21 21:05 buildTestBuildImages.sh
-rwxrwxr-x 1 root root   650 Jun 21 21:05 buildSln.sh
-rwxrwxr-x 1 root root  6064 Jun 21 21:05 buildRunTimeImages.sh
-rwxrwxr-x 1 root root  5955 Jun 21 21:05 buildRunTimeImageBases.sh
-rwxrwxr-x 1 root root  5438 Jun 21 21:05 buildPythonSdkByVersion.sh
-rwxrwxr-x 1 root root  1239 Jun 21 21:05 buildPlatformBinaries.sh
-rwxrwxr-x 1 root root  1459 Jun 21 21:05 buildBuildpacksImages.sh
-rwxrwxr-x 1 root root 15961 Jun 21 21:05 buildBuildImages.sh
-rwxrwxr-x 1 root root  1809 Jun 21 21:05 buildBuildImageBases.sh
-rwxrwxr-x 1 root root  5514 Jun 21 21:05 __variables.sh
-rwxrwxr-x 1 root root   637 Jun 21 21:05 __sdkStorageConstants.sh
-rwxrwxr-x 1 root root   643 Jun 21 21:05 __rubyVersions.sh
-rwxrwxr-x 1 root root   296 Jun 21 21:05 __pythonVersions.sh
-rwxrwxr-x 1 root root  1856 Jun 21 21:05 __phpVersions.sh
-rwxrwxr-x 1 root root   416 Jun 21 21:05 __nodeVersions.sh
-rwxrwxr-x 1 root root   151 Jun 21 21:05 __javaVersions.sh
-rwxrwxr-x 1 root root   467 Jun 21 21:05 __hugoConstants.sh
-rwxrwxr-x 1 root root   417 Jun 21 21:05 __golangVersions.sh
-rwxrwxr-x 1 root root   102 Jun 21 21:05 __goVersions.sh
-rwxrwxr-x 1 root root  2107 Jun 21 21:05 __functions.sh
-rwxrwxr-x 1 root root   958 Jun 21 21:05 __extVarNames.sh
-rwxrwxr-x 1 root root   477 Jun 21 21:05 __dotNetCoreSdkVersions.sh
-rwxrwxr-x 1 root root  2553 Jun 21 21:05 __dotNetCoreRunTimeVersions.sh
-rwxrwxr-x 1 root root   438 Jun 21 21:05 __condaConstants.sh
-rw-rw-r-- 1 root root   596 Jun 21 21:05 TestAssembliesKey.snk
-rw-rw-r-- 1 root root  3378 Jun 21 21:05 Readme.md
-rw-rw-r-- 1 root root   160 Jun 21 21:05 FinalPublicKey.snk

解决方案 #

1. 定位Build脚本的实际输出路径 #

自定义构建脚本WebAppBuild.sh prod可能未将React产物输出到流水线工作根目录的build文件夹。添加以下任务，打印目录结构确认build目录的实际位置：

- task: Bash@3
  inputs:
    targetType: 'inline'
    script: |
      ls -la $(System.DefaultWorkingDirectory)
      find . -name "build" -type d

2. 修正Publish步骤的路径 #

如果build目录不在工作根目录，需指定完整路径：

• 若脚本输出到./src/build，则修改publish步骤为：

  - publish: src/build
    artifact: $(VARIABLE_IN_MY_PIPELINE)
  

• 或者先将build目录复制到$(Build.ArtifactStagingDirectory)再发布，确保路径可靠：

  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(System.DefaultWorkingDirectory)/build' # 替换为实际找到的build路径
      TargetFolder: '$(Build.ArtifactStagingDirectory)'
      CleanTargetFolder: true
  - publish: '$(Build.ArtifactStagingDirectory)'
    artifact: $(VARIABLE_IN_MY_PIPELINE)
  

3. 分离构建与SWA部署任务 #

AzureStaticWebApp@0任务可能会清理临时构建文件，建议先单独执行构建脚本，确认产物后再发布，最后按需执行SWA部署：

steps:
  - checkout: self
    submodules: true
  # 单独执行自定义构建
  - task: Bash@3
    inputs:
      targetType: 'inline'
      script: |
        chmod 755 scripts/*.sh
        ./scripts/WebAppBuild.sh prod
  # 复制并发布构建产物
  - task: CopyFiles@2
    inputs:
      SourceFolder: '$(System.DefaultWorkingDirectory)/build'
      TargetFolder: '$(Build.ArtifactStagingDirectory)'
  - publish: '$(Build.ArtifactStagingDirectory)'
    artifact: $(VARIABLE_IN_MY_PIPELINE)
  # 按需保留SWA部署任务
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_TOKEN_#####)
      app_location: "/"
      api_location: ""
      output_location: "build"

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