introducing nginx

docker-compose.yml

@@ -1,43 +1,48 @@
 services:
+  nginx:
+    image: nginx:latest
+    container_name: nginx
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    ports:
+      - "80:80"  # Expose NGINX on port 80
+    networks:
+      - guitartuto-network
+    depends_on:
+      - backend
   backend:
     container_name: backend
-    # build:
-    #   context: ./backend
-    #   dockerfile: Dockerfile
-
     image: pdelebarre/guitar-tutorial-app-backend
     # :${BUILD_ENV:-dev}
     ports:
       - "8080:8080"
     environment:
-      # Adapt path for the container
       TUTORIALS_PATH: /app/tutorials  # Use an internal path inside the container
-
       # Default to dev profile (using H2)
       SPRING_PROFILES_ACTIVE: dev
 
     volumes:
       - /Volumes/LaCie/dev/guitar-tutorial-app/tutorials:/app/tutorials
     networks:
       - guitartuto-network
+    restart: unless-stopped
     # Do not include depends_on here, so backend is independent in dev
 
   frontend:
     container_name: frontend
-    # build:
-    #   context: ./frontend
     image: pdelebarre/guitar-tutorial-app-frontend
     environment:
-        TUTO_API_URL: http://backend
+        TUTO_API_URL: http://nginx
         TUTO_API_PORT: 8080
-
     ports:
       - "3000:80"
     depends_on:
       - backend
+      - nginx
     networks:
       - guitartuto-network
 
 networks:
   guitartuto-network:
     driver: bridge
+    name: guitartuto-network

frontend/.env.production

@@ -1,3 +1,5 @@
-VITE_API_URL=TUTO_API_URL
-VITE_API_PORT=TUTO_API_PORT
+# .env
+VITE_API_URL = http://nginx
+VITE_API_PORT = 80
+
 VITE_ENVIRONMENT=PRODUCTION

frontend/src/api/api.ts

@@ -1,77 +1,65 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import axios from "axios";
-
 import { Comment, Playlist } from "../types/types";
 
-// Use environment variables for the baseURL
+// Use environment variable for the baseURL
 const apiURL = import.meta.env.VITE_API_URL;
-const apiPort = import.meta.env.VITE_API_PORT;
 
 console.log("VITE_API_URL:", apiURL);
-console.log("VITE_API_PORT:", apiPort);
-
 
 // Check if the environment variable is set correctly
-if (!apiURL || !apiPort) {
+if (!apiURL) {
   throw new Error("VITE_API_URL is not defined. Check your .env file.");
 }
 
+// Create axios instance with simplified baseURL
 const api = axios.create({
-  baseURL: `${apiURL}:${apiPort}/api`,
+  baseURL: `${apiURL}/api`, // Proxy will route to backend on port 80
 });
 
 // Debugging the axios instance baseURL
-console.log("apiURL: ", apiURL);
-console.log("apiPort: ", apiPort);
-console.log("Axios baseURL: ", api.defaults.baseURL);
+console.log("Axios baseURL:", api.defaults.baseURL);
 
 // Fetch list of file names (tutorials) from the backend
 export const getTutorials = async (): Promise<string[]> => {
-  console.log("API base URL being used: ", api.defaults.baseURL);
   const response = await api.get("/tutorials/");
   return response.data;
 };
 
 // Utility function to URL-encode the file name
-const encodeFileName = (fileName: string) => {
-  return encodeURIComponent(fileName);
-};
+const encodeFileName = (fileName: string) => encodeURIComponent(fileName);
 
 // Fetch MP4 file URL
-export const getVideoUrl = async (fileName: string): Promise<string> => {
-  const encodedFileName = encodeFileName(fileName); // Encode the file name
-  return `${api.defaults.baseURL}/tutorials/${encodedFileName}/mp4`;  // API path for video file
+export const getVideoUrl = (fileName: string): string => {
+  return `${api.defaults.baseURL}/tutorials/${encodeFileName(fileName)}/mp4`;
 };
 
 // Fetch SRT file URL
-export const getSubtitleUrl = async (fileName: string): Promise<string | null> => {
+export const getSubtitleUrl = async (
+  fileName: string
+): Promise<string | null> => {
   try {
-    const encodedFileName = encodeFileName(fileName); // Encode the file name
-    // const response =
-      // await axios.get(`/tutorials/${encodedFileName}/srt`, { responseType: 'blob' });
-    return `${api.defaults.baseURL}/tutorials/${encodedFileName}/srt`;  // Return the subtitle URL
+    return `${api.defaults.baseURL}/tutorials/${encodeFileName(fileName)}/srt`;
   } catch (error) {
-    console.error('Subtitle file not found:', error);
+    console.error("Subtitle file not found:", error);
     return null;
   }
 };
 
 // Fetch PDF tablature URL
-export const getTablatureUrl = async (fileName: string): Promise<string | null> => {
+export const getTablatureUrl = async (
+  fileName: string
+): Promise<string | null> => {
   try {
-    const encodedFileName = encodeFileName(fileName); // Encode the file name
-    // const response =
-      // await axios.get(`/tutorials/${encodedFileName}/pdf`, { responseType: 'blob' });
-    return `${api.defaults.baseURL}/tutorials/${encodedFileName}/pdf`;  // Return the tablature URL
+    return `${api.defaults.baseURL}/tutorials/${encodeFileName(fileName)}/pdf`;
   } catch (error) {
-    console.error('Tablature file not found:', error);
+    console.error("Tablature file not found:", error);
     return null;
   }
 };
+
 // Fetch comments for a specific tutorial
 export const getComments = async (tutorialId: number): Promise<Comment[]> => {
-  console.log("API base URL being used: ", api.defaults.baseURL);
   const response = await api.get(`/comments/tutorial/${tutorialId}`);
   return response.data;
 };
@@ -95,7 +83,6 @@ export const createPlaylist = async (name: string): Promise<void> => {
   await api.post("/playlists", { name });
 };
 
-
 // Post a new annotation (highlight)
 export const postAnnotation = async (
   tutorialId: string,
@@ -115,5 +102,3 @@ export const postAnnotation = async (
 export const deleteAnnotation = async (annotationId: string): Promise<void> => {
   await api.delete(`/annotations/${annotationId}`);
 };
-
-

nginx.conf

@@ -0,0 +1,37 @@
+worker_processes 1;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+
+  # Configure upstream servers
+  upstream backend {
+    server backend:8080;  # Docker service name and port of the backend
+  }
+
+  server {
+    listen 80;
+
+    # Route /api requests to the backend service
+    location /api {
+      proxy_pass http://backend;
+      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;
+    }
+
+    # Serve frontend for all other routes
+    location / {
+      proxy_pass http://frontend;
+      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;
+    }
+  }
+}