Deploying a React App on AWS EC2 with Docker and Nginx: A Complete Guide

Deploying a React app on AWS EC2 using Docker and Nginx is a powerful way to ensure scalability and reliability for your web application. This step-by-step tutorial will guide you through the process, from setting up your AWS environment to configuring Nginx for production.

1. Setting Up Your AWS EC2 Instance: Launching and Configuring for Deployment

Begin by launching an EC2 instance on AWS:

Navigate to the AWS Management Console.
Go to the EC2 Dashboard and click “Launch Instance”.
Choose an Amazon Machine Image (AMI) such as Ubuntu Server 20.04.
Select an instance type (e.g., t2.micro for small applications).
Configure your security group by allowing SSH (port 22), HTTP (port 80), and HTTPS (port 443) traffic.

Once your instance runs, you’ll have the IP address necessary to connect securely.

2. Connecting Securely to Your EC2 Instance: SSH Access and Key Management

AWS provides a key pair for secure SSH access to your instance. Here’s how to connect:

Download your .pem key file when launching the instance.

Run the following command in your terminal to set proper permissions for the key file:
chmod 400 your-key.pem

Connect to your EC2 instance using SSH:
ssh -i your-key.pem ubuntu@your-ec2-ip

3. Installing Docker and Docker Compose: Preparing the Deployment Environment

After connecting to your EC2 instance, install Docker and Docker Compose:

Update the package list and install Docker:
sudo apt-get update

sudo apt-get install docker.io

Enable Docker to run on startup:
sudo systemctl start docker

sudo systemctl enable docker

Install Docker Compose:
sudo curl -L “https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)” -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

Verify the installation:

docker –version

docker-compose –version

4. Configuring Your React App for Docker: Creating the Dockerfile

Now, let’s set up Docker for your React app:

In the root directory of your React app, create a Dockerfile:
# Use an official node image as the base

FROM node:14

# Set the working directory

WORKDIR /app

# Copy package.json and install dependencies

COPY package*.json ./

RUN npm install

# Copy the rest of the application

COPY . .

# Build the React app

RUN npm run build

# Use Nginx to serve the app

FROM nginx:alpine

COPY –from=0 /app/build /usr/share/nginx/html

EXPOSE 80

CMD [“nginx”, “-g”, “daemon off;”]

This Dockerfile handles building your React app and serving it with Nginx.

5. Creating the Nginx Configuration File: Serving the React App

At the root of your project, create an nginx.conf file for the Nginx configuration:

server {

listen 80;

server_name your-domain-or-ip;

location / {

root /usr/share/nginx/html;

index index.html;

try_files $uri $uri/ /index.html;

}

This configuration ensures that Nginx correctly handles React routes.

6. Building and Running the Docker Container: Starting the Deployment Process

To deploy the app using Docker, you first need to build and run the Docker container:

In the root of your project, run the following commands to build and start the Docker container:
docker build -t react-app .

docker run -d -p 80:80 react-app

This builds the Docker image for your React app and starts it on port 80.

7. Accessing Your Live React App: Testing the Deployment

Once the container is running, you can access your live React app using the public IP of your EC2 instance:

Open a web browser and go to http://your-ec2-ip/.
You should see your React application live!

8. Setting Up and Optimizing Nginx: Fine-Tuning for Production

To optimize Nginx for production, make sure to:

Enable gzip compression by adding the following lines to your nginx.conf:
gzip on;

gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

gzip_vary on;

gzip_min_length 1024;

This improves the performance of your app by reducing file sizes.

9. Configuring Nginx for Your Specific React App: Creating a Site Configuration

In /etc/nginx/sites-available, create a file called react-app with the following content:

server {

listen 80;

server_name your-domain-or-ip;

location / {

root /usr/share/nginx/html;

index index.html;

try_files $uri $uri/ /index.html;

}

This configuration file is tailored to serve React apps with client-side routing.

10. Enabling and Testing the Nginx Configuration: Finalizing the Setup

Once you’ve configured the Nginx site, enable it by creating a symlink in /etc/nginx/sites-enabled:

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

Test the Nginx configuration and restart the service:

sudo nginx -t

sudo systemctl restart nginx

Your React app should now be served by Nginx and accessible via the IP or domain name of your EC2 instance.

Conclusion

Deploying a React app on AWS EC2 with Docker and Nginx ensures a robust, scalable, and production-ready setup. Following these steps, you’ll have a live React app running on AWS, which will be served efficiently through Nginx.