My DevOps Journey: Deploying a React App on AWS EC2 with Nginx

As part of my DevOps learning journey, I recently deployed a React application on an Ubuntu EC2 instance using Nginx as the web server. This project gave me hands-on experience with AWS cloud, Linux commands, Nginx configuration, and deploying frontend apps in production.

Here’s a detailed breakdown of what I did and what I learned.

---

Step 1: Launching an EC2 Instance on AWS

The first step was to create a virtual machine on AWS (called an EC2 instance).

1. Logged into our AWS account and go to EC2 → Launch Instance.

2. Selected Ubuntu AMI (Amazon Machine Image) – since Ubuntu is stable and widely used for deployments.

3. Chose a Free Tier eligible instance type (t2.micro). This keeps costs at $0 while still giving us enough power to run small apps.

4. Created a new key pair (.pem file) which is necessary for securely logging in to the instance.

5. Configured the security group to:

   • Allow SSH (port 22) → So we can connect from my local machine.

   • Allow HTTP (port 80) → So users can access our web app in a browser.

6. Finally, We clicked Launch Instance.

At this point, AWS gave us a public IP address for our instance.

To connect, We opened the terminal, navigated to the folder containing .pem key, and ran:

ssh -i "key-pair.pem" ubuntu@<public-ip>

This gave us terminal access to our remote Ubuntu server.

---

Step 2: Installing Node.js and npm

React apps require Node.js and npm (Node Package Manager).

1. First, we updated the server’s package lists:

sudo apt update

2. Then installed Node.js and npm:

sudo apt install -y nodejs npm

3. Verified installation:

node -v && npm -v

This confirmed that both Node.js and npm were available to build my React project.

---

Step 3: Installing and Starting Nginx

Nginx is a powerful web server that can serve static files (like React build files) efficiently.

We installed and started it with:

sudo apt install -y nginx

sudo systemctl start nginx

sudo systemctl enable nginx

• start → Starts Nginx immediately.

• enable → Makes sure Nginx starts automatically when the server restarts.

To confirm, I opened my instance’s public IP in a browser, and I saw the default Nginx welcome page.

---

Step 4: Cloning My React App from GitHub

Next, We needed an application to deploy.

1. I forked a React app on GitHub and cloned it onto my server:

git clone https://github.com/23Pujan/my-react-app.git

cd my-react-app

2. To personalize it, I opened the App.js file in the src folder:

cd src

vi App.js

Inside, I updated the code to display:

<h2>Deployed by: <strong>Pujan Bhattarai</strong></h2>

<p>Date: <strong>21/08/2025</strong></p>

This step made my deployment unique to me.

---

Step 5: Building the React App for Production

A React app runs on a development server by default, but in production we need optimized static files.

So I ran:

npm install

npm run build

• npm install → Downloads all dependencies listed in package.json.

• npm run build → Creates a production-ready version of the app in the build/ folder.

The build/ folder contains HTML, CSS, and JavaScript files that Nginx can serve directly.

---

Step 6: Deploying React App with Nginx

Now we needed to replace Nginx’s default files with my React build.

1. Remove the default Nginx files:
   sudo rm -rf /var/www/html/*

2. Copy React build files into Nginx’s web directory:
   sudo cp -r build/* /var/www/html/

3. Set correct ownership and permissions so Nginx can serve them:
   sudo chown -R www-data:www-data /var/www/html

   sudo chmod -R 755 /var/www/html

---

Step 7: Configuring Nginx for React

React is a Single Page Application (SPA), meaning all routes should point to index.html. Without configuring this, refreshing the page could result in a 404 error.

So I updated Nginx’s default configuration:

echo 'server {

listen 80;

server_name _;

root /var/www/html;

index index.html;

location / {

try_files $uri /index.html;

}

error_page 404 /index.html;

}' | sudo tee /etc/nginx/sites-available/default > /dev/null

Then restarted Nginx to apply changes:

sudo systemctl restart nginx

Now, Nginx was ready to serve my React app properly.

---

Step 8: Testing My Deployment

Finally, I got my server’s public IP by running:

curl ifconfig.me

When I opened http://<public-ip> in my browser → my React app appeared, with my custom message:

“Deployed by: Pujan Bhattarai – Date: 21/08/2025”

Key Takeaways

This project gave me hands-on DevOps skills:

• How to set up and connect to an EC2 instance.

• Installing Node.js, npm, and Nginx on a Linux server.

• Building and serving a React app in a production-ready environment.

• Configuring Nginx to support single page applications.

Most importantly, I experienced the full process of taking an app from local development → cloud deployment → production hosting.

Credits

This hands-on exercise was guided by the practices shared in Pravin Mishra’s FREE DevOps for Beginners Cohort. For anyone beginning their DevOps journey, it’s an excellent resource to explore and experiment with practical, end-to-end deployments.