kristarking

Posted on Mar 6

How to Set Up Nginx & SSL for Your JavaScript App on Azure VM : A Beginner’s Guide

#devops #azure #nginx #javascript

Table of Contents

Setting Up an Azure Virtual Machine Creating the VM Connecting to Your VM
Updating the System and Installing Essential Packages
Setting Up a Firewall
Installing and Configuring Nginx Installing Nginx Allowing Web Traffic
Deploying Your JavaScript Application Navigating to the Web Root Directory Cloning Your Application from GitHub Setting Proper File Permissions
Configuring Nginx for Your Application Enabling the Configuration
Setting Up SSL with Certbot Installing Certbot Enabling Auto-Renewal
Final Security Configurations
Conclusion

When building a web application, ensuring it is properly deployed and secured is crucial. In this guide, I will walk you through deploying a JavaScript application on an Azure Virtual Machine (VM) using Nginx as a web server. This guide is beginner-friendly, ensuring that even if you are new to cloud computing, you can follow along and get your application live on the internet with a secure SSL certificate that auto-renews and map the VM's public IP address to a domain name, ensuring that users can access your application through a custom domain instead of an IP address.

First, let's get an application to work with, Google search a JS app on github

Step 1: Setting Up an Azure Virtual Machine

Creating the VM
To begin, log in to your Azure portal and navigate to Virtual Machines. Click Create > Azure Virtual Machine and provide the necessary details:

Image: Choose Ubuntu 22.04 LTS (or a later version for the latest security updates).
Size: Select a VM size based on your application’s resource requirements.
Authentication Type: Choose SSH Public Key for security.
Networking: Ensure SSH (port 22, Port 80 and Port 443) is allowed so you can connect remotely.

Once all configurations are set, click Create and wait for deployment to complete. Afterward, go to the VM Overview section to copy the Public IP Address—this will be needed to connect to the VM.

Connecting to Your VM

To access your virtual machine, open a terminal (or Command Prompt if on Windows) and use SSH to connect:

ssh user@your_vm_ip

Replace your_vm_ip with the actual public IP address of your VM. Once connected, you are inside your server and ready to begin setup.

Step 2: Updating the System and Installing Essential Packages

Before deploying your application, it is best to update the system to ensure everything runs smoothly:

sudo apt update && sudo apt upgrade -y

This command updates the package list and installs any available upgrades.

Next, install essential packages needed for deployment:

sudo apt install -y git curl ufw

git allows you to clone your application from GitHub.
curl helps with downloading files and checking connections.
ufw is the Uncomplicated Firewall tool for securing your server.

Step 3: Setting Up a Firewall

To protect your VM, configure a firewall to allow only necessary traffic.

Enable OpenSSH access so you don’t get locked out:

sudo ufw allow OpenSSH

Then enable the firewall:

sudo ufw enable

Your firewall is now protecting your server while still allowing SSH access.

Step 4: Installing and Configuring Nginx

Nginx is a powerful web server that will serve your JavaScript application.

Installing Nginx

To install Nginx, run:

sudo apt install -y nginx

After installation, start the Nginx service:

sudo systemctl start nginx

To check if it is running correctly:

systemctl status nginx

If everything is set up properly, you should see a message indicating that Nginx is active.

Allowing Web Traffic

Now, update the firewall rules to allow web traffic:

sudo ufw allow 'Nginx Full'

This ensures users can access your site via HTTP and HTTPS.

Step 5: Deploying Your JavaScript Application

Your application files must be placed in the web server's root directory. To do this:

Navigating to the Web Root Directory

Move into the Nginx directory where website files are stored:

cd /var/www

Cloning Your Application from GitHub

Use git to pull your project from GitHub:

sudo git clone your-git-repo

Rename the folder to your preferred website name:

sudo mv devportfolio your-web-name (In my case, I'm using heros)

This means your application will be served from /var/www/heros.

Setting Proper File Permissions

Adjust permissions to ensure Nginx can serve the files correctly:

sudo chown -R www-data:www-data /var/www/heros
sudo chmod -R 755 /var/www/heros

This allows Nginx to read and serve the files while keeping them secure.

Step 6: Configuring Nginx for Your Application

Create a new configuration file for your application:

sudo nano /etc/nginx/sites-available/heros

Inside the file, add:

server {
    listen 80;
    server_name heros.com.ng www.heros.com.ng;

    root /var/www/heros;
    index index.html;

    location /.well-known/acme-challenge/ {
        root /var/www/heros;
    }
}

This tells Nginx to serve your application from /var/www/heros and listen on port 80.

Save and close the file.

Enabling the Configuration

Create a symbolic link to enable your new Nginx configuration:

sudo ln -s /etc/nginx/sites-available/heros /etc/nginx/sites-enabled/

Test the Nginx configuration:

sudo nginx -t

If there are no errors, reload Nginx:

sudo systemctl reload nginx

Step 6b: Map your public IP to your domain name. Domain name providers are different, if you don't know how to map your IP to your domain name, contact your domain name provider, to email you the step-by-step guide to do that. In my case, I'm using smartweb as my domain name provider

Step 7: Setting Up SSL with Certbot

Securing your site with HTTPS is critical. We will use Certbot to obtain and automatically renew an SSL certificate.

Installing Certbot

First, install Certbot:

sudo snap install certbot --classic

Then, obtain and install the SSL certificate:

sudo certbot --nginx -d heros.com.ng -d www.heros.com.ng

Certbot will automatically configure your Nginx settings for SSL.

Enabling Auto-Renewal

Certbot automatically renews certificates, but we can verify by running a test renewal:

sudo certbot renew --dry-run

This ensures your SSL certificate will renew without issues.

Step 8: Final Security Configurations

Re-enable the firewall with all necessary rules:

sudo ufw enable

Your application should now be live at:

https://heros.com.ng

By following this guide, you have successfully deployed a JavaScript application on an Azure VM with Nginx and SSL. You now have a fully functional and secure web application. Additionally, we have mapped the VM's public IP address to a domain name, ensuring that users can access your application through a custom domain instead of an IP address.

If you found this guide helpful, share your thoughts in the comments!

Happy coding! 🚀

DEV Community