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>