How to Deploy React Application on Azure Virtual Machine?
Nensi Ravaliya
Devsecops Engineer @Standard Chartered ● Youtuber & Tech Content Creator ● 5x Azure, 3x GitHub, 2x Salesforce, 1x AWS SAA, 1x GCP Certified ● DevOps | DevSecOps | MLOps | Docker | Kubernetes | Jenkins | Web3 | Terraform
Prerequisites:
Now, we need to connect our virtual machine from our ubuntu/linux operating system via "SSH". So, I am using Ubuntu here.
2. Now, just open that folder in "Open in Terminal".
3. Secure your .pem file and connect through "ssh".
领英推荐
sudo chmod 400 nodejs-app-key.pem
ssh -i nodejs-app-key.pem [email protected]
4. Type the commands to update our Virtual Machine.
sudo apt update
sudo apt upgrade -y
5. Now, to run our Node.js web application we need to install Node.js and npm.
sudo apt update
sudo apt install nodejs
node -v
sudo apt install npm
npm -v
sudo apt update
sudo apt upgrade
sudo snap refresh
6. As we know, the React web application is always running on nodejs version greater than 12.22.9 but as of now, we have version 12.22.9. So we need to update it.
sudo npm cache clean -f
sudo npm install -g n
sudo n latest
If you are facing any issues here, then just close the EC2 connections and re-connect it again. Then check the versions.
7. Now, just reconnect the instance again and check the versions.
node -v
npm -v
8. Now, We have our basic React Web application on the GitHub Repository: Click Here
We will clone it from the GitHub repository by using "git clone".
ls
git clone https://github.com/Nency-Ravaliya/my-react-app
cd my-react-app
ls
sudo npm install
sudo npm start
After executing "sudo npm install" you will see "node_modules".
After executing "sudo npm start" you will see this kind of interface.
9. Now, Our Application is not running currently because we didn't provide any Port configuration to allow traffic to port "3000". So let's do it fast.
Click on "Network setting" and then select "inbound port rule" and add "3000".
10. Your React web application is running now.
Congratulations on your success!
To know more about me check my portfolio: www.nensiravaliya.me
Connect with me:
LinkedIn: Click Here
GitHub: Click Here
Twitter: Click Here
Associate DevOps Engineer @eInfochips (An Arrow Company)| 3x Microsoft Azure Certified | Linux | Git | GitHub | Bash | Ansible | Python | Terraform | Jenkins
11 个月Can you also share how we can deploy any website on azure server using Ansible? Or how we can automate the deployment on server?
Software Engineer??UET ?? AWS Community Builder | DevOps | Azure | Google Cloud
11 个月Thanks for sharing ???