Project 10 : Dockerize a React Application and Deploy To Production

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.

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"]

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

Project 10 : Dockerize a React Application and Deploy To Production

1. Architecture:

React Application Structure:

2. Get Application to Development Server:

Clone Repository:

Install Dependencies:

3. Bring up Application and Test Locally:

Start Development Server:

Open Browser:

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

Create Dockerfile:

5. Push the Containerized Application to a Docker Registry:

Build Docker Image:

Push to Docker Hub:

6. Push Application to Kubernetes Cluster:

Create Kubernetes Deployment YAML (deployment.yaml):

Apply Deployment:

7. Run Application:

Create Kubernetes Service YAML (service.yaml):

Apply Service:

8. Clean Up:

Remove Kubernetes Resources:

Stop Docker Container Locally:

Remove Docker Container Locally: