将多个版本的Angular应用程序部署到Azure App Service

Question

我有一个Angular应用程序,我可以毫无问题地部署到Azure App Service.

首先,我使用以下命令编译我的应用程序:

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>

然后我将dist文件夹的内容压缩并将其拖到我的Azure应用程序(https://<site.scm.azurewebsites.net>/ZipDeploy)中.此时应用程序运行正常.

我的问题是我想为不同的语言环境部署不同版本的应用程序.

我使用以下命令编译我的不同版本:

ng build --output-path=dist/en --aot -prod --bh /en/ --i18n-format=xlf --locale=en

ng build --output-path=dist/fr --aot -prod --bh /fr/ --i18n-file=src/locale/messages.fr.xlf --i18n-format=xlf --locale=fr

这个输出文件夹en和fr以/dist包含所述不同版本的应用程式.我web.config在应用程序的每个版本中添加了一个,例如内部/dist/en和dist/fr.

接下来,我压缩en&fr文件夹并使用ZipDeploy上面的方式部署它.

我可以看到我的应用程序主页正常工作:

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

但是 - 当我被重定向到我的应用程序时https://<site>.azurewebsites.net/fr/redirect.html#state....(我正在使用Azure B2C登录),我收到以下错误:

You do not have permission to view this directory or page.

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

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

Answer 1

我们还有一个由angular-cli创建的i18n多语言网站的问题.

你需要什么:

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

2)确保您的fr/index.html具有正确的基本标记

<base href="/fr/">

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

<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".

Answer 2

对于寻找通用解决方案的任何人，请参见下文。

它做两件事：

• 通过重定向处理默认语言（我们的默认语言是de）
• 处理任何语言的重新布线
  • 它使用正则表达式从路径的开头捕获语言部分（2 个字符语言字符串 + 斜杠），例如de/或en/
  • 然后使用捕获组重写路径

笔记：

• 这不会限制用户可以通过 url 请求的语言代码
• 如果您想明确支持哪些语言，您可以将正则表达式替换为以下内容以仅支持 de + en + fr：
  ^((?:de|en|fr)\/).*

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <httpRedirect enabled="true">
      <add wildcard="/" destination="/de" />
    </httpRedirect>  
    <rewrite>
      <rules>
        <rule name="angular" stopProcessing="true">
          <match url="^(.{2}\/).*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/{R:1}" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>