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.
Install NodeJS using NVM or any other option. If decide to go with NVM follow the instructions on the below page.
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.
Top comments (0)