How to Deploy React App on Azure Virtual Machines?

In this article, we will study how we can deploy our existing React web application to Azure VM on Ubuntu Server. We will also see how to use the public IP of the Azure VM to access the React application using Nginx. For this article, you should know about setting up a VM in Azure. We will see how to deploy applications on Linux Server.

React is a Javascript framework for developing and building single-page web applications in Javascript. It supports rapid development and Scalability. It is a popular framework today that allows features like state management, Dynamic loading, and Fast Deployment.

• To learn more about React refer to this – Introduction To React

Azure VMs are computing resources that can be used for various computing applications. VM can host different OS and provides a multi-platform environment for building and running applications in Azure. Azure VMs are highly scalable and fault tolerant providing seamless performance to users.

The following are the benefits of deploying react applications on Azure VMs:

• Azure VMs provide a simple and efficient option for the deployment of applications
• It supports high scalability and throughput. It can be scaled up or down as per requirement along with the feature of autoscaling.
• Supports different OS for deployment.
• It provides high availability and fault tolerant infrastructure for applications.

The following steps helps in guiding you to deploy the react application in Azure VM:

Step 1: Create and Setup Azure VM

• First, we have to create an Amazon VMs instance running any Ubuntu Server of your choice.
• Under Create VM on Azure give your VM a name and select Ubuntu Server as OS. Specify other options as per your choice.

• Make sure you allow HTTP traffic to the VM. You can also allow HTTPS if you want.

Step 2: Install Nodejs and Configure Project

• Now SSH to VM using username and password.

• Install the Nodejs on VM using node version manager or any other option. We will use node version manager.
• Install Node Version manager.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

• Activate NVM software by restarting the software with the following command:

source ~/.bashrc

• Install latest Nodejs using below command.

nvm install --lts

• Create alias to default version.

nvm alias default <YOUR VERSION OF INSTALLED NODEJS>

• Once the node is install upload the project to VM. You can use AZcopy or Azure Storage for uploading. For this article we will clone project from github : https://github.com/Deepcodr/react-hello-world

• Now go to source folder and install all the node modules and required packages.

npm i

• Now run and test the application using npm start.

npm start

Step 3 : Install and configure NGINX Reverse proxy

• Install NGINX on VM using below command.

sudo apt install nginx

• Switch user to root for further configuration.

sudo su

• Now lets add configuration for our VM in Nginx configuration. Go to /etc/nginx/sites-available and copy default configuration to file with name as Public IP of VM.

cp default <YOUR_PUBLIC_IP>

• Now edit the newly created file and edit the server configuration to look like below.

• Once edited save the file and create a sym link to sites-enabled folder using below command.

ln -s /etc/nginx/sites-available/<YOUR FILE NAME> /etc/nginx/sites-enabled/

• Finally restart the service.

systemctl restart nginx

Step 4 : Test the application

• Now to test the application go to browser and enter your ip address and hit the url

• If you see the result page then cofiguration is successful.

How do I monitor and scale my React app on Azure VMs?

Use Azure Monitor to track the performance and health of your VM. Set up alerts to get notified of issues. For scaling, you can manually resize your VM or use Azure Scale Sets to automatically scale based on demand.

What should I do if my deployment fails?

Check the logs of your web server (e.g., Nginx logs) to identify any errors. Verify file permissions to ensure your app files are accessible. Check network configurations, including NSGs and firewall rules, to ensure traffic is allowed to and from your VM.

How can I secure my React app deployment on Azure VMs?

Use Azure Network Security Groups (NSGs) to restrict access to your VM. Set up HTTPS to secure web traffic using SSL/TLS certificates, which can be obtained for free from Let’s Encrypt. Keep your VM and software up to date with security patches.

How do I handle environment variables in my React app?

Create a .env file in your React app directory to define environment variables. Access these variables in your React app using process.env. REACT_APP_VARIABLE_NAME. Ensure to rebuild your app after making changes to the .env file.

How do I configure a custom domain for my React app on Azure VM?

First, purchase a domain from a domain registrar. Update your domain’s DNS settings to point to your VM’s public IP address. In your web server configuration (e.g., Nginx), set the server_name directive to your custom domain. Ensure your DNS changes have propagated and restart your web server.