在一个Azure Blob存储上托管多个Angular应用 [英] Hosting multiple Angular apps on one Azure Blob Storage
问题描述
在工作中，我们将多个Angular JS应用托管在一个Azure Blob存储上.有一个Azure函数可以充当代理，并导航到合适的应用程序文件夹和html文件.
At work we are hosting multiple Angular JS apps on one Azure Blob Storage. There is an Azure Function which acts as a proxy and navigates to the suitable app folder and html file.
现在，我想用Angular 9应用程序替换一些Angular JS应用程序.
Now I want to replace some of the Angular JS apps with Angular 9 apps.
但是上述方法在Angular JS应用程序中很好用，不适用于Angular 9应用程序.
But the above-mentioned approach which works fine for the Angular JS apps does not work with the Angular 9 app.
如果我将Angular 9应用作为静态网站托管在其他存储上，则可以正常工作.但由于不可能在Azure存储帐户上将多个应用程序托管为静态网站，因此我正在寻找解决此问题的方法.
If I host the Angular 9 app as static website on a different storage, it works fine. But as it is not possible to host more than one app as static website on an Azure Storage Account, I'm looking for a solution for this issue.
是否可以在一个Azure Blob存储上托管多个Angular 9应用程序? 如果是，我该怎么做才能使这项工作成功?
Is it possible to host more than one Angular 9 app on one Azure Blob Storage? If yes: What should I do to make this work?
提前谢谢！
推荐答案
您可以在子文件夹中部署静态角度应用程序，并在不同的子文件夹中同时拥有多个应用程序.它将需要进行一些配置更改，可能还要进行一些代码更改，因为默认配置将无法加载.
You can deploy static angular apps in subfolders and have multiple at the same time on different subfolders. It will require some configuration changes, possible some code changes because the default configuration will fail to load.
主要有2个问题； baseHref和LocationStrategy.
There are 2 main issues; baseHref and LocationStrategy.
- 修复的第一部分:基本标记
当基本标签配置错误时，该应用程序无法加载，并且浏览器控制台显示404-找不到文件的错误.看看它在哪里找到这些文件并适当调整基本标签.
When the base tag is misconfigured, the app fails to load and the browser console displays 404 - Not Found errors for the missing files. Look at where it tried to find those files and adjust the base tag appropriately.
在子文件夹结构化生产服务器上，您可以对其进行配置以防止错误.例如，当加载应用程序的URL是 http://www.example.com/my/app/，子文件夹是my/app/，您应该将其添加到index.html的服务器版本中.
On subfolder structured production server, you might configure this to prevent errors. For example, when the URL to load the app is something like http://www.example.com/my/app/, the subfolder is my/app/ and you should add to the server version of the index.html.
您可以在构建时像这样进行配置；
You can configure while building like this;
ng build --prod --output-path docs --base-href /my/app/
您还可以在angular.json中进行配置；
You can also configure in angular.json;
{
//...
"projects": {
"app": {
//...
"architect": {
"build": {
//...
"configurations": {
"production": {
"baseHref": "/my/app/",
//...
}
}
可以将baseHref设置为.，以实现一个通用应用程序，该应用程序可通过相对路径在所有子文件夹中运行，但所有使用的资产都应遵循该应用程序中的相对路径以符合规定.
It is possible to set baseHref to . to achieve a generic app which works in all subfolders by relative paths but all used asset should follow a relative path within the app to comply.
- 修复的第二部分:LocationStrategy
如果错误配置了位置策略，则应用无法加载任何子路由，并且浏览器控制台显示404-未找到. HashLocationStrategy是另一个不受此子文件夹影响的策略-子路由不匹配.
When the location strategy is misconfigured, the app fails to load any sub-routes and the browser console displays 404 - Not Found. HashLocationStrategy is another strategy which is immune to this subfolder – subroute mismatch.
HashLocationStrategy是一个LocationStrategy，用于配置位置服务以在浏览器URL的哈希片段中表示其状态.
HashLocationStrategy is a LocationStrategy used to configure the Location service to represent its state in the hash fragment of the browser’s URL.
要在Angular应用程序中启用HashLocationStrategy，我们在为RouterModule提供路由时传递{useHash:true}，如下所示:
To enable HashLocationStrategy in an Angular application we pass {useHash: true} when we are providing our routes with RouterModule, like so:
RouterModule.forRoot(routes, {useHash: true})
通过正确设置LocationStrategy和baseHref，您可以简单地将输出文件夹中的所有内容(默认为dist/)构建并复制到服务器上的子文件夹中.
With LocationStrategy and baseHref set properly, you can simply build and copy everything within the output folder (dist/ by default) to the subfolder on the server.
有关更多信息: https://celilsemi. erkiner.com/blog/static-angular-deployment-to-a-子文件夹/
这篇关于在一个Azure Blob存储上托管多个Angular应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
