Azure CDN: How to URL Rewrite for specific page - azure

I have an Azure CDN profile resource with Premium Verizon tier which allows customization for Rule Engine
Created an endpoint which serves from a URL https://test-cdn1.azureedge.net the content from a storage account which is mapped as the origin to blob container in storage account with origin path pointing to blob container name /blob-container
I am trying to add Rewrite rules (in HTTP Large Object Rules Engine Section) for specific two pages
https://test-cdn1.azureedge.net/main.js URL should rewrite to https://test-cdn1.azureedge.net/js/main.d20ff936.chunk.js
This file is at /blob-container/js/main.d20ff936.chunk.js
https://test-cdn1.azureedge.net/main.css URL should rewrite to https://test-cdn1.azureedge.net/css/main.cb03e.chunk.css
This file is at /blob-container/css/main.cb03e.chunk.css
https://test-cdn1.azureedge.net/vendor.js URL should rewrite to https://test-cdn1.azureedge.net/js/js/1.77a25e9f.chunk.js
This file is at /blob-container/js/js/1.77a25e9f.chunk.js
Here is a screenshot of what I have added at hte momement and is not working.
Also for any other URL request, I wish to give back a plain old empty 404 - Not Found.
Need help, thanks

I know the problem now, solved it by a few tries, it does take some time to get effective though.
The source and destination entries are the mapped folder path to the resource, so in above the three entry would be
Source: blob-container/main.js, Destination: blob-container/js/main.d20ff936.chunk.js
Source: blob-container/main.css, Destination: blob-container/css/main.cb03e.chunk.css
Source: blob-container/vendor.js, Destination: blob-container/js/1.77a25e9f.chunk.js
Still look for a way to return 404 Not Found for all other CDN path URL fetches

Related

"WebContentNotFound" error with azure static web

I have made a storage account then enabled static website then added the html file (plus everything else i need). once everything was added into the $web i copy pasted the give url and i get a 404 error as follows:
The requested content does not exist.
HttpStatusCode: 404
ErrorCode: WebContentNotFound
RequestId : 23ac6dc2-401e-0044-7797-b2e9c5000000
TimeStamp : 2021-09-26T05:29:47.2306494Z
i have used azure before for another school project and that website worked fine. i tried uploading those files in a new storage account and they gave me the same error but the website i made 6 months ago still works. naturally i thought well if this storage account still works then i will just put the new files in here and delete this website since its not needed anymore. tried and it gave me the same error so i changed it back to the original and now i get the error with those files too. any help would be amazing.
Azure blob storage doesn’t know to route requests to /OurWebPage through our index.html it only knows to route to index.html when requests are made to the base URL as we configured the default document. This means search crawlers and anyone linking directly to a page will get this error
Here we need to use Azure CDN, with this we can configure URL rewrites.
We can create CDN resource with Standard Microsoft tier. Refer to the blog for more insights.

Azure CDN - Dynamic URL Path rewrite

I want to rewrite URLs for my static API to match the accordingly named files on my blob storage (at the moment static website with $web directory, files are in /api folder), e.g.:
/api/universities --> /api/universities.json
/api/universities/1 --> /api/universities/1.json
I have tried configuring a CDN Rule for it. But I can't get it to work, anyone who can help? Docs are really thin on variables for URL Rewriting with Azure CDN.

how to open Azure Blob url with index.html

i have an Angular web site built and hosted as a static website on in Azure Blob storage.
url looks like this.
https://xxxx.blob.core.windows.net/yyyy/index.html
when i navigate to the url it works fine. but then browser strips out "index.html" and if user refreshes the page url gets invalidated. is there a way to get make a url as such that it opens correctly with or without .html
but then browser strips out "index.html"
No, the browser does not change the URI at all. There is nothing in HTTP that says index.html is implicit in a URI.
Follow these instructions for setting up a static website in Azure Blob storage:
https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website-how-to
https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
Specifically:
Use the {accountName}.{misc}.web.core.windows.net host-name (you can configure a custom hostname separately). Do not use the blob's direct URIs ({accountName}.blob.core.windows.net)
Your file blobs must be located in a container named $web (which will be mapped to your .web.core.windows.net root).
To specify the default-document (index document), i.e. the name of the blob that will be served when a blob filename is not specified, use the az command-line or Enable-AzStorageStaticWebsite PowerShell to specify --index-document index.html or whatever your website needs (e.g. Default.html, Index.htm, etc).

CDN with Storage Account

I create the the Storage account, CDN Profile and CDN endpoint from powershell. But adding images to the storage account is a manual process after creating all azure components. Now we have the issue that images are not showing up in page. When I try to access the CDN image url directly, I get this error
The requested URI does not represent any resource on the server
But I can access the content directly by using blob storage url to ensure content exist. I tried changing the caching rules , but nothing is working. I have standard verizon cdn profile.
Any suggestions?
Update1 : When I delete the endpoint and recreate the endpoint with all images already loaded in Storage account, everything works fine. Any idea what is the predictable behaviour?
This error happens when you're using a "/" with the root container where the blob is present (sub-folders). for now the "/" are not supported, you can get around it by referencing the root container in the link, ex:
GET https://myaccount.blob.core.windows.net/$root/myphoto
When using the CDN, the format should look like the following:
http://<EndpointName>.azureedge.net/<myPublicContainer>/<BlobName>
There is also a cool tutorial on how to host static sites via blobs and CDN worth checking out: https://blog.lifeishao.com/2017/05/24/serving-your-static-sites-with-azure-blob-and-cdn
Documentation:
You can get more info from these links: https://learn.microsoft.com/en-us/rest/api/storageservices/Working-with-the-Root-Container?redirectedfrom=MSDN
https://learn.microsoft.com/en-us/azure/cdn/cdn-create-a-storage-account-with-cdn

Azure Functions Proxy - route to storage account

I could create an azure function proxy with success that routes requests to my blob storage. However, it only works if I specify the Backend URL with the full url to the blob file:
ex:
https://account.blob.core.windows.net/site/index.html
where '/site' is my container name and 'index.html' is my blob name.
I had an understanding that I could use the route template as '/site' and if I leave the Backend URL as 'https://account.blob.core.windows.net/site/' what comes after the last '/' would be routed to my storage account. Did I understand wrong?
UPDATE
After reading this other question Azure Function App Proxy to a blob storage account and update the route template / backend url it works, but if my blob name has an extension it does not work (such as .html). Any clues?
Yes we have identified a bug when URL ends with an .extension and will release the fix in the next few days. Thanks much for the feedback.
In the Azure Functions Proxy documentation they specify how to get the request parameters and pass those to your backend service.
Your template can be /site/{*restOfPath}
And your backend would be https://account.blob.core.windows.net/site/{restOfPath}
I was able to get this working only on files that do NOT have a file extension. So I was able to add an index blob and get to it from https://myfunction.azurewebsites.net/index, however, when I tried index.html, the proxy returned a message "The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."

Resources