Deploying a React Website on AWS Using EC2 and Nginx: A Complete Guide

React is one of the most popular JavaScript libraries for building modern and interactive web applications. After developing a React application locally, the next step is deploying it to a production environment where users can access it through a domain.

Amazon Web Services (AWS) provides several options for hosting React applications. One of the simplest approaches is using an Amazon EC2 instance with Nginx to serve the production build of the React application.

In this guide, we’ll explore how to deploy a React website on AWS using EC2 and Nginx, configure a domain, enable HTTPS, and apply important production best practices.

What Is React?

React is a JavaScript library developed for building user interfaces and interactive web applications. It allows developers to create reusable components and efficiently manage application state.

React is commonly used for:

• Business websites
• Single-page applications
• Admin dashboards
• SaaS applications
• eCommerce websites
• Customer portals
• Interactive web applications
• Frontend applications for REST APIs

Unlike traditional server-side applications, a React application is often compiled into static assets that can be served directly by a web server.

Why Deploy React on AWS?

AWS provides flexible infrastructure for hosting React applications.

Some of the benefits include:

Scalability

You can increase server resources or move to a more advanced AWS architecture as your application grows.

Flexible Infrastructure

EC2 allows you to choose the server resources based on your application’s requirements.

Security

AWS provides security groups, IAM, networking controls, encryption, and monitoring services.

Custom Configuration

With EC2, developers have direct control over the operating system, web server, application files, and deployment environment.

Integration With Other AWS Services

A React application hosted on EC2 can be integrated with services such as Amazon S3, CloudFront, Route 53, Elastic Load Balancing, and other AWS services.

React Deployment Architecture on AWS

A basic React deployment can use the following architecture:

User → Nginx → React Static Files

The React application is first built for production. The resulting files are then placed on the EC2 server.

Nginx serves those files to users when they access the website.

For applications that communicate with a backend API, the architecture may look like:

User → Nginx → React Frontend → Backend API → Database

The backend API can be hosted separately using technologies such as Node.js, Laravel, Django, or another server-side framework.

Prerequisites

Before deploying a React website on AWS, you should have:

• A React application
• An AWS account
• An EC2 instance
• Basic Linux command-line knowledge
• A Git repository containing the project
• A domain name, if required
• A supported Node.js environment for building the application

You should also make sure that API keys and other sensitive configuration values are handled appropriately.

Step 1: Create an AWS EC2 Instance

The first step is to create an EC2 instance.

Log in to the AWS Management Console and open the EC2 service.

Create a new instance and choose a Linux-based operating system such as Ubuntu Server.

Select an instance type according to the size and traffic requirements of your website.

During the setup process, configure a security group to allow the required traffic.

For a typical React website, you may need:

• SSH — Port 22
• HTTP — Port 80
• HTTPS — Port 443

Avoid opening unnecessary ports because they can increase the attack surface of your server.

Once the instance has been created, connect to it using SSH.

Step 2: Update the Server

After connecting to your EC2 instance, update the operating system packages.

Keeping the server updated is important for security and stability.

Next, install the software required to build and serve your React application.

Typically, you will need:

• Node.js
• npm
• Git
• Nginx

The required Node.js version depends on your React project’s dependencies and build tools.

Step 3: Install Node.js and npm

Node.js is required if you are building the React application directly on the EC2 server.

npm is used to install the project’s dependencies.

After installing Node.js and npm, verify that the installed versions are compatible with your project.

For production deployments, use a Node.js version supported by your project’s framework and dependencies.

Step 4: Clone the React Project

Next, clone your React project from your Git repository.

Move into the project directory and install the required dependencies.

The project may use a package manager such as npm, Yarn, or pnpm depending on how it was configured.

Once the dependencies have been installed, the application is ready to be built for production.

Step 5: Create the React Production Build

A development React server is intended for local development and should not normally be used to serve the production website.

Instead, create a production build of the application.

The build process generates optimized static assets such as:

• HTML files
• JavaScript bundles
• CSS files
• Images
• Fonts
• Other frontend assets

These files can then be served efficiently by Nginx.

The exact build command depends on the React project and build tool being used.

Step 6: Configure Environment Variables

React applications often use environment variables for configuration.

For example, an application may need an API endpoint that points to the production backend.

Development and production environments may use different configuration values.

Make sure that production environment variables are configured before creating the production build.

It is important to understand that frontend environment variables can become part of the browser-delivered application. Therefore, never place private API keys, passwords, database credentials, or other secrets in client-side environment variables.

Step 7: Configure Nginx

Nginx is a high-performance web server that can serve the React production files directly.

After installing Nginx, configure a server block for your React website.

The Nginx document root should point to the directory containing the React production build.

For example, if the build output has been placed in a dedicated web directory, Nginx can serve those files whenever a user visits the domain.

This approach is more appropriate for a static React website than using a Node.js development server in production.

Step 8: Configure React Client-Side Routing

Many React applications use client-side routing.

For example, your application may contain routes such as:

• /
• /about
• /services
• /contact
• /dashboard

When a user navigates through the React application, the frontend router handles these routes.

However, if a user directly visits a route such as /about, Nginx may attempt to find an actual /about file.

Because that file may not exist, Nginx can return a 404 error.

To prevent this problem, configure Nginx to return the React application’s main HTML file for routes that are not actual files.

