reactjs - React Router 在 Azure Linux Web App 上抛出 404

Question

我们正在将 React Web 应用程序从 Windows 应用服务迁移到 Linux 应用服务。我们有一个自定义的 web.config 来处理路由，这样当用户手动访问我们的其中一个路由时，他们就不会遇到 404。此修复不适用于 Linux 应用服务。

我们遇到了 404 错误，我们需要它才能工作，因为我们有用户应该能够到达的自定义路线。如果站点路由到默认的index.html，则该站点可以工作，但自定义路由则不能。我们尝试创建新的 Windows 应用服务，迁移工作正常。关于如何在 Linux 应用服务中使用自定义路由有什么想法吗？

这是我们当前使用的 web.config:

<?xml version="1.0"?>
<configuration>
 <system.webServer>
 <staticContent>
 <remove fileExtension=".woff" />
 <remove fileExtension=".woff2" />
 <remove fileExtension=".otf" />
 <remove fileExtension=".ttf" />
 <remove fileExtension=".eot" />
 <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
 <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
 <mimeMap fileExtension=".otf" mimeType="application/font-otf" />
 <mimeMap fileExtension=".ttf" mimeType="application/font-ttf" />
 <mimeMap fileExtension=".eot" mimeType="application/font-eot" />
 <clientCache cacheControlMode="DisableCache" />
 </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" />
 <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
 </conditions>
 <action type="Rewrite" url="/" />
 </rule>
 </rules>
 </rewrite>
 </system.webServer>
</configuration>

Answer 1

当您在 Linux 应用服务中运行应用程序时，您不需要 web.config 文件，因为它仅由 IIS 使用，正如@PeterPan 已经说过的那样。

要在Azure Linux Web App Service中运行React Web应用程序，并通过index.html处理自定义路由上的任何直接访问，您需要在“设置”上配置启动命令> 常规设置> 启动命令”，如下例所示。 请记住将路径更改为构建路径。

pm2 serve /home/site/wwwroot/build --no-daemon --spa

使用--spa选项pm2会自动将所有查询重定向到index.html，然后React路由器将发挥其魔力。

您可以在 pm2 文档中找到有关它的更多信息:https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

我最近遇到了同样的问题:React router direct links not working on Azure Web App Linux