如何使用 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 启动我的应用程序并登录。

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

我想去

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 重写的当前方式：

然后是上图中“始终”下拉菜单中的选项：

如果选项：

总是

作为数字

CDN 来源

客户端IP地址

Cookie 参数

客户来源

边缘名称

引用域

请求标头文字

请求标头正则表达式

请求方法

请求方案

网址路径目录

网址路径扩展

网址路径文件名

网址路径文字

网址路径正则表达式

网址路径通配符

网址查询文字

网址查询正则表达式

网址查询通配符

Answer 1

您可以设置“部署”的“源路径”，以便从 CDN url 中删除需要的“/部署/”路径。

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

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