在一个 Azure Blob 存储上托管多个 Angular 应用 [英] Hosting multiple Angular apps on one Azure Blob Storage
问题描述
在工作中，我们在一个 Azure Blob 存储上托管多个 Angular JS 应用程序.有一个 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?
先谢谢你！
推荐答案
您可以在子文件夹中部署静态 Angular 应用程序，并在不同的子文件夹中同时部署多个应用程序.这将需要一些配置更改，可能会更改一些代码，因为默认配置将无法加载.
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.
有两个主要问题；baseHref 和 LocationStrategy.
There are 2 main issues; baseHref and LocationStrategy.
- 修复的第一部分:基本标签
当基本标签配置错误时，应用程序无法加载并且浏览器控制台显示 404 - Not Found 错误文件丢失.查看它试图在哪里找到这些文件并适当调整基本标签.
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 - Not Found.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 that is immune to this subfolder – subroute mismatch.
HashLocationStrategy 是一个 LocationStrategy，用于配置 Location 服务以在浏览器 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-subfolder/
这篇关于在一个 Azure Blob 存储上托管多个 Angular 应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
