React Vite App Deployment on EC2 with NGINX: A Step-by-Step Guide

Deploying a React Vite application on an Amazon EC2 instance can be a great way to get hands-on experience with cloud infrastructure and web server management. In this guide, I'll walk you through the process of deploying a basic Airbnb clone built with React and Vite, and show you how to use NGINX to serve your application efficiently.

Project Overview

This project involved cloning a basic Airbnb clone using React and Vite, which was then deployed on an Amazon EC2 instance. The primary goal was to understand the deployment process and learn how to configure NGINX to manage and run the application in the background.

Deployment Process

1. Setting Up the EC2 Instance:
Launch an EC2 instance on AWS.
Configure security groups to allow HTTP/HTTPS traffic.

2. Deploying the React Vite App:

• Clone or fork the GitHub repo : git clone https://github.com/leju-b/AirBnb-Clone-deployed-EC2
• Install npm : sudo apt install npm
• Install other dependencies
• Build the app using : npm install
• Run the app for preview : npm run dev

Allow inbound rules for port 3000 if the app is running in that port

3. Installing and Configuring NGINX:
Installed NGINX on the EC2 instance to serve the application.
Edited the NGINX configuration file to point to the React app's dist folder and set up the server block.

4. Verifying the Deployment:
Tested the NGINX configuration and reloaded the service.
Accessed the application using the public IP address of the EC2 instance.

NGINX Configuration Details

The NGINX configuration file can be found in /etc/nginx/nginx.conf, and site-specific configurations are usually located in /etc/nginx/sites-available/. Here's a snippet of the configuration used for this project:

server {
    listen 80;
    server_name your_domain_or_public_ip;
    root /path/to/your/react-vite-app/dist;
    index index.html;
    location / {
        try_files $uri $uri/ /index.html;
    }
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
}

Troubleshooting Tips
If NGINX throws an error, check the logs in /var/log/nginx/error.log.
Ensure the dist folder is correctly located and accessible by NGINX.

Conclusion and Future Plans
Deploying this application was an insightful experience, particularly in understanding the relationship between build tools like Vite, cloud platforms like AWS, and web servers like NGINX. Moving forward, I plan to enhance the application's features, add HTTPS for secure connections, and implement CI/CD pipelines to automate the deployment process.
If you're interested in learning more about deploying React apps or have any questions about the process, feel free to connect with me!