DEV Community

Cover image for Deploying a React Application on an Ubuntu EC2 Server (AWS) Using Nginx
Duru Juliet Chinenye
Duru Juliet Chinenye

Posted on

Deploying a React Application on an Ubuntu EC2 Server (AWS) Using Nginx

Overview
I successfully completed a remote Linux deployment project as part of DMI Cohort 2. In this project, I deployed a React application on an Ubuntu EC2 instance and served it through Nginx. The workflow covered end‑to‑end server setup, secure SSH access, installation of Node.js and Nginx, building the React application for production, and configuring Nginx to serve the optimized build. This experience strengthened my confidence in Linux administration, cloud deployment practices, and real‑world DevOps workflows

Prerequisites
An AWS account with permission to create EC2 instances
Linux commands (cd, ls, nano, sudo, etc.)
An SSH client such as Git Bash
Internet access for package installation and AWS connectivity
A React project that is ready for a production build

Step 1: Launching an Ubuntu EC2 Instance
I start by logging into the AWS Console and navigating to EC2.
From there, I launch a new instance and configure it with the following settings:
Name: react-app-server
AMI: Ubuntu Server 22.04 LTS
Instance type: t2.micro (Free Tier eligible)
Key pair: I create a new key
Network settings:
Allow SSH (22)
Allow HTTP (80)
Once the instance is running, I take note of the public IPv4 address because I’ll need it throughout the deployment.

Step 2: Connecting to the Server via SSH
After the instance is ready, I connect to it securely using SSH.
I ensure my key file has the correct permissions, and then I authenticate into the server using the public IP address.

Step 3: Installing Node.js, Nginx, and Required Build Tools
The first thing I do on the server is update the package list and install the tools I need.
I install Node.js (LTS version) because I’ll use it to build the React application.
Next, I install Nginx, which will serve the production build.
I enable and start Nginx so it runs automatically whenever the server boots.
At this point, I put the server’s public IP address in a browser, and I see the default Nginx welcome page. That confirms Nginx is running correctly.

Step 4: Configuring Nginx to Serve the React Application
With the production build ready, I configure Nginx to serve it. After testing the configuration, I reload Nginx. Once Nginx restarts, my React application becomes accessible through the server’s public IP address.

Step 6: Validating the Deployment
Finally, I open a browser and navigate to the server’s public IP address.
At this point, I see my React application running in production mode, served cleanly through Nginx.

Grateful to the DMI Cohort 2 community and mentors Pravin Mishra, Praveen Pandey, Abhishek Makwana, and the entire DMI community for the guidance and support throughout this Linux-focused session.
hashtag#Linux hashtag#AWS hashtag#EC2 hashtag#ReactJS hashtag#Nginx hashtag#DevOps hashtag#CloudComputing hashtag#DMICohort2 hashtag#MicroInternship

Top comments (0)