Final integrated deployment: UI served on /frontend path, Unified Docker container

Dockerfile

@@ -1,4 +1,12 @@
-# Step 1: Build Backend | مرحلة بناء الخلفية
+# Step 1: Build Frontend | مرحلة بناء الواجهة
+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 ./
@@ -6,12 +14,14 @@ RUN npm install
 COPY . .
 RUN npm run build
 
-# Step 2: Production Phase | مرحلة الإنتاج
+# Step 3: 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

@@ -19,15 +19,6 @@ services:
       - redis
     restart: always
 
-  frontend:
-    build:
-      context: ./frontend
-      dockerfile: Dockerfile
-    container_name: ads-analytics-ui
-    ports:
-      - "3601:5001"
-    restart: always
-
   db:
     image: postgres:15-alpine
     container_name: ads-analytics-db

frontend/vite.config.js

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  base: '/frontend/',
+  build: {
+    outDir: 'dist',
+  },
+  server: {
+    port: 5173,
+  },
+});

src/main.ts

@@ -23,7 +23,9 @@ async function bootstrap() {
 
   // Serve Static Assets | تقديم الملفات الثابتة
   // This allows us to share ad images for analysis
-  app.useStaticAssets(join(__dirname, '..', 'public'));
+  app.useStaticAssets(join(__dirname, '..', 'public'), {
+    prefix: '/frontend',
+  });
 
   // Get ConfigService for port | الحصول على خدمة الإعدادات للمنفذ
   const configService = app.get(ConfigService);