Hosting a static website on Azure VM and mapping it with SSL configured domain name
Tags: azure, tutorial, cloud
Published: 2022-08-04 05:27:00

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slws5dxnvux30q8abd5i.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/okjw2izsxscm5mlsfm3i.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6g8pxy82tl6yonttd1ej.PNG)
Start and Enable apache : 
`systemctl start apache2` then `systemctl enable apache2`
![Enable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/of12c280z6folj06f8rj.PNG)

**Step 2- Add contents of the site.**
Add the contents of the site from WinSCP. ( [Download from here](https://winscp.net/eng/download.php) )
Download any static website files or any of your own.
Here I have used demo static site from [Free CSS template](https://www.free-css.com/free-css-templates)
Connect and add the contents.
Follow the steps as given [here](https://dev.to/sulagna206/host-a-site-into-ec2-459j#step31)

This is how the tab looks like:
![WinSCP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3i25ylvmae7jnh8dl6sd.PNG)

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ymv5o42m3h2haafseigx.PNG)
Now, on hitting the public IP you get the site.
![Public IP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z82zr22yej378yo7kn0s.PNG)

**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](https://www.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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbmiqrnq06vafgl8dcra.PNG)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xvrtqrnzoa8cak9899cm.png)
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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6308c38dzmgjc6szrphj.PNG)
Now, if you hit the Domain Name you will get your site up and running._(This sometimes may take some time)_
![DNS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lwwid2lwjq4qc6q3hbe.PNG)

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](https://letsencrypt.org/getting-started/).

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftog3bafdibjl8jofdvm.PNG)

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

![CertBot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heb5m49z3wtg5utotcgv.PNG)

Now on hitting the Domain Name you find your Site as Secured.
![Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/na2zvatjs6djuba06y9f.PNG)