将Webpack打包的静态资源部署到Azure App Service遇异常

1. 配置App Service默认文档 #

Azure App Service需要明确指定默认启动文件，操作步骤：

• 登录Azure门户，找到目标应用服务${webAppName}-test
• 左侧导航栏选择配置 > 默认文档
• 将index.html添加到默认文档列表的最顶部（确保优先级最高），保存配置后重启App Service，再访问测试

2. 修正压缩包的目录结构 #

确认你的压缩包解压后，index.html是否处于Azure App Service的网站根目录/home/site/wwwroot下。如果当前zip包是把整个dist文件夹打包进去，解压后会变成/home/site/wwwroot/dist/index.html，Azure无法识别这个路径下的默认文件。

• 修改打包命令，直接将dist内的文件打包，而非包含dist文件夹：

  cd dist && zip -r ../deployment-$BITBUCKET_BUILD_NUMBER.zip ./* && cd ..
  

3. 启用静态网站功能（纯静态项目适用） #

如果你的项目是无后端的纯静态前端，可开启Azure的静态网站功能：

• 在Azure门户的应用服务页面，左侧导航选择静态网站
• 点击启用，设置默认文档为index.html，单页应用可同时设置错误文档路径为index.html
• 保存后使用页面提供的静态网站专属URL访问（注意区别于默认的App Service URL）

4. 检查Webpack的资源路径配置 #

确保Webpack打包时的资源路径适配Azure的部署结构：

• 在webpack.dev.js中调整publicPath配置：

  module.exports = {
    // 其他配置项
    output: {
      // 其他输出配置
      publicPath: './' // 使用相对路径避免资源加载失败
    }
  };
  

  重新打包后再部署测试

5. 通过日志排查深层问题 #

若以上步骤无效，通过日志定位具体错误：

• 在Azure门户应用服务的日志流中查看实时请求日志，确认是否存在404错误或资源加载失败的记录
• 通过SSH登录服务器，检查/home/site/wwwroot下的文件结构，也可尝试用curl localhost测试能否正常获取index.html内容

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