How to Deploy a React App on an Amazon EC2 Instance

In this article, we will learn the process of deploying a React application to an EC2 instance using Nginx to serve the build files. We will also set up Node Version Manager (NVM) to manage Node.js versions on the EC2 machine and ensure proper directory permissions for smooth deployment. After reading this article, you will have a clear understanding of how to use deploy react application on Amazon EC2 instance. Let's walk through step by step  :-

1. Creating a React Application Locally

First of all, create and build your React application on your local machine

Create a React App:

npx create-react-app my-app
cd my-app
npm run build

This creates a build/ directory containing the production-ready files of your React application.

2. Set Up Directories on EC2

Now, we will configure a directory/folder on our EC2 instance to store the React app's build files.

Log in to your EC2 Instance:

ssh -i "your-key.pem" ec2-user@your-ec2-public-ip

Create the Directory:

sudo mkdir -p /var/www/opr

Set Permissions:

sudo chown -R ec2-user:ec2-user /var/www/opr

Alternatively, if you're using a different user, replace ec2-user with your desired user to setup permissions.

3. Install NVM (Node Version Manager)

Next, let's install NVM, which will allow us to manage different versions of Node.js on our EC2 instance.

Install NVM:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

Source the Bash Configuration:

source ~/.bashrc

Install and Use Node.js (Version 18):

nvm install 18
nvm use 18

Check if NVM is Installed:

command -v nvm

Uninstall NVM (if needed):

if you want to uninstall any node version below is the command for that

nvm uninstall 18

4. Transfer Build Files from local to Amazon EC2

After configuring all setup's. It's time to transfer the build files to the Amazon EC2 instance.

Transfer Files Using SCP:

scp -i "ec2-key.pem" -r ./build ec2-user@your-ec2-public-ip:/var/www/opr

5. Configure Nginx to Serve the React App

To serve the React application, we will use Nginx as a web server.

Edit Nginx Configuration:

sudo nano /etc/nginx/nginx.conf

Add Server Block:

Let's assume we want to serve our react app on port 8080. Add below code in your nginx.conf file and save it.

server {
    listen 8080;
    server_name _;
    location / {
        root /var/www/opr/build;
        try_files $uri /index.html;
    }
    # Optionally, configure logging
    access_log /var/log/nginx/react_access.log;
    error_log /var/log/nginx/react_error.log;
}

Set Permissions for Nginx:

Provide read permission to nginx to read our build folder

sudo chown -R nginx:nginx /var/www/opr/build

Alternatively, you can provide read access to all users (though not recommended for production):

sudo chmod -R 755 /var/www/opr/build

Test Nginx Configuration:

sudo nginx -t

Restart Nginx:

sudo systemctl restart nginx

6. Update EC2 Security Group

Ensure that your EC2 instance's security group allows inbound traffic on port 8080.

Modify Security Group:

In the AWS Management Console, navigate to the EC2 instance's security group and allow TCP traffic on port 8080 for all IP addresses (or restrict to specific IPs if preferred).

7. Access the React App

Your React application should now be accessible via the public IP of your EC2 instance on port 8080. Open your browser and visit:

http://your-ec2-public-ip:8080

You should see your React application live!

Conclusion

In this Article, we’ve covered the steps for deploying a React app to an Amazon EC2 instance using Nginx and NVM.

• Built the React app locally.
• Set up necessary directories and permissions on the EC2 instance.
• Installed and configured NVM for Node.js management.
• Transferred the React app build files to the EC2 instance.
• Configured Nginx to serve the app.
• Updated EC2 security groups to allow access to the app on port 8080.

This setup provides a reliable way to host your React app on an EC2 instance with Nginx acting as the web server.