React应用部署Azure静态Web应用报错：无法检测目录求助

问题根源 #

错误提示App Directory Location: '/home/vsts/work/1/a/####.zip' is invalid的核心原因是：swa deploy命令默认接收的是静态文件所在的目录路径，但你直接传入了zip压缩包的路径，CLI会把这个zip路径当作目录去查找，自然找不到目标路径。

修复方案 #

方案1：直接部署dist目录（推荐） #

跳过打包zip的步骤，直接部署构建好的dist目录，修改Bash任务的脚本：

npm install -g @azure/static-web-apps-cli
swa deploy $(Build.SourcesDirectory)/FrontEnd/dist --app-name $(STATIC_WEB_APP_NAME) --resource-group $(TFSTATE_RESOURCE_GROUP_NAME) --deployment-token $(STATICWEBAPP_DEPLOYMENT_TOKEN)

方案2：使用zip包部署（需指定--archive参数） #

如果必须通过zip包部署，需要添加--archive参数明确告诉CLI这是一个压缩包，而非目录：

npm install -g @azure/static-web-apps-cli
swa deploy --archive $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip --app-name $(STATIC_WEB_APP_NAME) --resource-group $(TFSTATE_RESOURCE_GROUP_NAME) --deployment-token $(STATICWEBAPP_DEPLOYMENT_TOKEN)

额外验证步骤 #

• 确认ArchiveFiles任务生成的zip包存在：在流水线中添加Bash步骤执行ls $(Build.ArtifactStagingDirectory)，查看是否有目标zip文件。
• 检查zip包内容：执行unzip -l $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip，确认包内包含dist目录的所有静态文件（无多余层级）。

更简便的替代方案：使用官方Azure Static Web Apps任务 #

放弃手动安装CLI，改用Azure DevOps官方的AzureStaticWebApp@0任务，自动处理部署流程：

- task: AzureStaticWebApp@0
  displayName: 'Deploy to Azure Static Web App'
  inputs:
    app_location: 'FrontEnd/dist'
    azure_static_web_apps_api_token: $(STATICWEBAPP_DEPLOYMENT_TOKEN)

内容的提问来源于stack exchange，提问作者Gabriel Pimentel Da Silva