Hosting a Website on Azure VM (Linux) in XAMPP Server and securing it with SSL Certificate.

13 min readMay 16, 2021

So, you want to host your website and you really don’t have a budget to afford the hosting fees and buy a domain name. Well in this article I will show you exactly how you can host your website on Azure, link it with domain name and as a bonus I will demonstrate on how to secure it using free SSL Certificate as well.

The very first thing you need is an Azure subscription which you can get from here. Bear in mind that you need to give credit card details in order for you to get verified as valid user, or if you are a student with student email, then you can get your subscription without any credit card information.

1. Creating Virtual Machine on Azure

First you obviously want a Virtual Machine hosted on Azure, if you don’t already have one Virtual Machine up and running, you can create one by following this article by me on “Creating Virtual Machine on Microsoft Azure.” For this walkthrough, I have created an Ubuntu based Linux VM on Azure. Although, this guide can be used on any Debian-based Linux VM.

2. Starting to Virtual Machine

Once you have successfully created VM, you need to connect to it in order to get access and install required software to host website. Before you connect to it, make sure it is up and running, you can check that by going to VM resource page and checking if “Start” option is unavailable to select:

Before we go into connecting to VM, you need to note few things down:

Username: this is your VM username that you created upon the creation of your VM
Password: this is the password that you created
Public IP address: you can get this from the overview tab of you VM:

3. Connecting to Virtual Machine through PowerShell

Once you have the required information, you need to replace it in the following code and enter it in Windows PowerShell:

ssh <username>@<ip address>

When enter the code in PowerShell, you will be prompted to permanently add the address to trust list, type yes and continue with entering password of you VM:

If everything is correct, then you will see a big list of information about the current VM along with the terminal of Linux. You can type “pwd” (check working directory) and “whoami” (check the username of the current user of machine) to check some general information about machine:

As we will be doing everything in Linux, it is recommended to have a basic knowledge of Linux, but fret not if you don’t have any experience with it as I will be explaining all the commands for you.

4. Installing XAMPP Server in Virtual Machine

Now that we are in our machine, we need to make sure it is updated and upgraded before installing XAMPP server. To do that, you need to execute the following command in terminal (in PowerShell). sudo is keyword to run commands as an admin, apt is the package manager for debian-based Linux distros:

sudo apt update && sudo apt upgrade

Upon completion of the previous task, you need to type (you need to right click while in terminal in order to paste the copied material) the following command in order to install XAMPP Server with all required tools (MySQL/MariaDB, PHP, Apache Server), wget is the keyword to download files from internet:

wget https://www.apachefriends.org/xampp-files/7.2.2/xampp-linux-x64-7.2.2-0-installer.run

Once the download is complete, you need to allow the execution permission on the downloaded file in order to run the installer by using the following command, chmod is used to change the mode of a file, and +x means add executable, followed by file name:

sudo chmod +x xampp-linux-x64-7.2.2-0-installer.run

Now you need to run the installer by using this command and answer Y or Yes to each query:

sudo ./xampp-linux-x64-7.2.2-0-installer.run

The XAMPP Server is now installed and is located at the folder “opt/lampp”. To start the server, run the following command:

sudo /opt/lampp/xampp start

If everything is okay and there is no error in starting the services, you will see the following message:

And there you have a website up and running on Azure VM, to check you can go to your browser and type your virtual machine Public IP address from step 2, and you can see the default XAMPP webpage:

5. Assigning Domain to the Public IP Address

Before we go any further, we need to make sure that the public IP address of Azure VM is static, meaning that it will not change after every bootup. To do that, you need to go to the VM resource overview page and click on the “Public IP address” entry (make sure that your VM is running):

Then select static from “IP address assignment” options and click “Save”, this will reboot your VM, so save any unsaved work if you were using the VM for some other purposes:

If you already have a domain name, then you can skip this step and move to the next step. If you don’t, then you can get it from any of your favorite website, but I like to use Freenom which provides free domain names for period of 1 year.

