Following instructions in Static website hosting in Azure Storage and Add a custom domain to your endpoint I've managed to get a static website with a custom domain and https (albeit with a "www" subdomain) via Azure CDN.
However, the blob endpoint ends "/$web/index.html" and that is also required to access the custom domain. So it is of the form:
https://www.<customdomain>.com/$web/index.html
Because of the SPA framework I'm using, that immediately becomes:
https://www.<customdomain>.com/$web/index.html#/home
which is a bit long.
I see instructions for handling https on root custom domains and may give that try if I'm feeling brave. But is there a way to suppress the /$web/index.html part? Currently, if I go to:
https://www.<customdomain>.com
I get:
<Error>
<Code>InvalidQueryParameterValue</Code>
<Message>Value for one of the query parameters specified in the request URI is invalid. RequestId:...</Message>
<QueryParameterName>comp</QueryParameterName>
<QueryParameterValue/>
<Reason/>
</Error>
Instead of mapping your custom domain to regular blob endpoint (e.g. https://mystorageaccount.blob.core.windows.net/), please try to map it to static website endpoint which looks something like https://mystorageaccount.z22.web.core.windows.net.
Once you do that, then you will not need to specify $web in your requests as this endpoint always picks up the content from $web blob container.
You can find the static website endpoint for your storage account in going into Static website section for your storage account in Azure Portal.
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 now successfully setup my static website in a CDN,
Is there a way to specify that index.html is the default document ?
It is a 1 page site I just would like to browse to the root url without having to type /index.html ..
Thank you
Based on your previous question, I am assuming that you have set CDN to map to blob storage. If this is correct, unfortunately it is not possible as of today because Azure Storage does not have a support for default document. This is one of the most requested feature on Azure Feedback - https://feedback.azure.com/forums/217298-storage/suggestions/1180039-support-a-default-blob-for-blob-storage-containers however it is still pending.
If you want, you can create a proper website (instead of having this index.html file in blob storage) and serve that website via CDN. You can find more details about it here: https://azure.microsoft.com/en-in/documentation/articles/cdn-websites-with-cdn/.
Microsoft is working on this. At the moment you have only two possibilities to solve this:
Use CDN: With the premium version of Verizon you can create rules like Redirect Rules
Create an Web-App which act as a proxy and serves/redirects (to) blobs
Using Premium CDN
If you purchased the premium version of Verizon CDN then you can create custom Rewrite rules. You'll find this in the "Advanced Features" section of your CDN endpoint. Once you click on "Manage" you will be redirected outside the portal where you can manage your cdn.
Hier you must create a redirect rule like this:
Note that each change in a rule takes about 5 hours to be activated.
To check if your redirect rule works you can install IIS and activate the URL Rewrite Module. In the Rewrite Module you can test your rules.
Open IIS
Open Url Rewrite Module
Add Rule
Add blank rule
Test Pattern
Please note that if you test your pattern, it must begin with the CDN source path which is a number and your endpointname like /829292/movies.
Sometimes redirect rules causes problems with CDN Purging. You can solve this isssue by adding an if clause in your rule which says that redirect should only be active if it is not the purge agent.
This is now possible with Static websites on Azure Storage
Creating a Static Website
Navigate to your storage account
Select Static Website from the blade and toggle to "enabled"
Once you save, this will create a URL endpoint and also a bucket named $web to host your files
Go to your $web storage container and upload any files you want
Add CDN / Custom Domain
Navigate to your CDN Profile and either Create / Edit your Endpoint
Select 'Custom Origin' and use the 'Origin Hostname' that was created for your static site
Give Azure up to 30 minutes to propagate all the settings
Further Reading
Tutorial: Host a static website on Blob Storage
Tutorial: Use Azure CDN to enable a custom domain with SSL for a static website
Is there any way to host static website (HTML + CSS + JS) in Azure? Like we do Amazon S3 Static Website hosting, they charge only for storage.
UPDATE: 29-June-2018
It is now possible to host static websites in Azure Storage. You can read more about it here: https://learn.microsoft.com/en-gb/azure/storage/blobs/storage-blob-static-website
As of today, no. Azure doesn't have an equivalent of that. You can however host static sites as Web Apps and for free as well if you're comfortable with the restrictions with free tier.
It's not officially supported, but if you hosted your site in Azure Blob Storage's root container and made the container publicly accessible, you could probably achieve the same affect. You can even give the blob storage account a custom domain name.
Only downside is that you'll have to figure out a good deployment story. Two of your options are to use an FTP-like client such as CloudBerry to manually deploy your site, or write your own deployment script using the blob storage api
I found a way to host a static website in an Azure blob, using a subdomain and an http re-direct
I do the following
1) In Azure I create a storage account with a container ( called docs ) that has Blob access policy.
2) I upload my static website to the docs container using the storage explorer. This includes some PHP files in a sub folder.
3) In the DNS I set up a cname record for a subdomain ( called info say) with alias myblob.blob.core.windows.net ( where myblob is the name of my blob)
4) In the DNS I create an Http redirect for record to a file on the subdomain for www with url http://info.mydomainname.com/docs/index.html
5) In Azure I create a custom domain for info.mydomainname.com
My website then works however if someone knows the location of the PHP files then they can download them which means I must not store secrets in them.
I have asked if there is a work around here
I have now successfully setup my static website in a CDN,
Is there a way to specify that index.html is the default document ?
It is a 1 page site I just would like to browse to the root url without having to type /index.html ..
Thank you
Based on your previous question, I am assuming that you have set CDN to map to blob storage. If this is correct, unfortunately it is not possible as of today because Azure Storage does not have a support for default document. This is one of the most requested feature on Azure Feedback - https://feedback.azure.com/forums/217298-storage/suggestions/1180039-support-a-default-blob-for-blob-storage-containers however it is still pending.
If you want, you can create a proper website (instead of having this index.html file in blob storage) and serve that website via CDN. You can find more details about it here: https://azure.microsoft.com/en-in/documentation/articles/cdn-websites-with-cdn/.
Microsoft is working on this. At the moment you have only two possibilities to solve this:
Use CDN: With the premium version of Verizon you can create rules like Redirect Rules
Create an Web-App which act as a proxy and serves/redirects (to) blobs
Using Premium CDN
If you purchased the premium version of Verizon CDN then you can create custom Rewrite rules. You'll find this in the "Advanced Features" section of your CDN endpoint. Once you click on "Manage" you will be redirected outside the portal where you can manage your cdn.
Hier you must create a redirect rule like this:
Note that each change in a rule takes about 5 hours to be activated.
To check if your redirect rule works you can install IIS and activate the URL Rewrite Module. In the Rewrite Module you can test your rules.
Open IIS
Open Url Rewrite Module
Add Rule
Add blank rule
Test Pattern
Please note that if you test your pattern, it must begin with the CDN source path which is a number and your endpointname like /829292/movies.
Sometimes redirect rules causes problems with CDN Purging. You can solve this isssue by adding an if clause in your rule which says that redirect should only be active if it is not the purge agent.
This is now possible with Static websites on Azure Storage
Creating a Static Website
Navigate to your storage account
Select Static Website from the blade and toggle to "enabled"
Once you save, this will create a URL endpoint and also a bucket named $web to host your files
Go to your $web storage container and upload any files you want
Add CDN / Custom Domain
Navigate to your CDN Profile and either Create / Edit your Endpoint
Select 'Custom Origin' and use the 'Origin Hostname' that was created for your static site
Give Azure up to 30 minutes to propagate all the settings
Further Reading
Tutorial: Host a static website on Blob Storage
Tutorial: Use Azure CDN to enable a custom domain with SSL for a static website