Step-by-Step Guide: Deploying a React App on AWS EC2
Hello there! In this post, we will create an AWS infrastructure and deploy a React app to Amazon EC2. See the architecture diagram below.
Pre-requirements:
- AWS Account
- GitHub Account
- Node and React installed on your local machine
1. Create a GIT repository and setup our React App
Let’s start by creating a new repository, which we will use for our React app. Choose a repository name that you prefer. Then, you can select the “private” option for repository visibility.
After you finish, click on the “Create Repository” button.
Once the repository is created, proceed to copy the repository URL from the HTTPS tab.
Paste it onto your machine using the following command:
git clone <your-repo-url>
After successfully cloning the Git repository, open Visual Studio Code and navigate to the cloned repository folder. Then, create a React app using the following command:
npx create-react-app .
Make sure you have installed React and Node on your local machine.
Next, edit the App.js
file to display a basic page that says "Hello, world."
function App() {
return (
<div>
<p>hello world</p>
</div>
);
}
export default App;
After the process is complete, let’s try running it locally on our machine first.
npm start
Once our React app is ready, proceed to push the code to the GitHub repository.
git add .
git commit -am “create react app”
git push
2. Create EC2
Log in to your AWS account and search for EC2.
From the EC2 console dashboard, in the Launch instance box, choose Launch instance
Enter a preferred name for your EC2 instance, and in the OS section, select Ubuntu 20.04.
Select the t3.micro instance type and click on “Create new key pair.” We will use this key pair to SSH into the EC2 instance we’re creating.
Leave the VPC and subnet as default. Choose “Enable” for auto-assigning a public IP. Click on “Create security group” and provide a name for it.
Leave the rest of the configurations as default and click on “Launch Instance.”
Wait until the instance status is “Running,” then you can proceed to SSH into the EC2 instance to install the react dependency for our web app.
3. Install the dependency for react app
- To access the EC2 server, you can use MobaXterm, a free software that you can download from https://mobaxterm.mobatek.net/.
- If you’ve chosen a key pair in the .ppk format, you’ll need to use PuTTY, which you can download from https://www.putty.org/.
- Open MobaXterm and select “Session.”
- Enter your EC2’s public IP address and use the username “ubuntu.” Check the “Use private key” option and select the key pair you created in AWS.
- Update the package
sudo apt-get update -y
- Install npm
sudo apt install npm -y
- Install node version 20
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
- Install the Nginx web server to run your react
sudo apt install nginx -y
- Create a directory for react
sudo mkdir /var/www/html/my-react-app
- Configure Nginx
sudo vi /etc/nginx/conf.d/react.conf
- Update the server block
server {
listen 80;
listen [::]:80;
root /var/www/html/my-react-app/build;
#react app
location / {
try_files $uri /index.html;
}
}
- Create a folder named “my-app” to place your React app project.
cd /home/ubuntu
mkdir my-app
cd my-app
- Clone react app
git clone <repo-url>
I change the repository name from rprass-react-app to rp-medium-react. Sorry for the confusion
If you’re prompted for a password, follow this link to create a Personal Access Token (PAT)
- Install your React project dependency
cd <project-folder>
npm install
- Test the React app first to ensure it’s functioning correctly.
npm start
- Copy IP public to your browser <ip-public>:3000
if the page show error/not found, make sure you open port 3000 at security group
- Build React app
npm run build
- Copy the “build” folder to the “/var/www/html” directory so that Nginx can read from this folder.
sudo cp -R build/ /var/www/html/my-react-app/
- Disable the nginx default configuration
sudo vi /etc/nginx/nginx.conf
comment below line using “#”:
#include /etc/nginx/sites-enabled/*;
- Validate the nginx configuration and reload the nginx
sudo nginx -t && sudo systemctl reload nginx
- Copy the public IP of your EC2 instance and paste it into your browser. You should now be able to access your React app on port 80, as we are using the Nginx web server.
Congratulations, you have successfully deployed a React app on EC2 and made it accessible to all users.
However, the infrastructure we’ve constructed lacks security and high availability due to a couple of reasons:
- Placing the web server in a public subnet exposes it directly to the internet, leading to potential security vulnerabilities.
- Relying on a single instance for the web server doesn’t provide the desired level of high availability.