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.

Enter the repository name and select the 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.

Copy URL reposiotry

Paste it onto your machine using the following command:

git clone <your-repo-url>

Process of clone repository at the local machine

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;

Create a simple page text hello world. Don’t forget to save the file after you change it.

After the process is complete, let’s try running it locally on our machine first.

npm start

React app is working on local machine

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.

Give your key pair name and choose .pem. You can choose .ppk if you want use putty to SSH

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.

Open SSH and HTTP to 0.0.0.0/0

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

Installing npm

• 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

The React app is running in development mode.

if the page show error/not found, make sure you open port 3000 at security group

Open port 3000 to anywhere (0.0.0.0/0)

• 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.

Your react app now deploy on AWS EC2

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.

What’s next?

• Terraform Tutorial: Launching a Basic EC2 in AWS using Terraform