如何在Azure App Service根目录子文件夹部署新应用且保留原有数据

一、调整第二个React应用的构建配置 #

React应用默认将资源路径设为根目录，部署到子文件夹时需修改构建公共路径，避免资源加载错误：

• Create React App项目：修改package.json中的build命令，添加PUBLIC_URL参数：

  "scripts": {
    "build": "PUBLIC_URL=/subfolder/ react-scripts build"
  }
  

• Vite项目：在vite.config.js中设置base属性：

  export default defineConfig({
    base: '/subfolder/',
    // 其他现有配置
  })
  

• React Router路由适配：如果使用React Router，需设置basename适配子路径：

  import { BrowserRouter } from 'react-router-dom';
  
  <BrowserRouter basename="/subfolder">
    {/* 你的路由组件 */}
  </BrowserRouter>
  

二、修改发布管道的部署规则 #

核心是禁用"删除目标额外文件"选项，并指定明确的部署目标路径：

Azure DevOps发布管道（Azure App Service Deploy任务） #

1. 打开第二个应用的发布管道，找到Azure App Service Deploy任务
2. 展开附加部署选项，取消勾选Remove additional files at destination（这是导致原有应用被覆盖的关键）
3. 在目标文件夹（Virtual Application or Folder）中填写：
   • Windows App Service：site\wwwroot\subfolder
   • Linux App Service：site/wwwroot/subfolder
4. 保存并重新运行发布管道

GitHub Actions部署（azure/webapps-deploy@v2） #

在部署步骤中添加clean: false禁用清理，并指定deploy-to-path：

- name: Deploy to Azure Web App
  uses: azure/webapps-deploy@v2
  with:
    app-name: '你的App Service名称'
    slot-name: 'production'
    publish-profile: ${{ secrets.AZURE_WEBAPP_PUBLISH_PROFILE }}
    package: './build' # 你的第二个应用构建输出目录
    clean: false
    deploy-to-path: '/site/wwwroot/subfolder' # Linux用斜杠，Windows用反斜杠\site\wwwroot\subfolder

三、配置Azure App Service的虚拟路径映射 #

为让子文件夹的应用正常访问，需在Azure门户配置虚拟应用程序：

1. 登录Azure门户，进入你的App Service
2. 左侧菜单选择配置 → 路径映射
3. 在虚拟应用程序和目录区域，点击添加：
   • 虚拟路径：填写/subfolder
   • 物理路径：Windows填site\wwwroot\subfolder，Linux填site/wwwroot/subfolder
   • 勾选应用（将子目录标记为独立应用，适配单页应用路由）
4. 保存配置

四、验证结果 #

部署完成后：

• 原有应用可通过根路径访问：https://<你的App Service名称>.azurewebsites.net
• 新应用可通过子路径访问：https://<你的App Service名称>.azurewebsites.net/subfolder

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