Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rewrite URL for static website hosted in Azure Storage

I have deployed Angular 7 app to Azure Storage Static Website.

Angular app makes calls to .NET Core API which is deployed to Azure App Service.

Is it possible to configure URL rewrite (reverse proxy) to route Angular app requests to .NET Core API without having to enable CORS? Similar way like using Angular proxy configuration for local development?

I have read that it is possible to use URL rewrite rules in Azure CDN, but I am not quite sure how to do it. https://docs.microsoft.com/en-us/azure/cdn/cdn-rules-engine-reference-features#url-rewrite

As far as I understand it is possible to specify only relative path in URL rewrite rule.

Any help is appreciated.

like image 739
Viktors Telle Avatar asked Jan 08 '19 09:01

Viktors Telle


People also ask

Is it worth it to host a static website on azure?

I have been reasonably happy with this service, however late last year Microsoft made hosting static websites on Azure Storage generally available. There are a number of benefits in hosting your static website on Azure storage, the primary factor being cost. Storage is ridiculously cheap, especially when your site has minimal traffic like mine.

How to enable static website hosting for the storage account?

Locate your storage account and display the account overview. Select Static website to display the configuration page for static websites. Select Enabled to enable static website hosting for the storage account. In the Index document name field, specify a default index page of index.html.

How do I access static website files over azure CDN?

To make your static website files available over your custom domain and HTTPS, see Using the Azure CDN to access blobs with custom domains over HTTPS. As a part of this process, you need to point your CDN to the primary static website endpoint as opposed to the primary blob service endpoint.

Is it possible to add URL Rewrite to my site?

11 So yes you can do this, but to have it enabled you need to use the Azure Premium CDN, which is actually not very expensive and is charged by usage, so if your site is not very busy it should be fine. You will need to go into the CDN portal and rules engine and create a Url-rewrite.


2 Answers

You can use azure function proxy where your site is deployed. I am assuming for frontend you will have every url starting with /api.

{
    "$schema": "http://json.schemastore.org/proxies",
    "proxies": {
        "root": {
            "matchCondition": {
                "route": "/api/{*route}",
                "methods": [
                    "GET",
                    "HEAD"
                ]
            },
            "backendUri": "https://my-dot-net-server/{*route}": {
                //If you want to override any headers
            }
        }
   }
}

The above proxy will redirect your request to dotnet url and send the response.

like image 169
Aakash Garg Avatar answered Oct 20 '22 04:10

Aakash Garg


So yes you can do this, but to have it enabled you need to use the Azure Premium CDN, which is actually not very expensive and is charged by usage, so if your site is not very busy it should be fine.

You will need to go into the CDN portal and rules engine and create a Url-rewrite.

It will look like this..

enter image description here

enter image description here

Notice the regex [^?.]*(\?.*)?$ this will basically match any route without a file path (no file extension). This then redirects to index.html

Hope that helps you.

like image 20
Lenny D Avatar answered Oct 20 '22 06:10

Lenny D