DEV Community

Cover image for React App Deployment On Azure VM (NGINX) ⚛︎
Deepak Patil
Deepak Patil

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Configure NGINX with Reverse Proxy 💡

Install the nginx server

sudo apt install nginx
Enter fullscreen mode Exit fullscreen mode

Check whether the service has started using the below command.

systemctl status nginx
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
    }
}
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

Restart the nginx server

systemctl restart nginx
Enter fullscreen mode Exit fullscreen mode

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

Image description

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
Enter fullscreen mode Exit fullscreen mode

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

disown -h
Enter fullscreen mode Exit fullscreen mode

Close the SSH session we are done with deployment 🎉.

logout
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)