将多个版本的 Angular 应用部署到 Azure 应用服务 [英] Deploying multiple versions of Angular app to Azure App Service

问题描述

我有一个 Angular 应用程序，可以毫无问题地部署到 Azure 应用服务.

I have an Angular application which I can deploy to Azure App Service without any issues.

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

First I compile my application using the following command:

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

然后我将以下 web.config 添加到 dist 文件夹:

Then I add the following web.config to the dist folder:

<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 ).此时应用程序运行正常.

I then zip the contents of the dist folder up and drag it into my Azure application ( https://<site.scm.azurewebsites.net>/ZipDeploy ). At this point the app works fine.

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

My problem is that I would like to deploy different versions of the application for different locales.

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

I compile my different versions using the following commands:

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

This outputs the folders en and fr to /dist containing the different versions of the app. I add a web.config to each version of the app e.g inside /dist/en and dist/fr.

接下来，我将 en &fr 文件夹并使用上述 ZipDeploy 进行部署.

Next, I zip up the en & fr folders and deploy it using ZipDeploy as above.

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

I can see my application homepage working fine at:

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

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

However - when I get redirected to my application at https://<site>.azurewebsites.net/fr/redirect.html#state.... (I'm signing in using Azure B2C), I get the following error:

您无权查看此目录或页面.

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

This feels like iis is trying to literally interpret my url as a directory instead of letting Angular handle the routing but I'm not sure.

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

Does anybody know how to do this correctly?

推荐答案

我们也遇到了 angular-cli 创建的 i18n 多语言网站的问题.

We had also the problem for our i18n multi-languages website created by angular-cli.

你需要什么:

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

1) ensure that you have only 1 web.config in the root folder (not under ./fr or ./en)

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

2) ensure that your fr/index.html has the right base tag

<base href="/fr/">

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

3) ensure that your en/index.html has the right base tag

<base href="/en/">

4) 你唯一的 web.config 的内容需要包含以下代码:

4) the content of your unique web.config needs to include the following code:

<?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>

如果您的网址中有一些查询参数，则需要appendQueryString".

The "appendQueryString" is needed if you have some query parameters with your URL.

这篇关于将多个版本的 Angular 应用部署到 Azure 应用服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！