updated yaml files with nginx

updated yaml files with nginx

safeshare/K8s/frontend_deployment.yaml

@@ -19,12 +19,12 @@ spec:
     spec:
       containers:
         - name: safeshare-frontend
-          image: amusement3004/safeshare-frontend
+          image: itsmexrando/safeshare-frontend:latest
           imagePullPolicy: IfNotPresent
-          env:  # Add these environment variables
+          env:
             - name: REACT_APP_API_HOST
-              value: safeshare-backend-service  # The name of the backend service
+              value: safeshare-backend-service
             - name: REACT_APP_API_PORT
-              value: "80"  # The port the backend service listens on
+              value: "80"
           ports:
-            - containerPort: 3000
+            - containerPort: 80

safeshare/K8s/frontend_deployment_backup.yaml

@@ -0,0 +1,30 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  name: safeshare-frontend
+  labels:
+    app: safeshare
+    tier: frontend
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: safeshare
+      tier: frontend
+  template:
+    metadata:
+      labels:
+        app: safeshare
+        tier: frontend
+    spec:
+      containers:
+        - name: safeshare-frontend
+          image: amusement3004/safeshare-frontend
+          imagePullPolicy: IfNotPresent
+          env:  # Add these environment variables
+            - name: REACT_APP_API_HOST
+              value: safeshare-backend-service  # The name of the backend service
+            - name: REACT_APP_API_PORT
+              value: "80"  # The port the backend service listens on
+          ports:
+            - containerPort: 3000

safeshare/K8s/frontend_service.yaml

@@ -8,8 +8,8 @@ metadata:
 spec:
   type: NodePort
   ports:
-    - port: 3000
+    - port: 80
-      nodePort: 32000  # Optional: This is an example. Kubernetes will assign an available port if you don't specify this.
+      nodePort: 32001  # Changed this to a different NodePort to avoid potential conflicts.
   selector:
     app: safeshare
     tier: frontend

safeshare/K8s/frontend_service_backup.yaml

@@ -0,0 +1,15 @@
+apiVersion: v1
+kind: Service
+metadata:
+  name: safeshare-frontend-service
+  labels:
+    app: safeshare
+    tier: frontend
+spec:
+  type: NodePort
+  ports:
+    - port: 3000
+      nodePort: 32000  # Optional: This is an example. Kubernetes will assign an available port if you don't specify this.
+  selector:
+    app: safeshare
+    tier: frontend

safeshare/safeshare-frontend/Dockerfile

@@ -1,11 +1,23 @@
-FROM node
+# ---- Build Stage ----
+FROM node:latest AS build-stage
 
 WORKDIR /frontend
 
 COPY . .
 
 RUN npm install
+RUN npm run build
 
-EXPOSE 3000
+# ---- Production Stage ----
+FROM nginx:alpine AS production-stage
 
-CMD ["npm", "start"]
+# Copy the built app from the build stage
+COPY --from=build-stage /frontend/build /usr/share/nginx/html
+
+# Use a custom nginx.conf (optional but can be useful)
+# COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

safeshare/safeshare-frontend/Dockerfile_backup

@@ -0,0 +1,11 @@
+FROM node
+
+WORKDIR /frontend
+
+COPY . .
+
+RUN npm install
+
+EXPOSE 3000
+
+CMD ["npm", "start"]

safeshare/safeshare-frontend/src/pages/downloadFile.js

@@ -44,7 +44,7 @@ function DownloadFile() {
 
     const handleDownloadFile = () => {
         if (passcode) {
-            axios.get(`http://${apiUrl}/api/files/${passcode}/`, {responseType: 'blob'})
+            axios.get(`${apiUrl}/api/files/${passcode}/`, {responseType: 'blob'})
                 .then(response => {
                     let filename = 'downloaded_file'; // Default filename
                     let mimeType = 'application/octet-stream'; // Default MIME type

safeshare/safeshare-frontend/src/pages/shareFile.js

@@ -53,7 +53,7 @@ function ShareFile() {
 
             // Send POST request to the backend API using Axios
             axios
-                .post(`http://${apiUrl}/api/files/`, formData)
+                .post(`${apiUrl}/api/files/`, formData)
                 .then((response) => {
                     // Handle a successful response from the server, set passcode to "key" in the response body
                     const data = response.data;
@@ -61,7 +61,7 @@ function ShareFile() {
                     // If data is an array, take the first item
                     if (Array.isArray(data)) {
                         const passcode = data[0].key;
-                        const baseUrl = 'http://' + apiUrl + '/api/files/';
+                        const baseUrl = apiUrl + '/api/files/';
 
                         setPasscode(passcode);
                         setShareableLink(baseUrl + passcode);