Docker compose

backend/question-service/.env.sample

@@ -1,6 +1,8 @@
 DB_CLOUD_URI=<CONNECTION_STRING>
 DB_LOCAL_URI="mongodb://127.0.0.1:27017/peerprepQuestionServiceDB"
-PORT=3000
+PORT=3002
 
 # Will use cloud MongoDB Atlas database
 ENV=PROD
+
+FRONTEND_URL=http://localhost:3000

backend/question-service/package.json

@@ -13,11 +13,13 @@
   "license": "ISC",
   "dependencies": {
     "body-parser": "^1.20.3",
+    "cors": "^2.8.5",
     "dotenv": "^16.4.5",
     "express": "^4.21.0",
     "mongoose": "^8.6.3"
   },
   "devDependencies": {
+    "@types/cors": "^2.8.17",
     "@types/express": "^4.17.21",
     "@types/mongoose": "^5.11.97",
     "@types/node": "^22.5.5",

backend/question-service/src/server.ts

@@ -1,5 +1,6 @@
 import express, { Application } from "express";
 import bodyParser from "body-parser";
+import cors from "cors";
 import questionRoutes from "./routes/questionRoutes";
 import { connectToDB } from "./util/db";
 import dotenv from "dotenv";
@@ -8,13 +9,16 @@ import dotenv from "dotenv";
 const app: Application = express();
 dotenv.config();
 
-const PORT = process.env.PORT || 3000;
+const PORT = process.env.PORT || 3002;
 
 // Middleware
 app.use(bodyParser.json());
+app.use(cors({
+  origin: process.env.FRONTEND_URL as string,
+}));
 
 // Routes
-app.use("/api/questions", questionRoutes);
+app.use("/", questionRoutes);
 
 // Start the server
 app.listen(PORT, () => {

backend/user-service/.env.sample

@@ -7,3 +7,6 @@ ENV=PROD
 
 # Secret for creating JWT signature
 JWT_SECRET=you-can-replace-this-with-your-own-secret
+
+# Frontend URL
+FRONTEND_URL=http://localhost:3000

backend/user-service/index.js

@@ -8,7 +8,9 @@ const app = express();
 
 app.use(express.urlencoded({ extended: true }));
 app.use(express.json());
-app.use(cors()); // config cors so that front-end can use
+app.use(cors({
+  origin: process.env.FRONTEND_URL,
+}));
 app.options("*", cors());
 
 // To handle CORS Errors

docker-compose.yml

@@ -0,0 +1,17 @@
+services:
+  question:
+    build: ./backend/question-service
+    ports:
+      - "3002:3002"
+
+  user:
+    build: ./backend/user-service
+    ports:
+      - "3001:3001"
+
+  frontend:
+    build: ./frontend
+    env_file:
+      - ./frontend/nginx/.env
+    ports:
+      - "80:80"

frontend/.dockerignore

@@ -0,0 +1,2 @@
+build/
+node_modules/

frontend/.env.sample

@@ -1 +1,7 @@
-PORT=3001
+PORT=3000
+REACT_APP_QUESTION_SERVICE_URL=http://localhost:3002
+REACT_APP_USER_SERVICE_URL=http://localhost:3001
+
+# In docker
+REACT_APP_QUESTION_SERVICE_URL=http://localhost/api/questions/
+REACT_APP_USER_SERVICE_URL=http://localhost/api/users/

frontend/Dockerfile

@@ -0,0 +1,25 @@
+FROM node:20 AS build
+
+WORKDIR /app
+
+COPY package*.json .
+
+RUN npm install
+
+COPY ./src ./src
+
+COPY ./public ./public
+
+COPY .env .
+
+COPY tsconfig.json .
+
+ARG GENERATE_SOURCEMAP=false
+
+RUN npm run build
+
+FROM nginx:latest
+
+COPY ./nginx /etc/nginx
+
+COPY --from=build /app/build /app

frontend/nginx/.env.sample

@@ -0,0 +1,3 @@
+QUACK=quack
+QUESTION_SERVICE_URL=http://question:3002/
+USER_SERVICE_URL=http://user:3001/

frontend/nginx/nginx.conf

@@ -0,0 +1,12 @@
+worker_processes auto;
+
+error_log /var/log/nginx/error.log;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    include /etc/nginx/conf.d/app.conf;
+}

frontend/nginx/templates/app.conf.template

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+    server_name localhost;
+
+    location / {
+        root /app;
+    }
+
+    location /api/questions/ {
+        proxy_pass ${QUESTION_SERVICE_URL};
+    }
+
+    location /api/users/ {
+        proxy_pass ${USER_SERVICE_URL};
+    }
+}

frontend/src/services/question.service.ts

@@ -3,8 +3,15 @@ import { Question, QuestionComplexity } from "../models/question.model";
 import { verifyNewQuestion } from "../util/question.helper";
 
 export default class QuestionService {
+  private static client = axios.create({
+    baseURL: process.env.REACT_APP_QUESTION_SERVICE_URL as string,
+    headers: {
+      "Content-type": "application/json",
+    },
+  });
+
   static async getQuestions(): Promise<Question[]> {
-    const response = await axios.get("/api/questions");
+    const response = await QuestionService.client.get("/");
     return response.data;
   }
 
@@ -17,7 +24,7 @@ export default class QuestionService {
     link: string,
   ): Promise<any> {
     const body = verifyNewQuestion(id, title, description, categoriesString, complexity, link);
-    const response = await axios.post("/api/questions", body);
+    const response = await QuestionService.client.post("/", body);
     return response.data;
   }
 
@@ -30,12 +37,12 @@ export default class QuestionService {
     link: string,
   ): Promise<any> {
     const body = verifyNewQuestion(id, title, description, categoriesString, complexity, link);
-    const response = await axios.put(`/api/questions/${id}`, body);
+    const response = await QuestionService.client.put(`/${id}`, body);
     return response.data;
   }
 
   static async deleteQuestion(id: number): Promise<any> {
-    const response = await axios.delete(`/api/questions/${id}`);
+    const response = await QuestionService.client.delete(`/${id}`);
     return response.data;
   }
 }