React Router 在 Azure Linux Web App 上抛出 404答案

【问题标题】：React Router throwing 404 on Azure Linux Web AppReact Router 在 Azure Linux Web App 上抛出 404
【发布时间】：2019-08-15 18:14:21
【问题描述】：

我们正在将我们的 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>

【问题讨论】：

您找到答案了吗？我正在处理同样的问题。

标签： reactjs azure react-router azure-web-app-service

【解决方案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

【讨论】：

你只是我的生活，会做其他文章中建议的各种愚蠢的事情..这是最终的答案。

【解决方案2】：

Azure Linux WebApp 基于 Docker 容器，不同于带有 IIS 和 web.config 的 Azure Windows WebApp。

因此，您只需删除web.config 文件并使其在本地或 docker 容器上运行，然后将其构建为 docker 映像或使用 Azure CLI 部署到 Azure WebApp for Container。

有两个官方文档可以参考。

Create a Node.js app in Azure 用于 Linux
Run a custom Linux container in Azure App Service

【讨论】：