如何将静态文件定义为 Azure 静态网站上的路由？答案

【问题标题】：How do I define static files as routes on an Azure Static Website?如何将静态文件定义为 Azure 静态网站上的路由？
【发布时间】：2019-06-30 08:36:20
【问题描述】：

我的用例是一个带有深度链接的静态天蓝色网站。我希望我的 azure 网站在调用某些 URL 时返回我的 index.html 页面，例如/t/2

在使用 ASP.NET 为应用程序提供服务时，我可以通过将以下内容添加到我的 Route 中来做到这一点

routes.MapRoute(
            name: "DeepLink",
            url: "t/{*id}",
            defaults: new { controller = "Home", action = "Index" }
        );

我想实现相同但使用静态站点。我可以添加一个 Web.config，我可以用它来重定向/重写我的 url，但我希望 URL 保持为 /t/2 以便前端可以对其做出反应。

【问题讨论】：

标签： azure web-config

【解决方案1】：

刚刚遇到同样的问题，偶然发现了这个帖子——

由于静态网站除了主路由之外不知道任何路由 - 对于任何底层路由，它始终默认为未找到。

但在 SPA 中，您没有静态 404 文档，您的 index.html 将为您处理。

所以您唯一需要做的就是将 index.html 也指定为 404 文档，一切似乎都正常。

【讨论】：

不幸的是，这阻止了 Googlebot 扫描页面，因为它得到 404，它忽略了内容并且不扫描页面。这对 SEO 不利。
它真的发送状态 404 吗？ Afaik 我已经看到了一些具有各种响应状态（418）的 SEO 测试，似乎它根本不会影响 SEO。还有firebase（谷歌产品），它似乎在做类似于blob存储的事情。也许值得进一步调查？
不幸的是，当从 AD B2C 登录重定向回来时，这会创建一个重定向循环。
@ChrisGunawardena 这不是在本地发生或部署在其他地方吗？它不应该影响任何重定向，因为它只会为您的应用程序提供完全相同的静态文件，而不管路由如何。然后由您的应用正确处理 Oauth 内容
@MichaelB 实际上这是我的浏览器（勇敢）阻止跨站点 cookie 的结果。禁用屏蔽/广告块修复它，谢谢！我认为最终的解决方案可能是使用带有规则的 CDN，但那是另一次了：D

【解决方案2】：

使用 404 页面作为后备不是最推荐的链接路由方式。

您可以使用 routes.json 文件，如 here 所述。

如果需要，您可以使用通配符。您的 routes.json 文件将如下所示：

{
   "route": "/t/2",
   "serve": "/index.html",
}

【讨论】：

【解决方案3】：

如果您使用的是静态 Web 应用程序，那么您无权访问任何服务器端代码来执行路由，您需要在客户端执行所有操作。您需要使用支持此功能的 Javascript 库或类似库。

【讨论】：

感谢您的回复。我有一个用于此的客户端框架，但要使其正常工作，我需要为访问深层链接（'t/2'）的用户提供我的 index.html 页面，因为它会加载我的客户端框架
这将很难实现。静态 Web 应用程序就是这样，它们在看到它们时为页面提供服务。您需要在用户输入的位置加载框架以进行路由。

【解决方案4】：

如果您通过静态网站引用Azure Storage web sites，您可以指定一个自定义 404 html，该 html 可以提供一个小的 javascript sn-p 重定向回 index.html（正如 Sam 指出的那样）。

如果静态网站在 Azure 应用服务中，您可以在 web.config 中添加这个 sn-p：

<system.webServer>
    <rewrite>
      <rules>        
        <rule name="Main Rule" stopProcessing="true">
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
</system.webServer>

【讨论】：