React项目部署Azure免费计划遇阻，刷新报“resource not found”求帮助

你的问题是典型的React单页应用（SPA）部署到Azure App Service后的路由问题——React用客户端路由管理页面跳转，但刷新页面时浏览器会直接向服务器请求对应路径的文件，而Azure默认找不到这些不存在的文件，所以返回404。以下是针对不同Azure计划的解决方案：

Windows计划的Azure App Service #

在React项目的public目录下创建web.config文件，写入以下内容：

<?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" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

执行npm run build重新构建项目，然后将build文件夹内的所有文件（包括新生成的web.config）上传到Azure的site/wwwroot目录。这个配置会把所有非文件、非目录的请求重定向到index.html，交给React路由处理。

Linux计划的Azure App Service #

如果你的Azure App Service是Linux栈，可在build目录下创建.htaccess文件：

RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]

同样将包含.htaccess的build目录内容上传到site/wwwroot即可。

额外检查项 #

• 确认部署时是把build文件夹内的文件直接放到wwwroot，而非把build文件夹本身上传进去。
• 如果你使用的是HashRouter，刷新不会出现这个问题，但URL会带有#；如果需要干净的URL，必须用上述重定向配置配合BrowserRouter。

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