PEER-254: Update dockerfile and docker-compose

Author: cyiting

docker-compose.yaml

@@ -91,10 +91,8 @@ services:
       - '3000:${FRONTEND_PORT}'
     env_file:
       - ./frontend/.env.compose
-    environment:
-      - FRONTEND_PORT=PORT
-    depends_on:
-      - user-service
+    # depends_on:
+    #   - user-service
     networks:
       - user-api-network
       - question-api-network

frontend/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+frontend.*Dockerfile
+.dockerignore

frontend/.env.compose

@@ -1,6 +1,6 @@
-FRONTEND_ENV="compose"
+FRONTEND_ENV=compose
 
-VITE_USER_SERVICE="http://user-service:9001"
-VITE_QUESTION_SERVICE="http://question-service:9002"
+VITE_USER_SERVICE=http://user-service:9001
+VITE_QUESTION_SERVICE=http://question-service:9002
 
 FRONTEND_PORT=3000

frontend/.env.docker

@@ -1,4 +1,4 @@
 FRONTEND_ENV=local
 
-VITE_USER_SERVICE="http://localhost:9001"
-VITE_QUESTION_SERVICE="http://localhost:9002"
+VITE_USER_SERVICE=http://host.docker.internal:9001
+VITE_QUESTION_SERVICE=http://host.docker.internal:9002

frontend/.env.local

@@ -1,4 +1,4 @@
 FRONTEND_ENV=local
 
-VITE_USER_SERVICE="http://localhost:9001"
-VITE_QUESTION_SERVICE="http://localhost:9002"
+VITE_USER_SERVICE=http://localhost:9001
+VITE_QUESTION_SERVICE=http://localhost:9002

frontend/README.md

@@ -5,9 +5,9 @@
 1. Run this command to build:
    ```sh
    docker build \
-     -t frontend-local \
-     --build-arg port=3000 \
-     -f frontend.Dockerfile .
+      --build-arg VITE_USER_SERVICE=http://host.docker.internal:9001 \
+      --build-arg VITE_QUESTION_SERVICE=http://host.docker.internal:9002 \
+      -t frontend-app -f frontend.Dockerfile .
    ```
 2. Run this command, from the root folder:
 

frontend/frontend.Dockerfile

@@ -5,19 +5,17 @@ COPY ./package*.json ./
 RUN npm install
 COPY ./ ./
 
+#ADD Service ENV 
 ARG VITE_USER_SERVICE
 ARG VITE_QUESTION_SERVICE
 ENV VITE_USER_SERVICE=${VITE_USER_SERVICE}
 ENV VITE_QUESTION_SERVICE=${VITE_QUESTION_SERVICE}
 
 RUN npm run build
 
-FROM node:20-alpine AS production
-RUN npm install -g serve
-WORKDIR /app
-COPY --from=build /app/dist ./dist
-
-ARG port
-EXPOSE ${port} 
+FROM nginx:stable-alpine
+COPY --from=build /app/build /usr/share/nginx/html
+COPY ./nginx.conf /etc/nginx/conf.d/default.conf
 
-CMD ["serve", , "-s", "dist"]
+EXPOSE 3000
+CMD ["nginx", "-g", "daemon off;"]

frontend/nginx.conf

@@ -0,0 +1,28 @@
+server {
+    listen 3000;
+    location / {
+        root /usr/share/nginx/html;
+        index index.html;
+        try_files $uri $uri/ /index.html;
+    }
+
+    location /user-service/ {
+        proxy_pass http://host.docker.internal:9001/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    location /question-service/ {
+        proxy_pass http://host.docker.internal:9002/;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+
+    # Optionally log details of proxied requests
+    access_log /var/log/nginx/access.log;
+    error_log /var/log/nginx/error.log;
+}

frontend/package.json

@@ -6,7 +6,7 @@
     "dev": "env-cmd -f .env.local vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview --port 5173"
+    "preview": "vite preview --port 5173 --host 0.0.0.0"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",

frontend/src/assets/questions.ts

@@ -183,6 +183,6 @@ export const questions: Question[] = questionDetails.map((question) => ({
   id: question.id,
   title: question.title,
   difficulty: question.difficulty as 'Easy' | 'Medium' | 'Hard',
-  topics: question.topics,
+  topic: question.topics,
   attempted: false,
 }));