Host a Static Web Site with Azure and https - Express Guide

Picture Source: https://azure.microsoft.com/en-ca/blog/azure-storage-static-web-hosting-public-preview/

Create a static web site

1. Login to Azure portal (If you donat have you can signup for free)
2. Go to storage accounts and cerate a new storage account with your desiered name.
2.1. Make sure to select 'Storage V2' in Account Kind.
3. Go to Static Website under newly created Storage Account.
3.1. Enable it and give index page (index.html) and error page (404.html).
3.2. Save.
3.3. Copy the Primary endpoint to later use.
4. Go to Containers under newly created Storage Account
4.1. Inside that you can see $web container - which holds your websites' files (html, javascript, css)
4.2. Upload a file(s) - I uploaded as index.html which I have set as my index page, so when I use my url; the content of this page will be shown.
NOTE: You can download and use Microsoft Azure Storage Explorer to update the files in $web.
5. Open a new tab in your browser and paste the copied Primary endpoint and hit enter.
5.1. The content from your index.html will show.

Add Custom domain with https

1. Purchase a domain name from a registar like google, godaddy, etc.
2. Log in to your Azure portal.
3. Go to your Storage Account which you have hoseted your static web site.
4. Search for Azure CDN.
5. Create a new CDN Profile with your desiered name.
5.1. Select create a new CDN endpoint now.
5.2. Select 'Custom Origin' as Origin Type.
5.3. Give the Primary endpoint name without https://
NOTE: It will take some time to get the CDN endpoint to ready.
6. Create a custom domin by clicking on the 'Custom Domain' inside the CDN profile.
7. Go to your domain registar and go to DNS section.
7.1. Add a CNAME.
7.2. Copy the Endpoint hostname from your CDN Profile to CNAME hostname.
8. Go to your Azure CND Profile and add your custom domain name under Custom hostname.
8.1. If it didn't capture that keep deleting and pasting it until you get the green check mark.
8.2. Click on Add.
NOTE: It can take up to 10 minutes for 'www.mysitename.com' settings to reach every CDN POP.
9. Click on your custom domain
9.1 Enable HTTPS by selecting 'On'
9.2 Select CDN Managed. This will go and register a SSL Certificate for your custom domain.
10. Check your site by navigating to the url after some time.
NOTE: Use https://www to navigate to your website.

Comments

Post a Comment

Popular posts from this blog

Deploy Angular 8 app to Azure with Azure DevOps

Image
1. Create a Azure Web App. Use the following Configurations:      Runtime Stack: ASP.NET V4.7      Operating System: Windows You can select your own subscription plan, resource group and region.  2. Create a Git repository to hold the Angular app 2.1. Initialize your angular application 2.2. Commit and Push the code.  3. Create a Pipeline in Azure DevOps.  3.1. Login to the Azure DevOps. ( https://dev.azure.com/ ) 3.2. Create a project:          I'll select Private as visibility and Git as Version control.  NOTE: Azure DevOps provides different features.               For this task we are going to focus on Pipelines.  4. Pipeline Part 1: Integrate Git  From the Connect section select: Use the classic editor. 4.1. Select a Source as GitHub and authenticate with your GitHub account using OAuth.  4.2. Select your repository which holds the angular app. 4.3. Select the branch. This is the branch that Azure DevOps will
Read more

Apache ActiveMQ 5 with .Net Core 3.1 and C#

Image
Hi All..   In this post I'm going to explain how to use Apache ActiveMQ 5 (which is a popular Java based messaging server) for .Net Core 3.0+ with C#.  Let's get started. Prerequisites 1. Visual Studio (I'll be using 2019 Community)  2. .Net Core framework (I'll be using 3.1) 3. Java JDK or JRE Installed and Java Environment variable has been set (Since I'm doing in a Windows 10 computer)  Ok.. If you have the above requirements then let's get start the actual work. 1. Download and install ActiveMQ 5  Go to http://activemq.apache.org/components/classic/download/ and download according to your operating system.  I'll download .zip package for Windows 2. Copy the .zip file and put it inside a folder as you like or install with the installers if you download the installer.  If you got the .zip file like me; then extract it inside the folder that you paste the .zip file Then you will get a folder with the ActiveMQ package  3. Start the Active MQ Server  Open th
Read more

Firebase with.Net Core and C#

Image
Hi folks, Are you developing web applications with .net ? Are you supporting mobile applications to communicate with your applications ? Are you thinking of providing realtime capabilities with your apps? Then I suggest you to read on Firebase Real-Time Dataabses by Google. " The Firebase Realtime Database is a cloud-hosted database. Data is stored as JSON and synchronized in realtime to every connected client. " - Google Firebase Team Read more:  https://firebase.google.com/docs/database/ In this post I'm going to discuss what is firebase but I'm going to discuss how to work with it with .Net C#. Firebase doesn't provide a separate library or a nugget to work with .Net, so you might find this bit tricky when you have to work with it from the backend. Senario To demonstrate the solution I will create a scenario. In my scenario we have created a video call function (which is implemented with OpenTok library) and it allows users to create sessions and i
Read more