K8s

Dockerfile

@@ -1,29 +1,7 @@
-# Step 1: Build the React app
-FROM node:20 AS build
+# - Comment, ignored by docker
+# - Docker Directives/intsructions will be in UPPER CASE
+# FROM -> used for specifying base image
+FROM nginx
 
-# Set working directory
-WORKDIR /app
-
-# Copy package.json and package-lock.json
-COPY package.json package-lock.json ./
-
-# Install dependencies
-RUN npm install
-
-# Copy the rest of the application files
-COPY . .
-
-# Build the app for production
-RUN npm run build
-
-# Step 2: Set up the production server with Nginx
-FROM nginx:alpine
-
-# Copy the build output to Nginx's public directory
-COPY --from=build /app/build /usr/share/nginx/html
-
-# Expose port 80
-EXPOSE 80
-
-# Start Nginx
-CMD ["nginx", "-g", "daemon off;"]
+#COPY -> USED FOR COPYING FILES FROM HOST to YOUR CUSTOM IMAGE
+COPY . /usr/share/nginx/html

k8s/pod.yaml

@@ -0,0 +1,10 @@
+apiVersion: v1
+kind: Pod
+metadata: 
+  name: pod-nginx
+spec:
+  containers:
+  - name: c1
+    image: nginx
+    ports:
+    - containerPort: 80

k8s/react-deployment.yaml

@@ -0,0 +1,33 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: react-deployment
+  labels:
+    app: react
+spec:
+  replicas: 2
+  selector:
+    matchLabels:
+      app: react
+  template:
+    metadata:
+      labels:
+        app: react
+    spec:
+      containers:
+      - name: c2
+        image: jithesh0017/react-app
+        ports:
+        - containerPort: 80
+---
+apiVersion: v1
+kind: Service
+metadata:
+  name: react-service
+spec:
+  type: LoadBalancer
+  selector:
+    app: react
+  ports:
+    - protocol: TCP
+      port: 80

k8s/service.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: react-service
+spec:
+  type: NodePort
+  selector:
+    app: react
+  ports:
+    - protocol: TCP
+      port: 80
+      nodePort: 30015

package.json

@@ -1,6 +1,6 @@
 {
   "name": "lms-react",
-  "version": "1.1",
+  "version": "4.2",
   "private": true,
   "dependencies": {
     "@testing-library/dom": "^10.4.0",

react-app service.yaml

@@ -0,0 +1,12 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: React-app-Service
+spec:
+  type: Nodeport
+  selector:
+    app: React-app
+  ports:
+    - protocol: TCP
+      port: 80
+      nodeport: 30008

src/components/FrontPage.js

@@ -20,7 +20,7 @@ const FrontPage = () => {
   return (
     <div className="login-page">
       <div className="login-left">
-        <h1 className="brand-name">Edu Learn</h1>
+        <h1 className="brand-name">mafia</h1>
         <div className="login-card">
           <form className="login-form" onSubmit={handleLogin}>
             <label>Username</label>