How to Host a Simple React Application on an EC2 Instance

by

In this guide, we’ll walk through the steps to host a simple React application on an AWS EC2 instance using Nginx as the web server. This is ideal for beginners who want to deploy their front-end applications in a scalable, secure environment.

Prerequisites

  • An AWS account with an EC2 instance running a Linux distribution.
  • Ensure your EC2 instance has appropriate security groups allowing HTTP traffic.

Step 1: Update and Install Node.js, npm, and Nginx

After SSH’ing into your EC2 instance, start by updating your packages:

sudo apt-get update -y

Next, install Node.js and npm using the NodeSource repository:

curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
sudo apt install npm -y

Now, install Nginx to serve your React application:

sudo apt install nginx -y

Step 2: Create Your React App

With Node.js and npm installed, you can now create a new React application. Navigate to your home directory and run:

npx create-react-app hello

This command will generate a new React app in the hello folder.

Step 3: Build Your React App

Once the React app is ready, navigate into the app’s directory and build the production files:

cd hello
npm install
npm run build

The build folder will contain the optimized static files to serve.

Step 4: Set Up Nginx to Serve the React App

Now, we need to configure Nginx to serve the static files from the build folder. First, create the directory where your files will reside:

cd
sudo mkdir -p /var/www/http/
sudo cp -R build/ /var/www/http/

Step 5: Configure Nginx

Next, we’ll configure Nginx to serve your React app. Navigate to the Nginx configuration directory and remove the default configuration:

cd /etc/nginx/sites-enabled/
sudo rm -rf default

Now, create a new configuration file for your React app:

sudo vim /etc/nginx/sites-available/react

Add the following content to the file:

server {
    listen 80 default_server;
    server_name _;

    location / {
        autoindex on;
        root /var/www/http/build;  
        try_files $uri /index.html;
    }
}

This configuration tells Nginx to serve your React app from the /var/www/http/build directory. It also ensures that React Router works correctly by redirecting requests to index.html.

Step 6: Enable the Nginx Configuration

Link the configuration file to the sites-enabled directory:

sudo ln -s /etc/nginx/sites-available/react /etc/nginx/sites-enabled/

Step 7: Adjust Permissions and Restart Nginx

To ensure that the Nginx service can access your files, add your current user (ubuntu) to the www-data group:

sudo gpasswd -a www-data ubuntu

Now, restart the Nginx service to apply the changes:

sudo systemctl restart nginx
sudo service nginx restart

Step 8: Access Your React App

At this point, your React app should be served by Nginx. Open a browser and enter the public IP address of your EC2 instance. You should see your React application running.

Troubleshooting

  • If the app doesn’t load, make sure your EC2 instance’s security group allows inbound HTTP traffic on port 80.
  • Check the Nginx configuration for any syntax errors by running:
sudo nginx -t
  • Review the Nginx logs located in /var/log/nginx/ for any issues.

Conclusion

By following these steps, you’ve successfully hosted a simple React application on an EC2 instance using Nginx. This is a basic deployment suitable for many small to medium-sized applications. For larger apps or production environments, consider using more robust solutions like AWS Elastic Beanstalk or containerized deployments with Docker.

Leave a Comment