This allows the React router to handle the requested URL on the client side.

Step 9: Configure File Permissions

The Nginx service needs permission to read the React production files.

Make sure that the web directory and its files have appropriate ownership and permissions.

Avoid giving unnecessary write permissions to the web server.

A production server should follow the principle of least privilege wherever possible.

Step 10: Connect Your Domain

Once the React application is being served successfully through Nginx, connect your domain name to the EC2 instance.

Update the appropriate DNS records to point the domain toward your AWS infrastructure.

For a single EC2 deployment, using an Elastic IP can help provide a stable public IP address.

After DNS propagation, you should be able to access the React website using your domain.

Step 11: Enable HTTPS

HTTPS is essential for modern websites.

It encrypts communication between the user’s browser and your server.

You can configure an SSL/TLS certificate for your domain and configure Nginx to serve the website over HTTPS.

Once HTTPS is configured, HTTP traffic can be redirected to HTTPS.

HTTPS also provides important benefits for website security, user trust, and modern browser functionality.

Step 12: Configure Nginx for Performance

Nginx can efficiently serve React’s static assets.

You can improve performance by configuring appropriate caching headers for static files such as:

• JavaScript
• CSS
• Images
• Fonts

Caching allows browsers to reuse previously downloaded resources instead of requesting them repeatedly.

For larger applications, a content delivery network such as Amazon CloudFront can be introduced to distribute static assets closer to users.

Step 13: Deploy Updates

When your React application receives a new version, the deployment process generally involves:

1. Pulling the latest source code
2. Installing dependencies if required
3. Creating a new production build
4. Updating the files served by Nginx
5. Testing the website
6. Verifying that the new version is working correctly

For larger teams, this process can be automated using CI/CD tools.

Automated deployments reduce manual work and help maintain consistency between releases.

Step 14: Monitor the Application

After deployment, monitoring is important to identify infrastructure or availability problems.

AWS provides monitoring services that can help track:

• EC2 health
• CPU utilization
• Network traffic
• Server availability
• System logs

Nginx logs can also help identify HTTP errors and unusual request patterns.

Regular monitoring allows teams to detect problems before they significantly affect users.

Common React Deployment Problems

1. Nginx Shows a 404 Error

If React routes return 404 errors when directly accessed, check your Nginx configuration.

Client-side routing usually requires the server to return the main React HTML file for application routes.

2. CSS or JavaScript Files Are Missing

If your website loads without styling or functionality, check the production build path and Nginx configuration.

Also verify that the generated asset URLs are correct.

3. API Requests Fail

If the React frontend cannot communicate with the backend, check:

• Production API URL
• CORS configuration
• HTTPS configuration
• Backend availability
• Network rules
• Browser console errors

4. Website Works Locally but Not on AWS

Differences between development and production environments can cause deployment problems.

Check environment variables, build configuration, asset paths, routing, and server permissions.

5. Permission Errors

Nginx may not be able to read files if the directory permissions are incorrect.

Check the ownership and permissions of your deployed files.

React on AWS: EC2 vs Other Options

EC2 is not the only way to deploy a React application.

Depending on your project, other AWS services may be more suitable.

Amazon S3 and CloudFront

For a purely static React website, Amazon S3 combined with CloudFront can provide a scalable and efficient hosting architecture.

AWS Amplify

AWS Amplify provides tools that simplify frontend deployment and can integrate with Git-based workflows.

EC2

EC2 provides greater control over the server and is useful when you need custom server configuration or want to manage the deployment environment yourself.

The best choice depends on the application’s architecture, traffic, deployment requirements, and operational needs.

Important Note About PHP-FPM

PHP-FPM is not required for a standard React frontend.

PHP-FPM is used to process PHP applications such as Laravel or WordPress.

If your architecture contains a PHP backend, such as a Laravel API, you may have:

User → Nginx → React Frontend

and

React Frontend → Nginx → PHP-FPM → Laravel API → Database

In that architecture, PHP-FPM is responsible for the Laravel backend, not the React application itself.

Best Practices for React Deployment on AWS

Use HTTPS

Always protect your production website with HTTPS.

Keep Server Software Updated

Regularly update the operating system, Nginx, Node.js, and other server dependencies.

Protect Secrets

Never expose private credentials or sensitive API keys in the React frontend.

Use a CDN for Large Applications

CloudFront can improve performance by delivering static assets through a distributed network.

Automate Deployments

CI/CD can reduce deployment errors and make application releases more efficient.

Configure Monitoring

Monitor EC2 resources and review Nginx logs regularly.

Keep Backups

Maintain backups of important configuration files and application resources.

Conclusion

Deploying a React website on AWS using EC2 and Nginx is a straightforward approach for teams that want direct control over their hosting environment.

The basic deployment architecture is:

EC2 + Nginx + React Production Build

Nginx serves the optimized React files directly, while AWS EC2 provides the underlying server infrastructure.

For applications with a backend, the architecture can be expanded to include services such as Laravel with PHP-FPM, Node.js, Django, or another API framework. As traffic and application requirements increase, services such as Amazon S3, CloudFront, RDS, Elastic Load Balancing, and Auto Scaling can be introduced.

With proper server configuration, HTTPS, security practices, caching, monitoring, and deployment automation, AWS provides a flexible environment for hosting modern React applications.