Tools: Deploying a Real React App on an Ubuntu VM with AWS and Serving It with Nginx

Overview ## What You’ll Need ## Step 0: Launch an Ubuntu Server on AWS EC2 and Connect via SSH ## 0.1 Launch the EC2 Instance ## 0.2 Retrieve the Public IP Address ## 0.3 Connect to the Server via SSH ## Step 1: Update the System ## Step 2: Install Node.js and npm ## Step 3: Install and Start Nginx ## Step 4: Clone the React Application Repository ## Step 5: Modify the React Application ## Step 6: Install Dependencies and Build the Application ## Step 7: Serve the React App via Nginx ## Step 8: Configure Nginx for a React Single-Page Application ## Step 9: Test the Deployment This guide walks through launching an Ubuntu server on AWS EC2, securely connecting to it via SSH, and deploying a real React application that is served using Nginx and accessible through the server’s public IP address. Before starting, ensure you have: Basic familiarity with the Linux command line An SSH client (Git Bash, VS Code terminal, or WSL) Log in to the AWS Management Console Navigate to EC2 → Instances → Launch instance Configure the instance: Name: react-nginx-server (or any preferred name) AMI: Ubuntu Server 22.04 LTS Instance type: t3.micro (eligible for free tier) Key pair: Create or select an existing .pem key Allow SSH (port 22) from your IP Allow HTTP (port 80) from anywhere Launch the instance and wait until its state shows Running Note- when you click on the above , it will show the instance in a running state. From the EC2 instance details page, copy the Public IPv4 address. This IP will be used both for SSH access and later to view the deployed React app. You may use Git Bash, VS Code terminal, or WSL. The command is the same. ssh -i your-key.pem ubuntu@ These are application dependencies. Verify the installation At this point, Nginx should already be serving the default welcome page on port 80. This pulls the application source code to the server. Navigate to the source directory (You may use vi or vim if preferred.)] Replace the placeholder values with your own details: Save and exit the editor. Return to the project root directory Build the production bundle This generates a build/ directory containing optimized static files. Clear the default web directory Copy the build output to Nginx’s document root Set correct permissions This ensures Nginx can read and serve the files securely. Replace the default Nginx site configuration Note- This should be ran directly on your terminal Retrieve your public IP address Access the application in your browser You have successfully: Launched an Ubuntu server on AWS EC2 Connected securely via SSH Built a React application for production Served it efficiently using Nginx Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse - What You’ll Need - Step 0: Launch an Ubuntu Server on AWS EC2 and Connect via SSH Launch the EC2 Instance Retrieve the Public IP Address Connect to the Server via SSH - Launch the EC2 Instance - Retrieve the Public IP Address - Connect to the Server via SSH - Update the System - Install Node.js and npm - Install and Start Nginx - Clone the React Application Repository - Modify the React Application - Install Dependencies and Build the Application - Serve the React App via Nginx - Configure Nginx for a React Single-Page Application - Test the Deployment - Launch the EC2 Instance - Retrieve the Public IP Address - Connect to the Server via SSH