如何通过AZ CLI将React前端+C#后端应用部署至Azure？

一、指定.csproj文件的方法 #

az webapp up命令默认会自动检测当前目录下的.csproj文件，若存在多个项目文件或目标文件不在当前目录，直接用--project参数指定路径即可：

az webapp up --name <app_name> --resource-group <resource_group_name> --sku S1 --project ./path/to/your/backend-project.csproj

路径支持相对或绝对格式，确保指向正确的后端项目文件。

二、完整部署流程（解决空白页+配置运行栈） #

你之前出现空白页，核心原因是前端静态资源未正确托管、运行栈配置不匹配，按以下步骤操作：

1. 本地整合前后端资源 #

• 进入React前端目录，执行构建命令生成静态文件：

  npm run build
  

• 将build文件夹内的所有内容，复制到C#后端项目的wwwroot目录（无此目录则手动创建），让ASP.NET后端负责托管前端静态资源。

2. 配置后端项目路由 #

在后端项目的Program.cs中添加静态文件托管和SPA路由支持（解决SPA刷新空白问题）：

// 托管静态文件
app.UseStaticFiles();
// SPA路由 fallback，确保所有路由都指向index.html
app.MapFallbackToFile("index.html");

3. 设置Azure应用服务运行栈 #

根据你的.NET版本，用AZ CLI指定正确的运行栈：

az webapp config set --name <app_name> --resource-group <resource_group_name> --net-framework-version "v6.0"

（版本号按需调整，如v7.0、v8.0）

4. 执行AZ CLI部署 #

切换到后端项目根目录（包含.csproj的目录），执行部署命令：

az webapp up --name <app_name> --resource-group <resource_group_name> --sku S1 --project ./YourBackendProject.csproj

部署完成后，直接打开应用验证：

az webapp browse --name <app_name> --resource-group <resource_group_name>

5. 空白页排查（若仍出现） #

• 查看实时日志定位问题：

  az webapp log tail --name <app_name> --resource-group <resource_group_name>
  

• 验证静态文件是否部署成功：通过Azure门户进入应用服务→高级工具→Kudu，查看site\wwwroot目录下是否存在前端静态文件。

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