Azure 中的 .net core 3.1 / react 应用程序无法加载答案

【问题标题】：.net core 3.1 / react app in Azure does not loadAzure 中的 .net core 3.1 / react 应用程序无法加载
【发布时间】：2020-06-17 13:31:15
【问题描述】：

我刚刚使用 dotnet cli (dotnet new react -o new-app) 创建了一个空的 .net core 3.1 / react 应用程序并将其发布到 Azure（通过基于下载的发布配置文件的 WebDeploy）。

每次发布都成功运行，但之后我无法访问客户端应用程序。我唯一能看到的是azure的默认页面：

应用程序的其他部分正在工作，因为如果我调用任何端点，那么我会得到正确的响应（例如，模板示例控制器中的示例操作返回一个有效的 json）。

我应该如何更改才能访问客户端应用程序？

【问题讨论】：

标签： reactjs azure .net-core

【解决方案1】：

我找到了解决方案。由于客户端路由，我不得不修改 web.config。描述如下：

添加了一条规则以将根 url 连接到 wwwroot/index.html

<rule name="empty-root-index" stopProcessing="true">
   <match url="^$" />
   <conditions logicalGrouping="MatchAll">
      <add input="{HTTP_METHOD}" pattern="GET|HEAD" />
      <add input="{QUERY_STRING}" pattern="^$|^lc=" />
  </conditions>
  <action type="Rewrite" url="wwwroot/index.html" />
</rule>

另一个从 wwwroot（客户端应用程序所在的位置）获取所有静态内容

<rule name="wwwroot-static" stopProcessing="true">
   <match url="([\S]+[.](html|htm|svg|js|css|png|gif|jpg|jpeg|ico))" />
   <conditions logicalGrouping="MatchAll">
      <add input="{HTTP_METHOD}" pattern="GET|HEAD" />
   </conditions>
  <action type="Rewrite" url="wwwroot/{R:1}" />
</rule>

还需要让客户端路由工作：

<rule name="html5-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="{HTTP_METHOD}" pattern="GET|HEAD" />
  </conditions>
  <action type="Rewrite" url="wwwroot/index.html" />
</rule>

最后但同样重要的是，我们必须设置 mime 类型

<handlers>
   <add name="StaticFileModuleHtml" path="*.htm*" verb="*" modules="StaticFileModule" resourceType="File" requireAccess="Read" />
   <!-- More goes here -->
<handlers>

【讨论】：

链接可能会中断或更改。该博客可能会完全消失。请包括适用于您的案例的实际完整更改。