如何通过Az CLI与PowerShell将React+C# MVC应用发布至Azure

核心问题纠正 #

1. 不要手动单独编译React：.NET Core React模板默认会把前端构建集成到后端发布流程中，无需手动在ClientApp目录执行npm install/npm run build，避免产物路径混乱。
2. 发布目标是Web项目csproj，不是sln或ClientApp：发布sln会包含所有关联项目（如类库），而我们只需要发布承载前端的Web项目，确保UI变更能同步到发布产物。
3. dotnet publish的--output参数是目录，不能直接指定zip：需先发布到本地目录，再打包成zip。

完整PowerShell步骤 #

1. 定义路径与配置变量 #

# 替换为你的实际路径与Azure配置
$webProjectPath = "C:\Dev\TestReactApp\TestReact.WebApp\TestReact.WebApp\TestReact.WebApp.csproj"
$publishOutputDir = "c:\TestReactAppOutput"
$zipFilePath = "c:\TestReactAppPublished.zip"
$azureResourceGroup = "<RESOURCE_GROUP>"
$azureAppName = "<APP_NAME>"
$azureSubscriptionId = "<subscription>"
$azureUsername = "<uname>"
$azurePassword = "<pwd>"

2. 清理旧产物（避免缓存干扰） #

if (Test-Path $publishOutputDir) {
    Remove-Item $publishOutputDir -Recurse -Force
}
if (Test-Path $zipFilePath) {
    Remove-Item $zipFilePath -Force
}

3. 构建并发布Web项目（自动集成React编译） #

# 使用Release配置发布，自动执行ClientApp的npm install和build
# React编译产物会自动复制到发布目录的wwwroot下
dotnet publish $webProjectPath --configuration Release --output $publishOutputDir

4. 打包发布目录为Zip #

Compress-Archive -Path "$publishOutputDir\*" -DestinationPath $zipFilePath -CompressionLevel Fastest

5. 登录Azure并部署到Web App #

# 登录Azure（注意：明文密码不安全，生产环境建议使用服务主体登录）
az login -u $azureUsername -p $azurePassword

# 切换到目标订阅
az account set --subscription $azureSubscriptionId

# 部署Zip包到Web App
az webapp deployment source config-zip --resource-group $azureResourceGroup --name $azureAppName --src $zipFilePath

关键配置验证 #

确保你的Web项目.csproj包含以下SPA集成配置（React模板默认自带，若缺失需手动添加）：

<PropertyGroup>
  <SpaRoot>ClientApp\</SpaRoot>
  <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
</PropertyGroup>

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />

  <ItemGroup>
    <DistFiles Include="$(SpaRoot)build\**" />
    <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
      <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
    </ResolvedFileToPublish>
  </ItemGroup>
</Target>

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