avatarMohsin Rubel

Summary

The website provides a comprehensive guide on how to containerize a React application using Docker, deploy it to a Kubernetes cluster, and manage its lifecycle in a production environment.

Abstract

The guide outlines an end-to-end process for deploying a React application into production. It begins with an overview of the React application structure, including essential files like package.json and the src directory. The instructions then guide the user through cloning a sample repository, installing dependencies, and running the application locally to verify its functionality. Subsequently, the guide details how to create a Dockerfile to containerize the application, build and push the Docker image to a registry, and finally deploy it to a Kubernetes cluster. This involves creating Kubernetes deployment and service YAML files to manage the application's deployment, scaling, and exposure to the public internet via a load balancer. The guide concludes with steps for cleaning up resources, including stopping and removing Docker containers and deleting Kubernetes resources.

Opinions

  • The guide assumes that containerization and Kubernetes deployment are best practices for deploying React applications to production.
  • It implies that using an official Node runtime as a parent image in the Dockerfile is a recommended approach for consistency and security.
  • The use of a .alpine version of Node indicates a preference for smaller image sizes and faster deployment times.
  • The guide suggests that exposing port 80 for the web server aligns with standard web server practices for accessibility.
  • It emphasizes the importance of labeling and selecting the correct components within Kubernetes deployments and services.
  • The guide recommends using a LoadBalancer service type in Kubernetes to expose the application to the internet, indicating a cloud-based infrastructure.
  • The clean-up steps reflect a responsible approach to resource management, ensuring that unused resources are not left running and incurring costs.

Project 10 : Dockerize a React Application and Deploy To Production

1. Architecture:

React Application Structure:

  • React application source code is organized in a directory structure.
  • Common files include package.json, src directory for source code, and any additional configuration files.

2. Get Application to Development Server:

Clone Repository:

git clone https://github.com/mohsinrubel/project10.git
cd project10

Install Dependencies:

npm install

3. Bring up Application and Test Locally:

Start Development Server:

npm start

Open Browser:

Visit http://localhost:3000 to see your React application running locally.

4. Containerize the Application and Serve It with a Web Server:

Create Dockerfile:

Create a Dockerfile in the root of your project:

# Use an official Node runtime as a parent image
FROM node:14-alpine

# Set the working directory to /app
WORKDIR /app
# Copy package.json and package-lock.json to the working directory
COPY package*.json ./
# Install app dependencies
RUN npm install
# Copy the current directory contents to the container at /app
COPY . .
# Make port 80 available to the world outside this container
EXPOSE 3000
# Run app when the container launches
CMD ["npm", "start"]

5. Push the Containerized Application to a Docker Registry:

Build Docker Image:

docker build -t mrubel/youtube_app .

Push to Docker Hub:

docker push mrubel/youtube_app:latest

6. Push Application to Kubernetes Cluster:

Go to k8s directory:

cd k8s

Create Kubernetes Deployment YAML (deployment.yaml):

apiVersion: apps/v1
kind: Deployment
metadata:
  name: youtube_app
spec:
  replicas: 3
  selector:
    matchLabels:
      app: youtube_app
  template:
    metadata:
      labels:
        app: youtube_app
    spec:
      containers:
      - name: youtube_app
        image: mrubel/youtube_app:latest
        ports:
        - containerPort: 3000

Apply Deployment:

kubectl apply -f deployment.yaml

7. Run Application:

Create Kubernetes Service YAML (service.yaml):

apiVersion: v1
kind: Service
metadata:
  name: youtube_app
spec:
  selector:
    app: youtube_app
  ports:
    - protocol: TCP
      port: 80
      targetPort: 3000
  type: LoadBalancer

Apply Service:

kubectl apply -f service.yaml

8. Clean Up:

Remove Kubernetes Resources:

kubectl delete -f deployment.yaml
kubectl delete -f service.yaml

Stop Docker Container Locally:

docker stop <react-app-container-id>

Remove Docker Container Locally:

docker rm <react-app-container-id>
Docker
Dockerfiles
React Deployment
Kubernetes
K8s
Recommended from ReadMedium