In this tutorial, you will learn how to deploy react js application on was ec2 instance with NGINX server.
How to Deploy React App on Amazon AWS EC2 Instance with Linux 2 NGINX
Steps to deploy react app on an Amazon AWS EC2 instance with Linux 2 NGINX:
Step 1: Login to the AWS Console
Go to https://console.aws.amazon.com/ec2/ to log in to your AWS console management account.
Step 2: Connect to AWS EC2 Instance via SSH OR Putty
To connect AWS EC2 instance via putty SSH.
If you do not how to connect AWS EC2 instance via SSH, Read this => Connect AWS EC2 instance via ssh for Windows, Mac, and Linux users.
Step 3: Install NodeJS and NPM
Once you are connected to your aws ec2 instance, Update the Linux 2 Ubuntu packages on your AWS EC2 server:
sudo apt-get update
Type the curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash command on ssh terminal to install nvm (node version manager) on your server:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
To enable nvm by typing the ~/.nvm/nvm.sh command on ssh terminal window and press enter:
~/.nvm/nvm.shTo install node js latest version by typing nvm install <node-version> command on ssh terminal window and press enter:
nvm install 21It will install node js 21 version on your aws ec2 instance.
Type node -v command on ssh terminal window to verify nodejs version:
node -v
Step 4: Install GIT
Type sudo apt-get install git command on terminal window and press enter, this will install git on aws ec2 server:
sudo apt-get install git
Step 5: Clone & Deploy React App on AWS EC2 Instance with Linux Nginx Server
Simply type the command git clone url on the ssh terminal window and press enter, this will clone your react js application files from the github repository to aws ec2 linux 2 ubuntu instance; for example:
git clone https://github.com/tutsmake/react-app.git
Navigate to app directory using cd command on ssh terminal window:
cd react-app
After that, install Node dependencies, which will create the node-modules folder into your react app on aws ec2 instance, Simply type npm install on ssh terminal window and press enter:
npm install
Step 6: Create Your React Application Build
To use the npm run build command on aws ec2 ssh terminal window to create your react app build:
npm run build
Step 6: Install and Configure NGINX
To use the React app on Amazon aws ec2 instance, have to install the Nginx web server:
sudo yum install nginx
To configure nginx on aws ec2 instance you need to open nginx.conf file, you can do with sudo nano /etc/nginx/nginx.conf command:
sudo nano /etc/nginx/nginx.conf
To add react app build location on server block in nginx.conf file:
server {...location / {root/path/to/your/react/application/build;
index index.html;
try_files $uri /index.html;}... }
To enable and start the nginx server, run the command sudo service nginx enable and sudo service nginx start on the ssh terminal window and press Enter:
sudo service nginx enable sudo service nginx start
Step 7: Access React application in the browser
Now go to your aws ec2 console management and copy the public ip address from there. Type your copied public IP address on the browser to access your React app:
15.158.91.210:80 (public IP of the machine : port 80)
Conclusion
That’s it; You have learned how to deploy a react app on an Amazon AWS EC2 instance by installing Node.js, npm, nginx, and Git on the Linux nginx server.
Thanks for reading this tutorial.
