Azure DevOps部署Vite React到Azure App Service指定槽位后应用崩溃求助

针对你提供的Pipeline配置和问题，以下是具体排查和修复建议：

1. 调整缓存任务顺序（优化构建效率） #

当前Pipeline中Cache@2在yarn install之后执行，导致缓存无法生效。调整顺序并添加缓存命中跳过安装的逻辑：

- task: Cache@2
  inputs:
    key: $(cacheKey)
    path: node_modules
    cacheHitVar: CACHE_RESTORED
  displayName: 'Cache yarn dependencies'

- script: |
    yarn install
  displayName: 'yarn install'
  condition: ne(variables.CACHE_RESTORED, 'true')

2. 修正启动命令的路径错误 #

你在归档任务中设置了includeRootFolder: false，部署后dist内的文件会直接放在/home/site/wwwroot/下，而非/home/site/wwwroot/dist/。修改启动命令：

StartupCommand: 'pm2 serve /home/site/wwwroot --no-daemon --spa'

添加--spa参数是为了处理React单页应用的路由刷新问题，避免出现404错误。

3. 检查Vite的base路径配置 #

如果你的槽位使用子路径（比如https://yourapp-qa.azurewebsites.net/qa），需在vite.config.js中配置对应base路径：

export default defineConfig({
  base: '/qa/', // 根路径部署则设为'/'
  // 其他配置项
})

base路径错误会导致静态资源加载失败，直接引发应用崩溃。

4. 查看App Service日志定位具体问题 #

应用崩溃的核心排查手段是查看Azure门户中的日志：

• 进入目标App Service → 左侧「监控」→「日志流」，实时查看运行日志
• 在「配置」→「常规设置」中开启「应用日志记录（文件系统）」，下载日志文件分析详细错误信息

常见错误包括：静态资源路径不匹配、Node版本不兼容、端口占用等。

5. 验证构建产物完整性 #

在构建阶段添加步骤，确认dist文件夹生成了完整的静态资源：

- script: |
    ls -la $(System.DefaultWorkingDirectory)/dist
  displayName: 'Check dist folder contents'

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