Question

我们正在将React Web App从Windows App Service迁移到Linux App Service。我们有一个自定义的web.config，它可以处理路由，以便当用户手动访问我们的一条路由时，它们不会遇到404错误。此修补程序不适用于Linux App Service。

我们已经遇到404了，我们需要这样做才能正常运行，因为我们拥有用户应该可以到达的自定义路线。如果它们路由到默认index.html，则该站点可以工作，但是自定义路由则不能。我们尝试创建一个新的Windows App Service，并且迁移工作正常。关于如何在Linux App Service中使用自定义路由的任何想法？

这是我们当前正在使用的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应用服务中运行React Web应用并通过index.html处理对自定义路由的任何直接访问，您需要在“设置”上配置启动命令> 常规设置> 启动命令” ，如下例所示。 记住将路径更改为构建路径。

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

使用--spa选项pm2将自动将所有查询重定向到index.html，然后react router将发挥作用。

您可以在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

Answer 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

React Router在Azure Linux Web App上抛出404

2 个答案: