DEV Community

Cover image for Hosting a static website on Azure VM and mapping it with SSL configured domain name
Sulagna Nandi
Sulagna Nandi

Posted on

Hosting a static website on Azure VM and mapping it with SSL configured domain name

Azure virtual servers can easily host static websites with minimal efforts. Here is a documentation where I have replicated a situation in which I have deployed a web server in the public subnet and hosted a static site and linked it's IP to a proper SSL configured domain name.

Here are the components needed:

  1. Virtual Network - defining the public and private subnets
  2. Virtual Machines - Web servers and Database servers(we don't need this to host the site)
  3. Domain Name - Any free or paid Domain Name
  4. Add DNS zones and Records
  5. SSL configuration with Let'sEncrypt

In this documentation we assume you have a Virtual Network with public and private subnets. And, we have a web server and database server on public and private subnet respectively.
This is the VNET configuration:
VNET

This is the Virtual Machines configuration. Here I have used Ubuntu Virtual Machine.
Note:: Database server should have Private IP.(Although, it's not used here)

Virtual Machine

Now, SSH into the Virtual Machine.

Step 1- Install apache server.
Commands used :
Gain super user : sudo su then cd
Install apache : apt install apache2
Apache
Start and Enable apache :
systemctl start apache2 then systemctl enable apache2
Enable

Step 2- Add contents of the site.
Add the contents of the site from WinSCP. ( Download from here )
Download any static website files or any of your own.
Here I have used demo static site from Free CSS template
Connect and add the contents.
Follow the steps as given here

This is how the tab looks like:
WinSCP

Step 3- Add the files and folders to proper directory
Copy all the files and folders to the /var/www/html/ directory.
Use the command : cp -r /home/#your_user_name/* /var/www/html/
Contents
Now, on hitting the public IP you get the site.
Public IP

Step 4- Now create a Domain Name
You can get a Domain Name from any Domain Registrar. Here I have got a free Domain Name from Freenom.com

Step 5- Now create DNS zone and update the NameServers
Search for the DNS zone service in Azure portal.
Next click on Add DNS zone.
Now, add your Domain Name and Create the DNS zone.
You will get some NameServers.
This is what it looks like.
DNS

Next, you need to copy these NameServers one by one and change the default NameServers of your Domain Name. For this go to Management Tools of your Domain Name.

Manage
After successfully changing the NameServers follow the next step.

Step 6- Now create DNS Records
Click on Add Record Set present on the top of the DNS zone.
Add a A record specifying the proper domain name and alias it to the public IP of the web server.

Records
Now, if you hit the Domain Name you will get your site up and running.(This sometimes may take some time)
DNS

But, the main point to be noted here is the site says "Not Secure". No one wants their site to show up like this. A HTTP request site is not any client is will to have. Everyone prefers encryption and security and thus the demand of a HTTPS site.
The next step shows how you can get the HTTPS site.

Step 7- Get the SSL encryption by Let's Encrypt
A SSL certificate is what converts the HTTP site into a secured HTTPS one. There are various SSL certificate sites from where you can request one. Here I am using the Let's Encrypt site.

Since I am using a Ubuntu machine and as per the documentation here, I will be using CertBot for easily requesting a Certificate.
Choose your Software and System type for CertBot
CertBot

Now follow the simple steps as per the CertBot.
You can refer in the picture below:

CertBot

Now on hitting the Domain Name you find your Site as Secured.
Final

Top comments (0)