I've configured Azure CDN (standard Microsoft profile/tier) over an Azure storage account to serve my static frontend website. I've added a custom domain to the Azure CDN endpoint, let's call this www.example.com. Now, let's assume the storage account is suddenly unavailable due to an outage in that region.
Questions
1. If the user hits www.example.com, would they be able to view the frontend website?
2. If the CDN endpoint caches the website, for how long would it serve the frontend website while the underlying storage account is down.
P.S.
I've read this answer to setup Azure front door but I'm trying to not modify the setup unless absolutely required.
If the user hits www.example.com, would they be able to view the frontend website?
Yes, users should be able to view the website because the content is cached by CDN. From this link:
An object that's already cached in Azure CDN remains cached until the
time-to-live period for the object expires or until the endpoint is
purged. When the time-to-live period expires, Azure CDN determines
whether the CDN endpoint is still valid and the object is still
anonymously accessible. If they are not, the object will no longer be
cached.
If the CDN endpoint caches the website, for how long would it serve the frontend website while the underlying storage account is down.
That would depend on how you have configured the cache settings for the CDN. As long as the content is cached, CDN will not try to hit the source to get the new content. To learn more about caching and expiration, you may find this link useful: https://learn.microsoft.com/en-us/azure/cdn/cdn-manage-expiration-of-blob-content.
Related
I just need to know when to use the Origin Types in Azure CDN endpoints.
I have already created a Web App service and when I create an endpoint, i am presented with a list of Origin Types: Storage,Web App,Cloud service,Custom origin. If I choose Web App, I see my Web App. If I choose Storage, I see the storage account i created. My purpose is to have a fast web app by caching all "cachable" assets.
When creating an Azure CDN endpoint, what or when should I use the following Origin Types :Storage,Web App,Cloud service,Custom origin?
I have not seen any documentation that provides any guidance on this.
For Azure service like Storage, Web App, Cloud service, you can use that respective origin type, for other public custom name or IP address, you can select Custom origin. See the process of creating a CDN endpoint.
Especially, if you host a static website on the Azure storage account. 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. If so, you can select primary static website endpoint in the custom origin, see details here.
I want to to be able to serve a SPA using just the Azure Front Door / and not Azure CDN. Looks like the Front Door provides the caching that the CDN would provide and I can add multiple regional storage accounts to it, making it global at scale.
The problem is, I can't match the path to index.html files. Found this feedback and it looks like this can be solved using the URL rewrite and redirect but couldn't figure out how.
I have /test/ and /test to match with the route below, so it should be matching /test and pointing the request to /test/index.html but this is not working. Can we not do file-based forwards?
This took some time to figure out but here's the solution.
Create Blob Storage(s)
To host the SPA you'll need blob storage accounts in Azure and these storage accounts should be configured to receive static webpage traffic. Navigate to Settings and then Static website in the blob storage settings.
To add content here - navigate to your blob storage again and you should see a container named $web.
Now the $web container is the one that you should put all your static files in, just make sure it's publicly accessible (depending on how you created it, it might not be)
More documentation on how to make a static website using blob storage is here: https://learn.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website
Get the static website endpoint
Once you enabled the static website and click on the static website blade, it should give you a different endpoint than the regular blob access endpoint - one that supports the static website. Something that looks like: https://somerandomstorageaccount.z8.web.core.windows.net/
Add the static website endpoint(s) to Azure Front Door as back-end
Navigate to your Front Door designer
Navigate to your Back-end pool and add a new entry if you don't have anything.
You should now add this new website endpoint as a back-end to your Azure Front Door. Picture below is the update configuration, but adding it is equally simple, you just add it as a Custom Host back-end type and point it to your blob static website location.
To enable better performance, use multiple storage accounts (from different regions) and add all of those to back-end in your Front Door configuration and turn-on the caching in Front Door.
#Mavi Domates' answer above is great, but doesn't address how to make an SPA route correctly using Blob Storage.
Root Cause: Blob Storage's static website doesn't rewrite URLs and returns back 404 for SPA routes that don't exist exactly in the storage container.
Azure CDN Fix:
Create URL Rewrite rules to forward any zero-length file extensions back to index.html. Link
Azure Front Door Workaround:
(Notice this says Workaround... this is not a fix). On your Blob Storage Static website config, set both the Index document name and Error document path to index.html. This causes any 404 error to be redirected to your SPA entrypoint. Your SPA will work, but any direct navigation to a SPA endpoint will return a 404. (This carries a whole host of other problems, but at least the site works, right?)
I have a static website hosted in a storage account, and i want to be able to manage the request/response headers. I found some sources about people that used Function App Proxy as a workaround. And it all works well. But i am using Azure CDN to cache the website and deliver it. So i tried to create a CDN endpoint, using custom origin, and connect it to the Function App Proxy. But the CDN is not able to pull and cache the content. Any idea if this anyhow is possible to work? I definitely need the CDN in front of the website, in order to achieve better performance.
From what I’ve been told by the Azure support staff, the Azure CDN is at best deprecated at the moment while they work out the details of a new service they are supposed to roll out eventually. For that reason and because the particular site I am building requires the content to secured (It’s going to be paid for) I need to look somewhere else for a CDN since the current Azure offering doesn’t offer that possibility.
I was thinking of using Cloudfront but the dilemma I’m having is where to store my files. I cannot seem to find anything online about inter-operability between Azure and Cloudfront (using either Cloudfront with Azure Blob Storage, or an Azure Web Worker and S3/Cloudfront for file storage and CDN).
Does anybody have any experience, tips, pointers, or gotchas on doing this? Or perhaps a recommend another service I can use?
To point your CloudFront CDN to your Azure Blob storage you will need to set up a managed custom domain on your Azure storage service and point your CloudFront CDN origin domain name to this custom domain.
Steps:
Create a CNAME entry for your domain to point to your blob storage (eg CNAME blob.mydomain.com to myservice.blob.core.windows.net)
Add a managed custom domain to your Azure storage account: blob.mydomain.com
Create a CloudFront CDN distribution with origin server blob.mydomain.com
Use your CloudFront CDN url to access your resources eg: http://acbdefgh.cloudfront.net/users/john
Alternatively set up a CNAME to point to your CloudFront CDN domain. Eg avatar.mydomain.com to acbdefgh.cloudfront.net and update your CloudFront distribution CNAME with avatar.mydomain.com
The ability to invalidate cached objects is a good example of why you might want to use Amazon's CloudFront CDN over the Azure CDN. Using the steps above you could for example use CloudFront to cached objects that occasionally need to be invalidated (such as profile pics - avatar.mydomain.com) and the Azure CDN for everything else (blob.mydomain.com) where both sub domains point to the same azure blob storage account myservice.blob.core.windows.net.
I have created a CDN endpoint at [id].vo.msecnd.net, and I have deployed a production mvc4 cloud service web role.
It has images in a root-level /cdn folder, but I cannot get those images to load via cdn. I can access them via direct URL. For example, this works:
[site].cloudapp.net/cdn/eb303.gif
but not:
[id].vo.msecnd.net/eb303.gif
The cdn endpoint is enabled and set up under the hosted service that the web role is in. The documentation I have been reading indicates that nothing more is required. I am using a bizspark license, but as far as I can tell that should include CDN endpoints.
Is there a step I am missing?
Thanks!
Sometime it may take up to 1 hour before your CDN endpoint is ready to server your content. It does work with any kind of deployment staging or production.
Do you still have the problem? If you still have the problem you may need to contact Azure Support because if you have enabled the CDN, you should be good to go.