React App Deployment On Azure VM (NGINX) ⚛︎

Let's see how to deploy the React web application to Microsoft Azure Virtual Machine in this post. There are multiple ways to deploy React applications on a VM but we will see the most basic and easy one with the NGINX server with reverse proxy. So let's get to it.

We will start by setting up a sample virtual machine in Azure.

• Create a VM with Ubuntu Server or Windows server I will recommend using Ubuntu.
• Select the size of the VM and provide a username and password for accessing SSH.

Make Sure to enable HTTP and HTTPS ports on the VM

Once the VM is ready SSH to the VM using credentials

ssh username@<PUBLIC-IP-ADDRESS>

let's upload and get the application running.

To upload the project we can use either AzCopy Or Azure Storage. But as this is a basic deployment :), We will clone the project from GitHub. You can also refer to my project from below.

React Hello World Project

Install NodeJS using NVM or any other option. If decide to go with NVM follow the instructions on the below page.

Node Installation

Once the project is uploaded start and test the project whether it is running correctly.

npm start

Configure NGINX with Reverse Proxy 💡

Install the nginx server

sudo apt install nginx

Check whether the service has started using the below command.

systemctl status nginx

That's it now let's add configuration for our VM Public IP in NGINX.
copy the default configuration from sites-available directory and save it with name as Public IP of VM

cp /etc/nginx/sites-available/default /etc/nginx/sites-available/<PUBLIC-IP>

Open the newly created configuration file and update the configuration as below.

server {
    listen 80%;
    listen [::]:80;
    # SSL configuration 
    #   
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server;
    #
    #3 Note: You should disable gzip for SSL traffic.
    # See: https://bugs.debian.org/773332
    #
    # Read up on ssl_ciphers to ensure a secure configuration.
    # See: https://bugs.debian.org/765782
    #
    # Self signed certs generated by the ssl-cert package
    # Don't use them in a production server!
    #
    # include snippets/snakeoil.conf;
    #3 root /var/www/html;
    # Add index.php to the list if you are using PHP
    server_name 172.203.177.104;
    location / {
        proxy_pass http://127.0.0.1:3000;
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        # try_files $uri $uri/ =404;
    }
}

Save the file and create a symlink of the file in sites-enabled directory.

ln -s /etc/nginx/sites-available/<PUBLIC-IP> /etc/nginx/sites-enabled/

Restart the nginx server

systemctl restart nginx

Now start the React server and hit the public Ip in the browser you should see a similar output as below.

move the react server running in background and close the SSH session. This will persist react server from stopping and we will be able to access the application directly.

use ctrl+Z to stop the server. then use bg command to add process to background.

bg

now disown the process to make keep it running in bg.

disown -h

Close the SSH session we are done with deployment 🎉.

logout

Finally hit the public IP you should be able to access the application deployed.