Separate frontend and backend into individual containers: Frontend on 3601, Backend on 3660

Dockerfile

@@ -1,12 +1,4 @@
-# Step 1: Build Frontend | مرحلة بناء الواجهة
+# Step 1: Build Backend | مرحلة بناء الخلفية
-FROM node:20-alpine AS frontend-builder
-WORKDIR /usr/src/app/frontend
-COPY frontend/package*.json ./
-RUN npm install
-COPY frontend/ ./
-RUN npm run build
-
-# Step 2: Build Backend | مرحلة بناء الخلفية
 FROM node:20-alpine AS builder
 WORKDIR /usr/src/app
 COPY package*.json ./
@@ -14,14 +6,12 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-# Step 3: Production Phase | مرحلة الإنتاج
+# Step 2: Production Phase | مرحلة الإنتاج
 FROM node:20-alpine
 WORKDIR /usr/src/app
 COPY package*.json ./
 RUN npm install --only=production
 COPY --from=builder /usr/src/app/dist ./dist
-# Copy frontend build to backend public folder | نسخ واجهة المستخدم إلى الملفات العامة
-COPY --from=frontend-builder /usr/src/app/frontend/dist ./public
 
 # Expose port | فتح المنفذ
 EXPOSE 3660

docker-compose.yml

@@ -2,7 +2,9 @@ version: '3.8'
 
 services:
   api:
-    build: .
+    build: 
+      context: .
+      dockerfile: Dockerfile
     container_name: ads-analytics-api
     ports:
       - "${PORT:-3660}:3660"
@@ -11,8 +13,19 @@ services:
     environment:
       - NODE_ENV=production
       - DB_HOST=db
+      - REDIS_HOST=redis
     depends_on:
       - db
+      - redis
+    restart: always
+
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    container_name: ads-analytics-ui
+    ports:
+      - "3601:5001"
     restart: always
 
   db:

frontend/Dockerfile

@@ -0,0 +1,18 @@
+FROM node:20-alpine
+
+WORKDIR /usr/src/app
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy source code
+COPY . .
+
+# Expose the internal port used by serv.js
+EXPOSE 5001
+
+# Start the frontend using the serv.js script
+CMD ["npm", "run", "start"]