Initialize API gateway (#51)

* Add minimial gateway

* Configure frontend to use api gateway

Author: samuelim01

compose.dev.yml

@@ -6,6 +6,8 @@ services:
 
   question:
     command: npm run dev
+    ports:
+      - 8081:8081
     volumes:
       - /app/node_modules
       - ./services/question:/app
@@ -16,6 +18,8 @@ services:
 
   user:
     command: npm run dev
+    ports:
+      - 8082:8082
     volumes:
       - /app/node_modules
       - ./services/user:/app

compose.yml

@@ -9,20 +9,29 @@ services:
       - 4200:4200
     restart: always
 
+  gateway:
+    container_name: gateway
+    image: nginx:1.27
+    ports:
+      - 8080:8080
+    volumes:
+      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
+    networks:
+      - gateway-network
+  
   question:
     container_name: question
     image: question
     build:
       context: services/question
       dockerfile: Dockerfile
-    ports:
-      - 8081:8081
     environment:
       DB_CLOUD_URI: ${QUESTION_DB_CLOUD_URI}
       DB_LOCAL_URI: ${QUESTION_DB_LOCAL_URI}
       DB_USERNAME: ${QUESTION_DB_USERNAME}
       DB_PASSWORD: ${QUESTION_DB_PASSWORD}
     networks:
+      - gateway-network
       - question-db-network
     restart: always
 
@@ -46,15 +55,14 @@ services:
     build:
       context: services/user
       dockerfile: Dockerfile
-    ports:
-      - 8082:8082
     environment:
       DB_CLOUD_URI: ${USER_DB_CLOUD_URI}
       DB_LOCAL_URI: ${USER_DB_LOCAL_URI}
       DB_USERNAME: ${USER_DB_USERNAME}
       DB_PASSWORD: ${USER_DB_PASSWORD}
       JWT_SECRET: ${JWT_SECRET}
     networks:
+      - gateway-network
       - user-db-network
     restart: always
 
@@ -76,6 +84,8 @@ volumes:
   user-db:
 
 networks:
+  gateway-network:
+    driver: bridge
   question-db-network:
     driver: bridge
   user-db-network:

frontend/src/_services/api.service.ts

@@ -0,0 +1,21 @@
+import { API_CONFIG } from '../app/api.config';
+
+/**
+ * Abstract class that serves as a base for API services.
+ */
+export abstract class ApiService {
+    /**
+     * The path for the specific resource, e.g. 'user', 'question', etc.
+     * This property must be implemented by subclasses to specify the
+     * endpoint path for the API resource they represent.
+     */
+    protected abstract apiPath: string;
+
+    /**
+     * Returns the full URL for the API endpoint based on
+     * the specified apiPath.
+     */
+    get apiUrl(): string {
+        return API_CONFIG.baseUrl + this.apiPath;
+    }
+}

frontend/src/_services/question.service.ts

@@ -1,6 +1,5 @@
 import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { API_CONFIG } from '../app/api.config';
 import { catchError, Observable, throwError } from 'rxjs';
 import {
     SingleQuestionResponse,
@@ -9,20 +8,23 @@ import {
     MessageOnlyResponse,
 } from '../app/questions/question.model';
 import { TopicResponse } from '../app/questions/topic.model';
+import { ApiService } from './api.service';
 
 @Injectable({
     providedIn: 'root',
 })
-export class QuestionService {
-    private baseUrl = API_CONFIG.baseUrl + '/questions';
+export class QuestionService extends ApiService {
+    protected apiPath = 'question/questions';
 
     private httpOptions = {
         headers: new HttpHeaders({
             'Content-Type': 'application/json',
         }),
     };
 
-    constructor(private http: HttpClient) {}
+    constructor(private http: HttpClient) {
+        super();
+    }
 
     getQuestions(
         title?: string,
@@ -46,11 +48,11 @@ export class QuestionService {
         }
 
         // send request
-        return this.http.get<QuestionResponse>(this.baseUrl, { params });
+        return this.http.get<QuestionResponse>(this.apiUrl, { params });
     }
 
-    getQuestionByID(id: number): Observable<SingleQuestionResponse> {
-        return this.http.get<SingleQuestionResponse>(this.baseUrl + '/' + id);
+    getQuestionByID(id: number): Observable<QuestionResponse> {
+        return this.http.get<QuestionResponse>(this.apiUrl + '/' + id);
     }
 
     getQuestionByParam(topics: string[], difficulty: string, limit?: number): Observable<QuestionResponse> {
@@ -61,32 +63,32 @@ export class QuestionService {
         }
         params = params.append('topics', topics.join(',')).append('difficulty', difficulty);
 
-        return this.http.get<QuestionResponse>(this.baseUrl + '/search', { params });
+        return this.http.get<QuestionResponse>(this.apiUrl + '/search', { params });
     }
 
     getTopics(): Observable<TopicResponse> {
-        return this.http.get<TopicResponse>(this.baseUrl + '/topics');
+        return this.http.get<TopicResponse>(this.apiUrl + '/topics');
     }
 
     addQuestion(question: QuestionBody): Observable<SingleQuestionResponse> {
         return this.http
-            .post<SingleQuestionResponse>(this.baseUrl, question, this.httpOptions)
+            .post<SingleQuestionResponse>(this.apiUrl, question, this.httpOptions)
             .pipe(catchError(this.handleError));
     }
 
     updateQuestion(id: number, question: QuestionBody): Observable<SingleQuestionResponse> {
         return this.http
-            .put<SingleQuestionResponse>(this.baseUrl + '/' + id, question, this.httpOptions)
+            .put<SingleQuestionResponse>(this.apiUrl + '/' + id, question, this.httpOptions)
             .pipe(catchError(this.handleError));
     }
 
     deleteQuestion(id: number): Observable<SingleQuestionResponse> {
-        return this.http.delete<SingleQuestionResponse>(this.baseUrl + '/' + id).pipe(catchError(this.handleError));
+        return this.http.delete<SingleQuestionResponse>(this.apiUrl + '/' + id).pipe(catchError(this.handleError));
     }
 
     deleteQuestions(ids: number[]): Observable<MessageOnlyResponse> {
         return this.http
-            .post<MessageOnlyResponse>(this.baseUrl + '/delete', { ids }, this.httpOptions)
+            .post<MessageOnlyResponse>(this.apiUrl + '/delete', { ids }, this.httpOptions)
             .pipe(catchError(this.handleError));
     }
 

frontend/src/app/api.config.ts

@@ -1,3 +1,3 @@
 export const API_CONFIG = {
-    baseUrl: 'http://localhost:8081',
+    baseUrl: 'http://localhost:8080/api/',
 };

nginx/default.conf

@@ -0,0 +1,22 @@
+upstream question-api {
+    server question:8081;
+}
+
+upstream user-api {
+    server user:8082;
+}
+
+server {
+    listen 8080;
+    server_name localhost;
+
+    location /api/question/ {
+        proxy_pass http://question-api/;
+        proxy_set_header Host $host;
+    }
+
+    location /api/user/ {
+        proxy_pass http://user-api/;
+        proxy_set_header Host $host;
+    }
+}