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＆amp; amp; 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试图将我的网址解释为目录，而不是让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>

Answer 3

我认为我们必须具有到每个语言环境的特定路由，如下所示

$command = new MongoDB\Driver\Command([
    'aggregate' => 'collection',
    'pipeline' => [
        ['$group' => ['_id' => '$y', 'sum' => ['$sum' => '$x']]],
    ],
    'cursor' => new stdClass,
]);
$cursor = $manager->executeCommand('db', $command);

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

3 个答案: