Story line,

Ankith is an enthusiastic first-year college student who is passionate about software development. Eager to dive deeper into this field, he took the initiative to enroll in a web development course, where he mastered the art of creating static websites using HTML, CSS, and JavaScript. To solidify his skills, he brought his creativity to life by building a simple yet captivating static 2048 game that runs flawlessly in his local environment.

Now, Ankith is excited to share his creation with the world and provide others with the chance to enjoy his work. He's taken the bold step of deploying his application on a server, using Nginx to serve the HTML content to the public. This is a step-by-step roadmap that will empower you to showcase your own projects effectively. Join Ankith on this journey and discover how you can take your creations from personal projects which are running in your system to public, making your mark in the world of web development!

Introduction

Now that your application is created and running successfully on localhost, you might want to make it available to the public over the Internet. There are many ways to deploy an application. Still, in this article, we will cover one of the most widely used and highly configurable methods: deploying the application on a cloud Virtual Machine (VM).

For this guide, we are creating a virtual machine from the Azure cloud vendor. Those who want to use different cloud providers can feel free to create the VM in their preferred cloud vendor. Apart from that, all the remaining steps are the same.

Why Azure VM?

Azure VMs offer flexible, scalable compute resources to host your web applications, and deploying static sites on a VM can provide full control over the hosting environment, making it an ideal choice for certain use cases.

Prerequisites

Before we begin, ensure you have the following:

• An active Microsoft Azure account. If you don’t have one, sign up here.

• Basic understanding of static web applications (HTML, CSS, JavaScript).

• A local web application that you intend to deploy (optional) .

• Git and Github for code versioning.

• Basic knowledge of Azure Virtual Machines, SSH (Secure Shell) for remote access and SCP(Secure Copy) for file transfer.

With that set, we are ready to deploy our application publicly.

Step 1: Create an Azure Virtual Machine

1.1. Log in to the Azure Portal

• Go to Azure Portal, log in with your credentials, and navigate to the "Virtual Machines" section.

Or if you face trouble in creating your azure free-trial account then consider using Microsoft learn code sandbox.

1.2. Create a New Virtual Machine

• Once logged into the Azure portal, create the azure vm by clicking 'Create a resource’. You will be navigated to a new window where you can able to see all the azure services category wise

• Click "Create" in the top left corner; a drop-down menu will open. Under that, click "Create Azure VM." Now, select the necessary options for how you want your VM to be configured.

• Once everything is done, click "Review and Create," and now your Azure VM is being created. After some time, the Azure VM will be set up, and we will deploy our website on it.

1.3. Access the Virtual Machine via ssh (secure shell)

• After creating the VM, note its public IP address. If you are using a Linux OS, connect to the VM using an SSH client.

ssh -i  /path/to/your/private/key username@your-vm-ip

Output:

To connect to the Ubuntu VM from Windows OS, we need to install PuTTY software, as a direct SSH connection is not possible.

• Paste the copied public Ip in the Hostname field and then the location of your private key for authenticating to the created vm by following Connections->SSH->Auth->Credentials

• Click 'Open' to establish an SSH connection to the Azure VM. If everything is correct, PuTTY will establish the connection, and you can work on the connected VM.

Step 2: Install Necessary Software on the VM

Once the SSH connection is established, install the necessary software for hosting.

2.1. Install a Web Server

For serving a static web application, you can install a simple web server like Nginx or Apache.

To install Nginx (recommended for static sites):

sudo apt update
sudo apt install nginx

• After nginx webserver installation you can check the status of the software by executing

sudo systemctl status nginx

Output:

• Start the Nginx service:

    sudo systemctl start nginx 
    sudo systemctl enable nginx
  

• Once the webserver is installed you can verify that everything works fine by entering the public IP in the browser. you will see the nginx welcome page

Troubleshooting;

If your browser displays it in this way then possible problems are

• Http and https Port haven’t been opened in the Network Security Group

• Nginx webserver is not installed or configured properly.

• Nginx service is not running.

• Either site is not properly configured in the sites-available directory or sites which is configured in sites-available directory is not properly linked in sites-enabled directory

Step 3: Upload Your Static Web Application

3.0 Clone the git repository (optional)

git clone https://github.com/luchichang/2048-Game.git
cd 2048-Game

note: ( for this blog, by doing the above step we have got the source code of a simple HTML website ) if you have your own web application running in your local machine you may skip this part and continue in section 3.1

Output:

3.1. Transfer Files to the VM from your local machine

It's time to transfer or upload our code files to the Virtual Machine. There are several tools and methods available for this purpose. In this blog, we will focus on SCP (Secure Copy) and FileZilla.

You can upload your static files using tools like SCP or SFTP.

Using SCP:

scp -i /path/to/your/private/key -r /path/to/your/webapp username@your-vm-ip:/path/to/remote/machine

• This command copies your static website files (HTML, CSS, and JavaScript) to the default web directory for Nginx, which is located at /var/www/html.

  Common Errors:

  • When uploading files from the local machine to the remote machine using the scp command, make sure to provide the correct absolute path. Otherwise, the compiler may misinterpret the file's location.

Output:

Note: when you project has versioning enable then during the transmission of app from the local to remote you have to exclude the .git folder so that it won’t be transmitting the previous commit files which saves memory and transmission time.

• Removing the default files in the nginx default location

    rm -rf /var/www/html/*
  

• Copy the files to the default location

    cp -r /path/to/app/ /var/www/html/
  

3.2. Verify Files on the VM

SSH into your remote server and check whether the files are copied correctly to the nginx default location

ls /var/www/html

Step 4: Configure the Web Server

4.1. Update Nginx Configuration

If you're using Nginx, configure it to serve your static web app properly.

Edit the Nginx configuration file:

sudo vim /etc/nginx/sites-available/default

• Modify the configuration to ensure it points to the directory where your static files are located. It should look something like this:
  nginx

server {

    listen 80;

    server_name _;


    root /var/www/html;

    index index.html;


    location / {

        try_files $uri $uri/ =404;

    }

}

• Test the configuration of the nginx webserver is correct by running the below command. this will run the suite of test cases against the nginx.conf file if everything looks correct it will display the success message

 sudo nginx -t

• Once the nginx test command returns positive output save and restart the web server by executing the below command.

    sudo systemctl reload nginx
  

4.2. Test the Web Application:

• Now once all the above steps are completed correctly its time to test our web app is working fine for that open any of your preferred browser and in the search bar search your vm public Ip and now the webserver will be serving you the configured html file.

In your web browser, visit the public IP of your VM (e.g., your-vm-ip) and ensure your static site is loading properly.

Output:

Hurray 🥳🎉!! You have deployed the static web-app. At this stage your web-app is successfully deployed and it can be accessed through the internet.

Step 5: Configure Domain Name (Optional)

While your web app is accessible to the entire internet, it can be challenging for users to remember your IP address when they want to access it. A domain name is much easier to remember, so it's advisable to configure one that directs users to your VM’s IP address.
Prerequisite: You will need to purchase a domain name from a domain vendor. Once you have obtained your domain, you can proceed with the following steps to access your static website through a custom domain name (e.g., www.yourdomain.com):

Configure DNS: Depending on your domain name registrar, create an A, AAAA, or CNAME record that points to your VM’s public IP address.

1. Update Nginx Configuration: After the DNS record is created, modify the Nginx configuration to include your domain name in the server_name directive.

server_name www.yourdomain.com;

2. Restart Nginx: Restart the Nginx web server to apply all the changes

sudo systemctl restart nginx

Step 7: Monitor and Scale the Application

Bonus Point:

Your app is successfully deployed on the VM and is performing very well. As time passes, the number of your app’s user base grows, but suddenly your app becomes unavailable because your web server stops serving it. After notified about the issue, you SSH into the VM and, after extensive troubleshooting, discover that the problem is due to resource drain.

To prevent this issue from occurring in the future, you decide to make your system highly available and fault-tolerant. After conducting thorough research, you choose to utilize Azure for this purpose.

Once your static web application is deployed, consider using Azure Monitor to track performance and resource usage. If your site experiences high traffic, you can scale the VM or use Azure Load Balancer for better distribution of the load.

Conclusion

Deploying a static web application on a Microsoft Azure Virtual Machine (VM) gives you complete control over your hosting environment. With just a few steps, you can set up your VM, install a web server, and host your static site for everyone to access. Whether you are hosting a simple landing page or a more complex application, Azure VMs offer the flexibility and scalability to meet your needs.

---

Next Steps

• Making your static web app Highly available

• Making your static web app Fault Tolerant and Highly Available

• Automating the deployment using Azure DevOps or GitHub Actions for continuous deployment (CI/CD).