# 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](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”**

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1755789359561/83647344-742d-4cab-961a-d41d16f10b9c.png align="center")

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