Question

我在Azure Blob存储中托管了一个页面的React应用程序，但是却得到所请求的内容不存在。：深入链接到页面时出现错误：

我已经在存储帐户中启用了静态网站选项：

文件全部位于$ web容器中：

这包括下面的 web.config 和重写规则，该规则应该让index.html处理所有路由：

CertificationRequest

有人可以看到我哪里出问题了吗？

Answer 1

如果将404页面指向index.html，则可以进行深层链接。这不是一个完美的解决方案-具有副作用-但适用于大多数情况。

Answer 2

这些解决方案都不适合我，我痛苦地开始接受我无法仅在Azure存储中托管我的Angular应用程序（使用路由）的情况。

但是，实际上，我找到了解决方案。

您需要手动将 web.config 文件添加到您的 src 文件夹（是的，即使我们不在IIS服务器上托管该文件）

 <configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="Main Rule" stopProcessing="true">
                    <match url=".*" />
                    <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>
  </configuration>

...然后将文件添加到 angular.json 文件的assets部分：

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        . . . 
        "assets": [
          "src/web.config"
        ],

令人震惊的是，现在可以使用了。

在我的Angular应用中，我可以单击各个子页面，例如

http://www.mikesapp.web.core.windows.net/Orders/List

而且至关重要的是，我还可以打开浏览器并直接转到此网页。

Answer 3

我有带有深层链接的多语言Angular应用程序（应该直接访问），并且执行了以下操作：

$web约束中的文件夹结构：

. ru-UA
. uk
. en-US
. index.html

在Azure门户的静态网站设置中为index.html启用404
在您的根index.html上添加以下代码：

<html>
<head>
<script>
 if (window.location.pathname != null) {
     const segments = window.location.pathname.split('/').filter(x => x.length > 0);
     const languages = ['ru-UA', 'uk', 'en-US'];

     if (languages.indexOf(segments[0]) >= 0)
     {
         sessionStorage.setItem('path', window.location.pathname);
         window.location = '/' + segments[0] + '/';
     } else {
         window.location = '/uk/'; // It might be your default language
     }
 }
</script>
</head>
</html>

然后，在Angular中添加下一个：

     const spaRedirect = sessionStorage.getItem('path');
     if (spaRedirect) {
         const path = spaRedirect.split('/').filter(x => x.length > 0).slice(1).join('/'); // slice(1) to remove language segment
         await this.router.navigate(['/' + path]);
         sessionStorage.removeItem('path');
     }

现在您可以进行深层链接了。

工作原理：

用户进入浏览器：www.domain.com/uk/very/deep/link Azure
静态网站引擎找不到此类Blob，并将其重定向到400，这是根index.html -> www.domain.com/index.html
根index.html的完整链接来自 pathname属性并将其拆分为细分。

实际上，您可以避免按细分划分，但对我而言，这只是额外的验证步骤。
然后将其重定向到适当文件夹中的Angular特定于本地的index.html，Angular Engine开始为网站-> www.domain.com/uk/index.html提供服务

请注意，这里可能会有延迟，因为您必须以所有依赖项启动Angular，并且仅在重定向后才能启动
您的非常基本的组件会在sessionStorage.getItem('path')中找到内容，并使基于Angular的重定向到深层链接。 -> www.domain.com/uk/very/deep/link

Answer 4

虽然说静态网站不能很好地处理web.config时，可以接受的答案是正确的，但您无法使用静态网站做您想做的事是错误的。您可以执行以下操作：

点击“ Azure CDN”标签（在静态网站下方）
创建一个新的CDN配置文件（请小心选择WEB（静态网站）链接，而不要选择BLOB。
在“所有资源”上输入新的CDN配置文件。
单击您在“概述”中看到的单个端点。
点击“规则引擎”
添加以下规则：

信用：我的答案基于Andreas Wendl的答案，您可以在此处找到{https://stackoverflow.com/a/59974770/3231884）。我添加了一些细节，因为在检查了他的回答之后，我花了几个小时才完全了解我该怎么做。

去那里，您现在可以完美地看到Andreas所说的屏幕

Answer 5

Azure存储GPv2中的静态网站不同于Azure App Service。它仅托管这些静态Web文件，其中包括HTML / CSS / JavaScript文件，其他文件可以在浏览器中处理，例如图像，robots.txt等。由于没有IIS，它无法处理服务器端脚本。因此，web.config文件无济于事，它无法更改访问路由并属于IIS的服务器端脚本。

实际上，您可以在Azure门户中看到这些单词。

配置Blob服务以进行静态网站托管可让您在存储帐户中托管静态内容。网页可能包含静态内容和客户端脚本。 Azure存储不支持服务器端脚本。 Learn more

并参考Static website hosting in Azure Storage的Learn more链接

与静态网站托管相比，最好使用Azure App Service托管依赖服务器端代码的动态网站。

如果需要URL重写功能，我建议为您的应用程序使用Azure App Service。

web.config重写规则在Blob存储中的Azure静态网站中不起作用

5 个答案: