Merge pull request #30 from CS3219-AY2425S1/titus/setup-docker-compose

feat: setup docker compose

Author: bensohh

apps/README.md

@@ -0,0 +1,100 @@
+# PeerPrep Docker Compose Guide
+
+This project uses Docker Compose to manage multiple services such as a frontend, backend, and a database. The configuration is defined in the `docker-compose.yml` file, and environment variables can be stored in environment files for different environments (e.g., development, production).
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed on your machine:
+
+- [Docker](https://www.docker.com/get-started)
+- [Docker Compose](https://docs.docker.com/compose/install/)
+
+## Project Structure
+
+In the `./apps` directory:
+
+```plaintext
+.
+├── docker-compose.yml       # Docker Compose configuration
+├── .env                     # Global environment variables (optional)
+├── frontend
+│   ├── Dockerfile           # Dockerfile for frontend
+│   └── ... (other frontend files)
+├── question-service
+│   ├── Dockerfile           # Dockerfile for question-service
+│   └── ... (other question-service files)
+├── user-service
+│   ├── Dockerfile           # Dockerfile for user-service
+│   └── ... (other user-service files)
+└── README.md                # Project documentation (for docker compose)
+```
+
+## Docker Compose Setup
+
+By using multiple Dockerfiles in Docker Compose, we can manage complex multi-container applications where each service has its own environment and build process.
+
+1. Build and Start the Application
+
+To build and run both the frontend and backend services, you can change your directory to the `./apps` directory and run:
+
+```bash
+docker-compose up --build
+```
+
+This will:
+
+- Build the Docker images for all services using the specified Dockerfiles
+- Start the containers and map the defined ports
+
+2. Access the Application
+
+Once running, you can access:
+
+- The **frontend** at http://localhost:3000
+- The **user service** at http://localhost:3001
+- The **question service** at http://localhost:8080
+
+3. Stopping Services
+
+To stop the running services, run:
+
+```bash
+docker-compose down
+```
+
+This command will stop and remove the containers, networks, and volumes created by docker-compose up.
+
+## Troubleshooting
+
+**Common Issues**
+
+- Port Conflicts: If you encounter port conflicts, ensure the host ports specified in docker-compose.yml (e.g., 3000:3000) are not in use by other applications.
+- Environment Variables Not Loaded: Ensure the `.env` files are in the correct directories as found in the `docker-compose.yml` file.
+
+**Logs**
+
+You can view the logs for each service using the following command:
+
+```bash
+docker-compose logs
+```
+
+**Useful Commands**
+
+Rebuild a specific service:
+
+```bash
+docker-compose build <service_name>
+```
+
+Start services in detached mode (run in the background):
+
+```bash
+docker-compose up -d
+```
+
+Remove all containers, networks, and volumes created by Docker Compose:
+
+```bash
+docker-compose down --volumes
+```

apps/docker-compose.yml

@@ -0,0 +1,45 @@
+services:
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - 3000:3000
+    networks:
+      - apps_network
+    env_file:
+      - ./frontend/.env
+    volumes:
+      - ./frontend:/frontend
+
+  user-service:
+    build:
+      context: ./user-service
+      dockerfile: Dockerfile
+      args:
+        DB_CLOUD_URI: ${DB_CLOUD_URI}
+        JWT_SECRET: ${JWT_SECRET}
+    ports:
+      - 3001:3001
+    networks:
+      - apps_network
+    env_file:
+      - ./user-service/.env
+    volumes:
+      - ./user-service:/user-service
+
+  question-service:
+    build:
+      context: ./question-service
+      dockerfile: Dockerfile
+    ports:
+      - 8080:8080
+    env_file:
+      - ./question-service/.env
+    networks:
+      - apps_network
+    volumes:
+      - ./question-service:/question-service
+
+networks:
+  apps_network:

apps/frontend/.env.example

@@ -1,3 +1,3 @@
 # Replace with the corresponding url, credentials and endpoint
-NEXT_PUBLIC_API_URL="http://localhost:8080/"
+NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080/"
 NEXT_PUBLIC_USER_SERVICE_URL="http://localhost:3001/"

apps/frontend/Dockerfile

@@ -1,9 +1,5 @@
 FROM node:18-alpine AS base
 
-# For now we can specify it here, else we can use --build-arg in our docker build command
-ARG NEXT_PUBLIC_API_URL
-ENV NEXT_PUBLIC_API_URL=${NEXT_PUBLIC_API_URL}
-
 # Install dependencies only when needed
 FROM base AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.

apps/frontend/README.md

@@ -23,7 +23,7 @@ pnpm install
 Then, follow the `.env.example` file and create a `.env` file in the current directory. Replace the necessary values within.
 
 ```bash
-NEXT_PUBLIC_API_URL=http://localhost:8080
+NEXT_PUBLIC_QUESTION_SERVICE_URL=http://localhost:8080
 ```
 
 First, run the development server:
@@ -42,7 +42,7 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 # Navigate to the frontend app directory
 cd apps/frontend
 # Build dockerfile (Ensure that your docker daemon is running beforehand)
-docker build -t frontend --build-arg NEXT_PUBLIC_API_URL="http://localhost:8080/" -f Dockerfile .
+docker build -t frontend -e NEXT_PUBLIC_QUESTION_SERVICE_URL="http://localhost:8080/" -f Dockerfile .
 ```
 
 Run the backend server locally and visit http://localhost:3000/ to see the frontend application working

apps/frontend/src/app/services/question.ts

@@ -1,3 +1,7 @@
+import { getToken } from "./login-store";
+
+const QUESTION_SERVICE_URL = process.env.NEXT_PUBLIC_QUESTION_SERVICE_URL;
+
 export interface Question {
   id: number;
   docRefId: string;
@@ -37,7 +41,7 @@ export const GetQuestions = async (
   categories?: string[],
   title?: string
 ): Promise<QuestionListResponse> => {
-  let query_url = `${process.env.NEXT_PUBLIC_API_URL}questions`;
+  let query_url = `${QUESTION_SERVICE_URL}questions`;
   let query_params = "";
 
   if (currentPage) {
@@ -73,15 +77,26 @@ export const GetQuestions = async (
   }
 
   query_url += query_params;
-  const response = await fetch(query_url);
+  const response = await fetch(query_url, {
+    method: "GET",
+    headers: {
+      'Authorization': `Bearer ${getToken()}`,
+    }
+  });
   const data = await response.json();
   return data;
 };
 
 // Get single question
 export const GetSingleQuestion = async (docRef: string): Promise<Question> => {
   const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}questions/${docRef}`
+    `${QUESTION_SERVICE_URL}questions/${docRef}`,
+    {
+      method: "GET",
+      headers: {
+        'Authorization': `Bearer ${getToken()}`,
+      }
+    }
   );
   const data = await response.json();
   return data;
@@ -91,10 +106,11 @@ export const GetSingleQuestion = async (docRef: string): Promise<Question> => {
 export const CreateQuestion = async (
   question: NewQuestion
 ): Promise<Question> => {
-  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}questions`, {
+  const response = await fetch(`${QUESTION_SERVICE_URL}questions`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
+      'Authorization': `Bearer ${getToken()}`,
     },
     body: JSON.stringify(question),
   });
@@ -113,11 +129,12 @@ export const EditQuestion = async (
   docRefId: string
 ): Promise<Question> => {
   const response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}questions/${docRefId}`,
+    `${QUESTION_SERVICE_URL}questions/${docRefId}`,
     {
       method: "PUT",
       headers: {
         "Content-Type": "application/json",
+        'Authorization': `Bearer ${getToken()}`,
       },
       body: JSON.stringify(question),
     }
@@ -135,9 +152,12 @@ export const EditQuestion = async (
 // Delete single question (TODO: Ryan)
 export async function DeleteQuestion(docRef: String): Promise<void> {
   const res = await fetch(
-    `${process.env.NEXT_PUBLIC_API_URL}questions/${docRef}`,
+    `${QUESTION_SERVICE_URL}questions/${docRef}`,
     {
       method: "DELETE",
+      headers: {
+        'Authorization': `Bearer ${getToken()}`,
+      },
     }
   );
   // error handling later

apps/question-service/.env.example

@@ -1 +1,4 @@
 FIREBASE_CREDENTIAL_PATH=cs3219-g24-firebase-adminsdk-9cm7h-b1675603ab.json
+
+# Secret for creating JWT signature
+JWT_SECRET=you-can-replace-this-with-your-own-secret

apps/question-service/middleware/basic-access-control.go

@@ -1,14 +1,22 @@
 package middleware
 
 import (
-	"github.com/golang-jwt/jwt/v4"
+	"log"
 	"net/http"
 	"os"
 	"strings"
+
+	"github.com/golang-jwt/jwt/v4"
 )
 
 func VerifyJWT(next http.Handler) http.Handler {
 	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
+		// Skip JWT Verification for OPTIONS Requests
+		if r.Method == "OPTIONS" {
+			next.ServeHTTP(w, r)
+			return
+		}
+
 		// Get the token from the Authorization header
 		authHeader := r.Header.Get("Authorization")
 		if authHeader == "" {
@@ -17,7 +25,12 @@ func VerifyJWT(next http.Handler) http.Handler {
 		}
 
 		// Split the header to get the token
-		tokenString := strings.Split(authHeader, " ")[1]
+		parts := strings.Split(authHeader, " ")
+		if len(parts) != 2 || parts[0] != "Bearer" {
+			http.Error(w, "Invalid authorization header format", http.StatusUnauthorized)
+			return
+		}
+		tokenString := parts[1]
 
 		// Retrieve the JWT secret from environment variables
 		jwtSecret := []byte(os.Getenv("JWT_SECRET"))
@@ -36,6 +49,7 @@ func VerifyJWT(next http.Handler) http.Handler {
 
 		if err != nil || !token.Valid {
 			http.Error(w, "Invalid token", http.StatusUnauthorized)
+			log.Printf("Token parse error: %v", err)
 			return
 		}