Deployment for React Js

Containerizing the React by Docker
- What is Docker?
  
  Docker is an open-source platform that automates the deployment, scaling, and management of applications using containerization.
- What is containers?
  
  containers are like small, portable boxes that hold everything an app needs to run—its code, tools, and settings. Because everything is packed inside, the app runs the same no matter where you put it—on your computer, in the cloud, or anywhere else. Any new users who want to use your code they just need to pull and run your code they do not have to worry about the required environment.
- What is containerization?
  
  Containerization is the way of running application in isolated environment but with the minimal resources than traditional VMs(Virtual machines).
- How to containerized?
  
  First make sure you install Docker Tool.

We require to add the Dockerfile with our website, in which we need to add following code:

# Use an official Node runtime as the base image
FROM node:14-alpine

# Set the working directory in the container
WORKDIR /app

# Copy package.json and package-lock.json
COPY package*.json ./

# Install dependencies
RUN npm install

# Copy the rest of the application code
COPY . .

# Build the app
RUN npm run build

# Use nginx to serve the static files
FROM nginx:alpine

# Copy the build output to replace the default nginx contents
COPY --from=0 /app/build /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start nginxadd
CMD ["nginx", "-g", "daemon off;"]

After installing Docker and adding Dockerfile, we need to add following command:

docker build -t my-react-app .

Pushing to Docker Hub

First we need to tag our Docker image with our Docker Hub username:

docker tag personal-site yourusername/personal-site:latest

Now, push it to the Docker Hub:

docker push yourusername/personal-site:latest

Deploying on EC2

Once our image is on the Docker Hub then deploy this on AWS EC2 Instance:
1. Why EC2 ?
  
  Deploying a website on AWS EC2 combines flexibility and scalability. EC2 gives us full control over the hosting environment, making it easy to optimize performance and scale our application as needed.
2. Launch an EC2 instance ( I used Amazon Linux 2 AMI).
3. SSH into your instance:
```
 ssh -i "your-key.pem" ec2-user@your-ec2-public-dns
```
4. Install Docker on the EC2 instance:
  1. Here we need to update our system packages:
```
  sudo yum update -y
```
  2. Install Docker:
    
    we need to install Docker for Amazon Linux 2023:
```
 sudo yum install -y docker
```
  3. Start the Docker services:
```
 sudo service docker start
```
  4. Enable Docker to start on boot:
```
 sudo systemctl enable docker
```
  5. If we want to run Docker commands without usng sudo we need to add user (e.g. , ec2-user):
```
 sudo usermod -a -G docker ec2-user
```
  6. Log out and log back in for the group changes to take effect or run:
```
 newgrp docker
```
  7. Verify the installation:
```
 docker --version
```
    verification:
```
 Docker version 20.10.17, build 100c701
```
  8. In order to check if the Docker is working correctly, we need to run:
```
 docker info
```
    If you need docker-compose as well, you can install it using:
```
     sudo curl -L "https://github.com/docker/compose/releases/latest/download/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
     sudo chmod +x /usr/local/bin/docker-compose
```
    After installation, you can verify docker-compose is installed correctly by running:
```
     docker-compose version
```
    Remember to reboot your instance if you encounter any permission issues:
```
     sudo reboot
```
5. Log out and log back in to apply the group changes.
6. Pull and run your Docker image:

    docker pull yourusername/personal-site:latest
    docker run -d -p 80:80 yourusername/personal-site:latest

Security consideration

For security we need to assign the security group to our EC2 instance in oorder to allow all the inbound traffic on port 80.In addition, consider setting up HTTPS.
Monitoring and Logging

For real time Monitoring and logging you can integrate AWS Cloud Watch.
Optimizing for production:

If we want to further optimize your containerized app for production:
1. Use multi-stage builds to keep your final image small.
  - What it mean?
    
    This mean in the first stage: Use a larger base image with build tools to compile or build your application.
    
    In the second stage or in other stages: Use a smaller base image to run the application, copying only the necessary artifacts from the first stage.
2. Implement caching strategies for your Nginx server:
  
  Caching improves the performance of your Nginx server by storing frequently accessed content. Configure caching in your Nginx configuration file:
  - Static File Caching: Cache static assets like images, CSS, and JavaScript.
  - Proxy Caching: Cache responses from upstream servers.
3. Consider using a Content Delivery Network (CDN) like AWS CloudFront for global distribution.

Conclusion:

Containerizing and deploying a React app involves packaging the app into a Docker container for consistency and ease of deployment, setting up an EC2 instance to host the container, and ensuring security by opening the right network ports and setting up HTTPS. Additionally, using a CDN helps deliver content quickly to users worldwide, and implementing auto-scaling adjusts the number of servers based on demand to handle traffic efficiently. This approach ensures your app is scalable, secure, and performant.