将Angular应用程序的多个版本部署到Azure应用程序服务

我有一个角度的应用程序，我可以部署到Azure应用程序服务没有任何问题

首先，我使用以下命令编译我的应用程序：

ng build --output-path=dist --aot -prod

然后我将以下

web.config

添加到

dist

文件夹：

<configuration>
    <system.webServer>
         <rewrite>
            <rules>
              <rule name="AngularJS Routes" 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>
          <caching enabled="true" enableKernelCache="true">
              <profiles>
                  <add extension=".js" policy="DisableCache" kernelCachePolicy="DisableCache" />
              </profiles>
          </caching>
    </system.webServer>
</configuration>

这会将包含不同版本应用程序的文件夹

en

和

fr

输出到

/dist

。我在每个版本的应用程序中添加了一个

web.config

，例如在

/dist/en

和

dist/fr

中

接下来，我将压缩en&fr文件夹，并使用上面的

ZipDeploy

进行部署

我可以在以下位置看到我的应用程序主页运行良好：

https://<site>.azurewebsites.net/en
https://<site>.azurewebsites.net/fr

https://.azurewebsites.net/en
https://.azurewebsites.net/fr

但是-当我在

https://.azurewebsites.net/fr/redirect.html#state....

（我正在使用Azure B2C登录），我收到以下错误：

您没有查看此目录或页面的权限。

这感觉就像iis试图将我的url解释为一个目录，而不是让Angular处理路由，但我不确定

---

有人知道如何正确地做到这一点吗？

我认为我们必须有到每个地区的特定路线，如下所示

---

由angular cli创建的i18n多语言网站也存在问题

您需要的：

1） 确保根文件夹中只有1个web.config（不在./fr或./en下）

2） 确保fr/index.html具有正确的基标记

<base href="/fr/">

<base href="/en/">

3） 确保您的en/index.html具有正确的基本标记

<base href="/fr/">

<base href="/en/">

4） 唯一web.config的内容需要包括以下代码：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
      <rewrite>
        <rules>
            <rule name="SPA Routes FR" stopProcessing="true">
                <match url="fr/.*" />
                <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" appendQueryString="true" url="fr/index.html" />
            </rule>
            <rule name="SPA Routes EN" stopProcessing="true">
                <match url="en/.*" />
                <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" appendQueryString="true" url="en/index.html" />
            </rule>
        </rules>
    </rewrite>
  </system.webServer>
</configuration>

---

如果您的URL中有一些查询参数，则需要“appendQueryString”。

要查找通用解决方案，请参阅下文

它有两个功能：

• 通过重定向处理默认语言（我们的默认语言是

  de

  ）
• 处理任何语言的重新布线
  • 它使用正则表达式从路径的开头捕获语言部分（2个字符的语言字符串+斜杠），例如

    de/

    或

    en/

  • 然后，它使用捕获组重写路径

注:

• 这不会限制用户可以通过url请求哪些语言代码
• 如果您想明确支持哪些语言，可以使用以下内容替换正则表达式，以仅支持de+en+fr:
  

  ^（（？：de|en|fr）\/）.

根据您的描述，我假设

en

和

fr

文件夹位于

D:\home\site\wwwroot

下，您可以利用它们检查部署的web内容。根据您的重写规则，由于

en

和

fr

是文件夹，url重写规则可能不起作用，因此我假设在访问

https://.azurewebsites.net/en

，您应该会看到

您没有权限查看此目录或页面的错误。可能我误解了您的问题，或者你已经配置好了吗？此外，你可以缩小这个问题的范围。另外，
https://.azurewebsites.net/fr/redirect.html
是否可以按预期工作？如果有两个以上的应用程序，是否有通配符语法？我在想类似于
的东西，然后重写将包括匹配的第一部分。@Koja是的，下面是我的答案。如何使用ng cli将“unique”web.config放在根目录中？我们在angular.json中将其作为资产处理，但随后它也将被放置在fr或en文件夹中，因此不在根目录中。您所说的“根目录”文件夹（web.config应该存在的地方）是什么意思？它是dist文件夹（即/fr，/en folders的父文件夹）@SuparnaGharpure是的，它是dist文件夹