Once you have created your account on Freenom, you can go to Service → Register new Domain on the navigation bar, which will direct you to the page to check the availability for your new domain:

After entering your desired domain name and validation, you can choose one of these four free domains and click Checkout:

Now at checkout, you need to select the Period from drop down menu you want to buy the domain for, as mentioned before, it is free for period of your first year. Moreover, you need to enter the public IP address of your machine as well so the domain knows which IP address to direct to and follow along with the rest of the steps and you will see order completed page:

Once you have successfully acquired a domain name for your website, its time to link it to your virtual machine through a DNS zone in Azure. In order to do that, go to your Azure portal home page, and type “DNS zones” in search bar and select it:

then you need to click “Add” to add a new DNS zone:

this will direct you to DNS zone creation page, where you need to fill the following information and proceed with clicking “Review + Create ”and confirm it by pressing “Create” again upon successful validation:

Subscription: Choose your current Azure subscription.
Resource Group: You can choose an existing resource group or create a new one, I would personally add this into the same resource group as my Virtual Machine.
Name: Enter the domain name of your website.
Resource group location: This will be automatically chosen if you have selected existing resource group, you can choose any other location otherwise.

Once the deployment is complete, click on “Go to resource” to redirect to resource page. From there you need to add two Record sets by clicking “+ Record set”:

the following are the setting for the first record set, enter the static public IP address of your machine in IP address tab and click OK:

key in the settings for second record set, here the Alias is the domain of your website that you created in previous steps and click OK:

Now that you have created a DNS zone for your domain name, you need to go back to Freenome Domain Area and click “Manage Domain”:

then select “Manage Freenom DNS” tab:

from there you need to first delete this entry:

and add a new entry with the following settings, here the Target is the domain name of your website, and click “Save Changes”:

And that’s it you have assigned domain name to your virtual machine, to test it, you can go to browser and type your website URL. You will be greeted with this:

6. Setting up your website/web application

Now that you have your website accessible to internet, you are ready to put your awesome application up there. Now there are several ways you can upload your web application from your local computer. One of them includes using file transfer services, such as FileZilla. But I personally like to use a source control service such as GitHub, the reason is that you can easily code and test you application on your local computer and just update the code on VM with one simple command. If you are new to GitHub, you can follow this guide to get started with GitHub.

But for the sake of this tutorial, I will be using a simple PHP application that I created on my GitHub. You can clone it and use it on your VM if you don’t have any PHP web application for testing.

Now you need to clone this repository in your Azure Virtual Machine, to do you first need to navigate to the folder where all the web applications are stored on XAMPP Server, you can do that by using the following command:

cd /opt/lampp/htdocs/

Once you are in the correct directory, you will see the following content upon typing ls:

Now you need to clone the repository by using the following command:

sudo git clone https://github.com/ItzDeadShot/sample-php-app.git

Once the cloning is done, you can see the “sample-php-app” in the directory:

Now you can go back to your browser and enter your machine ip address but this time instead of /dashboard/, enter /sample-php-app/. From the list of files, you need to click install.php file to setup the database:

<ip address>/sample-php-app/

Now you can click on the “public” folder to access the sample application:

This will take you to the sample php application showing basic CRUD (Create, Read, Update and Delete) operations:

7. Accessing phpMyAdmin (SQL Manager)

You can access phpMyAdmin by using the following url, where <ip address> is the address of your virtual machine:

<ip address>/phpmyadmin

But when you go to the site, you are shown the following error blocking you to access the page, the reason behind this is to restrict access to it from outside entity, but since we are using it for testing we can disable it:

Access forbidden when accessing phpMyAdmin

In order to fix that, you need to go to the following file by using following command:

sudo nano /opt/lampp/etc/extra/httpd-xampp.conf

Once the file is open, replace the following text:

