Update frontend Dockerfile for deployment

Author: rayyan35p

Frontend/Dockerfile

@@ -1,20 +1,27 @@
-# Use an official Node.js image as a base image
-FROM node:20 AS build
+# Step 1: Build the React app
+FROM node:18 AS builder
 
 WORKDIR /app
 
+# Install dependencies
 COPY package*.json ./
 RUN npm install
 
+# Copy source files and build the app
 COPY . .
-
-# Build the React app
 RUN npm run build
-# Use a lightweight web server to serve static files
+
+# Step 2: Serve with Nginx
 FROM nginx:alpine
-# Copy build files to NGINX's default public folder
-COPY --from=build /app/build /usr/share/nginx/html
-# Expose port 8080 for Cloud Run
-EXPOSE 8080
-# Start NGINX server
+
+# Copy custom Nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+
+# Copy the build files to Nginx's web directory
+COPY --from=builder /app/build /usr/share/nginx/html
+
+# Expose port 80
+EXPOSE 80
+
+# Run Nginx
 CMD ["nginx", "-g", "daemon off;"]

Frontend/nginx.conf

@@ -0,0 +1,19 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    # Serve the build directory as the root
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Redirect all routes to index.html for client-side routing
+    location / {
+        try_files $uri /index.html;
+    }
+
+    # Serve static files directly
+    location /static/ {
+        expires 1y;
+        add_header Cache-Control "public";
+    }
+}