11

我有一个 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/distweb.config/dist/endist/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 处理路由，但我不确定。

有人知道如何正确执行此操作吗？

4

3 回答 3

10

我们也遇到了由 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”。

于 2018-04-18T11:32:29.877 回答
6

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

它做了两件事：

  • 通过重定向处理默认语言（我们的默认语言是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>
于 2020-08-11T12:17:16.570 回答
0

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

<configuration>
<system.webServer>
    <rewrite>
        <rules>
            <rule name="Angular 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" />
                </conditions>
                <action type="Rewrite" url="/fr" />
            </rule>
            <rule name="Angular 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" />
                </conditions>
                <action type="Rewrite" url="/en" />
            </rule>
            <rule name="Angular Routes default" 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="/en" />
            </rule>
        </rules>
    </rewrite>
</system.webServer>
于 2018-04-18T09:34:43.603 回答