将多个版本的Angular应用程序部署到Azure App Service [英] Deploying multiple versions of Angular app to Azure App Service
问题描述
我有一个Angular应用程序,可以毫无问题地部署到Azure App Service.
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:
You do not have permission to view this directory or page.
感觉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 App Service的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!