React.js应用部署至Azure Web App遇问题求助

1. 确认部署文件位置是否正确 #

Azure Web App默认从site/wwwroot读取静态文件，如果你的React构建文件（build目录下的内容）传到了子目录（比如wwwroot/build），就会显示默认页。

• 检查FTP上传的文件结构：确保React的build目录下的所有文件（index.html、static文件夹等）直接放在wwwroot根目录，不要嵌套在子文件夹里。
• 用VS Code Azure插件部署时，选择部署到根目录，别选子目录。

2. 添加静态文件配置文件 #

Azure Web App需要明确规则处理SPA的静态资源和路由，在wwwroot目录下创建web.config文件，粘贴以下内容：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
    <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="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这个配置会让所有非文件/目录的请求都指向index.html，解决SPA路由问题，同时确保静态资源的MIME类型正确。

3. 配置启动命令（按需） #

如果你的应用需要在线构建，或者需要用serve启动静态服务：

• 登录Azure Portal，进入你的Web App配置页面，找到常规设置，在启动命令里输入：

npm run build && npx serve -s build

如果已经提前构建好并把文件放到了wwwroot根目录，直接用npx serve -s .就行。

• 保存配置后重启Web App。

4. 删除默认页文件 #

旧的默认页文件（比如hostingstart.html、iisstart.htm）可能会干扰显示，通过FTP或SCM站点进入wwwroot目录，删掉这些文件。

5. 查看部署日志排查问题 #

在SCM站点（https://<你的应用名>.scm.azurewebsites.net）的部署中心查看日志，确认有没有构建失败、上传错误的提示，比如依赖安装失败之类的。

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