CODEWITHSUNDEEP
angularroutesazure-blob-storageazure-cdnedgecast
user372225
user372225

Reputation: 851

how do I fix routing for Angular 2 app using edgecast Azure CDN?

For my Angular app, here is the app.routing.ts file:

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

export const routing = RouterModule.forRoot(appRoutes);

so on my local computer, when I do ng serve, then I can go to the address bar in the browser and type in addresses like:

localhost:4200/dashboard

localhost:4200/application

and that works great.

then I do:

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

and then copy the files from the dist folder on my local computer to Azure Blob Storage. I have to have a blob container for the files, and that container is called deploy. I end up with something like:

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

etc. etc. and I can go to:

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

and see the favicon

Then, on the Verizon Edgecast CDN, I can go to:

https://xxyz.com/deploy/index.html to start my app and login.

But I dont want to have to go to https://xxyz.com/deploy/index.html on the CDN to login.

I want to go to

https://xxyz.com/login and login there

Also, I cannot go to these locations on the CDN either:

https://xxyz.com/deploy/dashboard

https://xxyz.com/deploy/application

And what I really want is to be able to do this from the CDN:

https://xxyz.com/login

https://xxyz.com/dashboard

https://xxyz.com/application

and

https://xxyz.com/ should redirect to login page

Im using the Verizon Premium Edgecast CDN, so Im able to do URL Rewrite, but the rules that I have written have not worked so far.

Am I missing anything on the Angular side? Any ideas of URL Rewrite rules for Azure CDN or Edgecast?

Here is the current way I have tried to do URL rewrite for edgecast/Azure: enter image description here

And then here are the options in the drop down that says 'Always' in the image above:

IF options:

Always

As Number

CDN Origin

Client Ip Address

Cookie Parameter

Customer Origin

Edge Cname

Referring Domain

Request Header Literal

Request Header Regex

Request Method

Request Scheme

Url Path Directory

Url Path Extension

Url Path Filename

Url Path Literal

Url Path Regex

Url Path Wildcard

Url Query Literal

Url Query Regex

Url Query Wildcard

Upvotes: 6

Views: 1096

Answers (1)

Richard Li - MSFT
Richard Li - MSFT

Reputation: 501

You can set a "Origin path" of 'deploy' in order to remove the '/deploy/' path from being needed in the CDN url.

origin path azure

Rules engine can take up to 90 minutes to start working. Make sure you wait long enough before trying it.

After you add the Origin Path the rewrite rule should just be the following. Rule 1: If always: Feature: URL Rewrite; Source: 'login'; Destination: 'index.html' (from the dropdown, pick the one that matches your endpoint name).

Upvotes: 0

Related Questions