<Directory "/opt/lampp/phpmyadmin">
    AllowOverride AuthConfig Limit
    Require local
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</Directory>

to this:

<Directory "/opt/lampp/phpmyadmin">
    AllowOverride AuthConfig Limit
    Require all granted
    ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</Directory>

Now you just need to restart the apache service by using:

sudo /opt/lampp/xampp restart

Upon successful restart, you will be able to access the the phpMyAdmin page:

P.S: If you get error while restarting the xampp server, you can run these commands and restart again (by using above command):

sudo rm /opt/lampp/logs/httpd.pid

Now upon restarting the service, if you get this error:

then you need to find the process id on which the apache server is running on by using:

sudo netstat -nap | grep :80

these number is the process id of the apache server, you need to take note of it to use in later command:

now just use this command to kill the process:

sudo kill [process_id]

finally restart the xampp server:

Now you will see ok with everything which means there is no error in it.

8. Installing SSL Certificate

Now that we have a working website, we can think about its security. Arguably the most important step in improving any website’s security is by installing an SSL Certificate which will encrypt the traffic between the server to end users, this will protect the users from numerous attacks.

We will be using ZeroSSL, first you need to make an account on ZeroSSL. After creating an account, you need to go here to create new SSL certificate. First, they will ask you to enter the URL or domain name of your website:

then select “90-Days Certificate” as it is the only free option, don't worry you can renew it later:

in the next step check the “Auto-Generate CSR” option:

finally in the last step, choose the Free plan and click “Next Step”:

Now that you have successfully created an SSL certificate, you need to verify that the website belongs to you. Choose the “HTTP File Upload” option:

Now you need to follow few steps in order to successfully verify the domain. First you need to download the Auth File by clicking “Download Auth File”, then you need to navigate to the folder containing the Auth File and type PowerShell in address bar and hit Enter:

In PowerShell, execute the following command:

scp .\<downloaded_file_nam> <vm_username>@<vm_ip_address>:/dev/shm

This is require your VM password, entering that will successfully transfer the file from your PC to Azure VM:

Now connect back to your Azure VM (follow step 3), and navigate to your webroot folder by running this command:

cd /opt/lampp/htdocs/

then you need to make 2 new directories:

sudo mkdir .well-known
sudo mkdir .well-known/pki-validation

now copy the file that you copied from your PC to this VM:

sudo cp /dev/shm/<downloaded_file_name> .well-known/pki-validation/

finally you can check if the file is accessible from your website through internet by clicking on the link provided by ZeroSSL:

if everything is correct then you will see a page like this:

Following through the wizard, you need to click “Next Step” and then “Verify” to verify the domain. After successful verification, you will be taken to certificate installation page, where you need to download the zip file and move it to you VM like you did in with the Auth File:

Once it is moved to your VM, you first need to unzip the file using the following commands:

sudo chmod +x <your_website>.zip
sudo apt install unzip
sudo unzip mediumblogtutorial.ml.zip

Now you need to move files to their appropriate folders by using the following commands:

sudo cp /dev/shm/certificate.crt /opt/lampp/etc/ssl.crt/
sudo cp /dev/shm/ca_bundle.crt /opt/lampp/etc/ssl.crt/
sudo cp /dev/shm/private.key /opt/lampp/etc/ssl.key/

Finally you need to configure your ssl file to map the certificate to the website, for that you need to edit the httpd-ssl.conf file using this command:

sudo nano /opt/lampp/etc/extra/httpd-ssl.conf

and change this:

<VirtualHost _default_:443>#   General setup for the virtual host
DocumentRoot "/opt/lampp/htdocs"
ServerName www.example.com:443
ServerAdmin you@example.comSSLCertificateFile "/opt/lampp/etc/ssl.crt/server.crt"
SSLCertificateKeyFile "/opt/lampp/etc/ssl.key/server.key"
#SSLCACertificateFile "/opt/lampp/etc/ssl.crt/ca-bundle.crt"