angular - 如何使用 edgecast Azure CDN 修复 Angular 2 应用程序的路由？

Question

对于我的 Angular 应用程序，这里是 app.routing.ts 文件:

const appRoutes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'dashboard', component: DashboardComponent },
    { path: 'application', component: ApplicationComponent },
    { path: 'decision', component: DecisionComponent },
];

export const routing = RouterModule.forRoot(appRoutes);

所以在我的本地计算机上，当我执行 ng serve 时，我可以转到浏览器的地址栏并输入如下地址:

本地主机:4200/仪表板

本地主机:4200/应用程序

效果很好。

然后我做:

ng build --base-href /deploy/ --prod

然后将文件从我本地计算机上的 dist 文件夹复制到 Azure Blob 存储。我必须有一个用于文件的 blob 容器，该容器称为 deploy。我最终得到类似的东西:

https://xxyz.blob.core.windows.net/deploy/favicon.ico
https://xxyz.blob.core.windows.net/deploy/index.html
https://xxyz.blob.core.windows.net/deploy/assets/Logo.svg
https://xxyz.blob.core.windows.net/deploy/main.68dbes8ef20.bundle.js
https://xxyz.blob.core.windows.net/deploy/styles.a2b9daa6d36.bundle.css

等等等，我可以去:

https://xxyz.blob.core.windows.net/deploy/favicon.ico

并查看图标

然后，在 Verizon Edgecast CDN 上，我可以转到:

https://xxyz.com/deploy/index.html启动我的应用程序并登录。

但我不想去 https://xxyz.com/deploy/index.html在 CDN 上登录。

我想去

https://xxyz.com/login并在那里登录

此外，我也无法访问 CDN 上的这些位置:

https://xxyz.com/deploy/dashboard

https://xxyz.com/deploy/application

我真正想要的是能够从 CDN 执行此操作:

https://xxyz.com/login

https://xxyz.com/dashboard

https://xxyz.com/application

和

https://xxyz.com/应该重定向到登录页面

我使用的是 Verizon Premium Edgecast CDN，因此我能够进行 URL 重写，但我编写的规则到目前为止还没有奏效。

我是否遗漏了 Angular 方面的任何内容？ Azure CDN 或 Edgecast 的 URL 重写规则有什么想法吗？

这是我尝试为 edgecast/Azure 重写 URL 的当前方法:

然后是上图中显示“始终”的下拉列表中的选项:

IF 选项:

一直

作为数字

CDN 来源

客户端 IP 地址

Cookie 参数

客户来源

边缘名称

引用域

请求 header 文字

请求头正则表达式

请求方式

请求方案

Url 路径目录

URL 路径扩展

Url路径文件名

URL 路径文字

网址路径正则表达式

网址路径通配符

URL 查询文字

网址查询正则表达式

Url 查询通配符

Answer 1

您可以设置 'deploy' 的“原始路径”，以便从 CDN url 中删除需要的 '/deploy/' 路径。

规则引擎最多可能需要 90 分钟才能开始工作。确保在尝试之前等待足够长的时间。

添加原始路径后，重写规则应该如下所示。规则1:如果总是:功能:URL 重写；来源:“登录”；目的地:'index.html'(从下拉列表中选择与您的端点名称匹配的那个)。