Siddhant Bhattarai's Blog
Deploying a React Frontend App on AWS EC2 with Docker

Deploying a React Frontend App on AWS EC2 with Docker

Siddhant Bhattarai's photo
Siddhant Bhattarai
·

5 min read

Introduction:

In this guide, we'll walk through the straightforward process of deploying a React frontend application on an AWS EC2 instance using Docker. Docker allows us to encapsulate our application and its dependencies into a container, providing a consistent and reproducible environment across different systems. By following these steps, you'll be able to set up a scalable and efficient environment for your React app.

Prerequisites:

Before you begin, make sure you have:

  1. An AWS account.

  2. Basic knowledge of AWS services.

  3. A running EC2 instance with Ubuntu (t2.small, 30GB storage).

Step 1: Setting Up Your EC2 Instance

  1. Launch an EC2 instance with the desired specifications (e.g., t2.small, 30GB storage).

  2. Connect to your EC2 instance using SSH.

ssh -i your-key.pem ubuntu@your-ec2-ip

Step 2: Installing Docker

Update your instance and install Docker.

sudo apt update
sudo apt install -y docker.io

Step 3: Adding User to Docker Group

Add the Ubuntu user to the Docker group to run Docker commands without sudo.

sudo usermod -aG docker ubuntu

Log out and log back in or run the following command to apply the changes.

su - ubuntu

OR

sudo chown $USER /var/run/docker.sock

Step 4: Cloning the React Frontend Code

Clone the React frontend code into your EC2 instance.

git clone https://github.com/siddhantbhattarai/react-ecommerce-frontend.git
cd react-ecommerce-frontend

Step 5: Creating a Dockerfile

Remove the existing Dockerfile if it exists.

rm Dockerfile

Now, create a new Dockerfile using a text editor (e.g., nano).

nano Dockerfile

Copy and paste the following Dockerfile content:

# Use an official Node runtime as a base image
FROM node:17-alpine

# Set the working directory in the container
WORKDIR /usr/src/app/frontend

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install frontend dependencies
RUN npm install

# Copy the rest of the application files to the container
COPY . .

# Build the frontend app
RUN npm run build

# Expose port 3000 to the outside world
EXPOSE 3000

# Command to run the application
CMD ["npm", "start"]

Save and exit the text editor.

Step 6: Building and Running the Docker Container

Build the Docker image from the newly created Dockerfile.

docker build -t react-frontend-app .

Run the Docker container, exposing port 3000.

docker run -d -p 3000:3000 react-frontend-app

Conclusion:

Congratulations! You've successfully deployed your React frontend application on an AWS EC2 instance using Docker. This straightforward setup allows for easy scalability and management of your React app in a production environment. If you choose to explore further, consider pushing your Docker image to Amazon ECR for improved container management.

______________________________________________________________________________________

Step 7: Pushing the Docker Image to AWS ECR (Elastic Container Registry)

To deploy the Docker image on your EC2 instance, you need to push it to an image registry. In this example, we'll use AWS ECR. Follow these steps to push the image:

  1. Create an ECR repository using the AWS Management Console.

  2. Authenticate Docker to your ECR registry using the aws ecr get-login-password command.

aws ecr get-login-password --region <your-region> | docker login --username AWS --password-stdin <your-account-id>.dkr.ecr.<your-region>.amazonaws.com
  1. Tag your Docker image with the ECR repository URI:
docker tag react-frontend-app:latest <your-account-id>.dkr.ecr.<your-region>.amazonaws.com/react-frontend-app:latest
  1. Push the image to ECR:
docker push <your-account-id>.dkr.ecr.<your-region>.amazonaws.com/react-frontend-app:latest

Step 8: Running the Docker Container on EC2

On your EC2 instance, pull the Docker image from ECR and run the container:

docker pull <your-account-id>.dkr.ecr.<your-region>.amazonaws.com/react-frontend-app:latest

docker run -d -p 3000:3000 <your-account-id>.dkr.ecr.<your-region>.amazonaws.com/react-frontend-app:latest

Conclusion:

Congratulations! You have successfully deployed your React frontend application on an AWS EC2 instance using Docker. This approach provides a scalable and maintainable solution, allowing for easy updates and efficient management of your application in a production environment.

_________________________________________________________________________________________

If you are using NGINX as a reverse proxy for your React frontend application, you'll need to make a few modifications to the Dockerfile and the overall setup. NGINX will be used to serve the built React application and handle incoming requests. Here's how you can adapt the Dockerfile and include NGINX:

Updated Dockerfile:

# Use an official Node runtime as a base image for building the app
FROM node:17-alpine AS builder

# Set the working directory in the container
WORKDIR /usr/src/app/frontend

# Copy package.json and package-lock.json to the container
COPY package*.json ./

# Install frontend dependencies
RUN npm install

# Copy the rest of the application files to the container
COPY . .

# Build the frontend app
RUN npm run build

# Use NGINX as a lightweight base image to serve the app
FROM nginx:alpine

# Copy the built app from the previous stage
COPY --from=builder /usr/src/app/frontend/build /usr/share/nginx/html

# Expose port 80 to the outside world (default for HTTP)
EXPOSE 80

# CMD is not needed as NGINX image has a default CMD to start the server

Changes and Explanation:

  • Multi-Stage Build: The Dockerfile now uses multi-stage building. The first stage (FROM node:17-alpine AS builder) is responsible for building the React app, and the second stage (FROM nginx:alpine) uses the lightweight NGINX image to serve the built application.

  • Copying Build Artifacts: The COPY --from=builder /usr/src/app/frontend/build /usr/share/nginx/html command copies the built React app from the builder stage to the NGINX image.

  • Port Exposition: NGINX listens on port 80 by default, so the EXPOSE 80 line is added to expose the NGINX server to the outside world.

Building and Running:

The building and running steps remain the same as before:

docker build -t react-frontend-app .
docker run -d -p 80:80 react-frontend-app

NGINX Configuration (Optional):

You can also provide a custom NGINX configuration by including an nginx.conf file in your project and copying it to the appropriate location in the NGINX image. This step is optional but useful if you need to customize NGINX settings.

Include the following lines at the end of your Dockerfile to copy a custom nginx.conf file:

# Copy custom NGINX configuration
COPY nginx.conf /etc/nginx/nginx.conf

Make sure to place your nginx.conf file in the same directory as your Dockerfile.

This approach allows NGINX to serve your React app efficiently and provides a clean separation of concerns in the Dockerfile.

DockernginxReactDevops