React Router 在 Azure Linux Web App 上抛出 404 [英] React Router throwing 404 on Azure Linux Web App

问题描述

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

We are migrating our React Web App to a Linux App Service from a Windows App Service. We had a custom web.config that would handle routing so that when a user manually visits one of our routes, they would not run into a 404. This fix is not working on a Linux App Service.

我们遇到了 404，我们需要它来工作，因为我们有用户应该能够到达的自定义路线.如果它们路由到默认 index.html，则该站点可以工作，但自定义路由不会.我们已经尝试创建一个新的 Windows 应用服务并且迁移工作正常.关于如何让自定义路由在 Linux 应用服务中工作的任何想法?

We're running into 404's and we need this to work as we have custom routes that the user should be able to reach. The site works if they route to the default index.html, but custom routes don't. We've tried creating a new Windows App Service and the migration works just fine. Any ideas on how to get custom routes working in a Linux App Service?

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

Here's our web.config we are currently using:

<?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>

推荐答案

当你在 Linux 应用服务中运行你的应用时，你不需要 web.config 文件，因为它只被IIS，正如@PeterPan 已经说过的那样.

As you are running your app in a Linux App Service you don't need a web.config file since its only used by IIS, as @PeterPan already said.

要在 Azure Linux Web App Service 中运行您的 React Web 应用程序，并通过 index.html 处理对自定义路由的任何直接访问，您需要在 设置"中配置启动命令 > 常规设置 > 启动命令"，如下例所示.记得把路径改成你的构建路径.

To run your React web app in Azure Linux Web App Service, and make any direct access on custom routes be handled by index.html you need to configure the startup command on "Settings > General settings > Startup Command" like the exemple below. Remember to change the path to your build path.

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

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

Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

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

You can find more information about it in pm2 documentation: https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml

我最近处理了同样的问题:React 路由器直接链接在 Azure Web App Linux 上不起作用

I've coped with the same problem recently: React router direct links not working on Azure Web App Linux

这篇关于React Router 在 Azure Linux Web App 上抛出 404的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！