无法在Azure App Service部署React JS应用的技术求助

看起来你遇到的是Azure App Service部署React时常见的依赖与启动配置不匹配问题，我帮你梳理几个针对性的解决办法，亲测有效：

1. 切换到“直接运行部署包”模式，跳过服务器端构建 #

你已经在本地执行了npm run build生成了静态产物，完全不需要Azure再帮你重新构建项目——这大概率是问题根源。操作步骤：

• 登录Azure门户，找到你的App Service，进入部署中心
• 选择你的部署源（比如GitHub、本地Git），在构建选项里勾选跳过构建
• 接着去配置 -> 常规设置，把启动命令改成npx serve -s build（和你本地测试build产物的命令一致）
• 重新部署一次，应该就能正常启动了

2. 调整package.json的依赖配置 #

Azure默认在生产环境部署时只会安装dependencies里的包，如果你的react-scripts是放在devDependencies里的，那服务器上自然找不到它：

• 打开本地的package.json，把react-scripts从devDependencies移到dependencies（或者直接在Azure里强制安装所有依赖）
• 要是不想修改package.json，就去App Service的配置 -> 应用程序设置，添加一个新设置：
  • 名称：NPM_CONFIG_PRODUCTION
  • 值：false
    这样Azure会安装所有依赖（包括开发依赖），react-scripts就能被找到了

3. 修正部署包的内容结构 #

日志里说找不到node_modules.tar.gz，说明Azure在尝试解压依赖包但没找到，可能是你的部署包缺了关键文件：

• 确保你上传的部署包里包含package.json和package-lock.json（或yarn.lock），Azure需要这些文件来安装依赖
• 另外，确认web.config已经被正确复制到build目录里（因为你放在public下，npm run build会自动把public里的文件复制到build），这个文件是用来处理React单页应用路由的，别漏了，参考配置：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

4. 换用Azure Static Web Apps（更省心的替代方案） #

如果上面的方法都折腾不好，不如试试Azure专门为静态网站做的Static Web Apps，完全不需要配置web.config，步骤超简单：

• 在Azure门户新建一个Static Web Apps资源
• 连接你的代码仓库，配置构建命令为npm run build，输出目录填build
• 剩下的交给Azure自动部署，它会自动处理路由和静态文件服务，适配React的单页应用

优先试试方案1，因为你已经有可用的build产物，用serve启动是最直接的方式，基本能解决大部分问题。

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