CloudFlare is a service that protects your website against DDOS attacks, and it also provides some other security benefits. But if you want to host an Azure static site backed by CloudFlare, you’ll need to do the following:
The “custom domain static website azure storage” is a resource for hosting your website on Azure. This article will show you how to set up a custom domain and host your website using the CloudFlare CDN service.
Microsoft’s Azure static website hosting service allows you to create basic web pages. Using a static website is a win-win situation when combined with the possibility to utilize your own domain name (custom domain). You also won’t have to deal with sophisticated website hosting if you choose a static website.
You may also incorporate CloudFlare’s cloud network to boost performance, security, and management, making the offer even better. This is how.
In this blog article, I’ll show you how to construct and host a static website in Azure that can serve pages through HTTP and HTTPs using HTML, CSS, JavaScript, or any other content you want. We’ll link our own domain with the Azure static website using a feature called a custom domain, as well as a free CloudFlare account for DNS and URL forwarding.
It’s worth noting that you’ll be charged for any Azure resources you use. Beware if you set up your blog and then receive a fee a month later! Always make sure you know the expenditures ahead of time, even if they should be modest.
Proceed assuming you already have a Microsoft Azure account and are signed in with an administrator user account to the Azure portal.
Let’s get going!
Create a Storage Account in Azure
To Create a static website on Azure., you’ll need to Create a Storage Account in Azure first. If you don’t know how to Create a Storage Account in Azure, check out the Create a Storage Account in Azure Microsoft Learn tutorial. Below you will see the settings I’m using to set up my storage account.
Because the website I’ll be serving from Azure will not be resource heavy, there’s nothing special going on here.
Account Settings for Azure Storage
Since we’ll be utilizing the CloudFlare network in the future, there’s no need to pay a bit more for storage account redundancy. For this reason, I picked the Locally-redundant storage (LRS) option.
Using the LRS (locally redundant storage) option
Allowing HTTP and HTTPS Access to Your Static Website
It’s not yet time to develop the static website once you’ve established the storage account. If you need HTTP access to your static website on your storage account, set the Secure transfer needed option to Disabled on the storage account. As illustrated below, you’ll find this option under the Configuration area.
Activate HTTP access to your Azure Storage Account.
Your static website will never be able to offer HTTP resources until you deactivate Secure transfer needed.
You may need to wait up to a minute after disabling Secure transfer necessary for the change to take effect. When I attempted to construct the website, I received Access Denied error messages.
Create a static website on Azure.
Toggle the Static website option to Enabled in your storage account by clicking on the Static website option as shown below.
You’ll see that Azure will create a storage container in your storage account called $web and assign you a primary endpoint like https://<storageaccountname>.z13.web.core.windows.net. This endpoint will be the one you’ll use in CloudFlare once we get there.
I’ve also named an Index document index.html, as you can see below. This is so that I may upload a basic HTML file later to see whether we can access the website using our own domain.
Activating the Azure Static Website
Check out this TechSnips short how-to video for a nice video guide on running a static website on Azure.
Matt Browne of TechSnips explains how to host a serverless static website on Azure.
Configure CloudFlare DNS
Before we can link a custom domain with our Azure static website, we must first make sure our domain name’s DNS settings are correct. Assuming you’ve previously set up your site and registered a CloudFlare account, we’ll now need to add a few CNAME records that will both authenticate to Azure that we hold this domain and direct traffic to the static website’s principal endpoint.
Add the following DNS entries to your site’s DNS section in CloudFlare:
| Type | Name | Value | Status |
|---|---|---|---|
| CNAME | asverify | storageaccountname percent.blob.core.windows.net asverify | Cloudy day |
| CNAME | example.com percentage | .z13.web.core.windows.net percent storageaccountname | Cloud of orange |
Azure Static Website with CloudFlare DNS
To toggle between grey and Cloud of orange icons, click on the cloud. If the cloud is orange, CloudFlare does some magic to the asverify DNS record which will prevent Azure from verifying your custom domain.
Create a custom domain for your Azure Static Website.
Return to the Azure portal and choose Custom domain from your storage account’s menu. The choices to check the custom domain will be offered to you here. Despite the fact that Azure recommends utilizing CloudFlare to validate the account, I had no trouble doing so.
While I used option #1, I kept getting the following problem when attempting to get to the site.
<Error> <Code>InvalidQueryParameterValue</Code> <Message> Value for one of the query parameters specified in the request URI is invalid. RequestId:076c687e-b01e-0012-1c9e-31eb8e000000 Time:2019-07-03T12:51:53.7137522Z </Message> <QueryParameterName>comp</QueryParameterName> <QueryParameterValue/> <Reason/> </Error>
Provide your domain name in the box without the http or https, and then choose Use indirect CNAME validation since we’ve already set up DNS in CloudFlare. This technique will use CloudFlare’s asverify DNS record to verify that you own the domain name.
Azure Static Website with a Custom Domain
If everything goes as planned, your custom domain should be confirmed!
Experimenting with it
The basic setup should be functioning at this point. Create an index.html page with any text in it, such as “Yay!” to try it out. “My website is up and running!” This will be the static content that the user’s browser will display.
Then, go to Blobs and click on the newly formed $web storage container to upload the file to the static website.
Examining an Azure storage blob
Then, using the Upload option, upload the index.html file.
transferring a file to a storage container
Now try to navigate to http://<domainame> and https://<domainname> and you should see the text in your test index.html file.
Summary
You should now have an Azure static website up and running, accessible through your own domain, with increased performance and security thanks to CloudFlare!
The “cloudflare static website” is a website hosted by the “CloudFlare”. The service allows users to host their websites on the platform.
Related Tags
- azure static web app ssl certificate
- cloudflare azure app service
- azure custom domain validation
- cloudflare pages
- cloudflare azure cdn
