more fixe

docker-compose.yml

@@ -4,10 +4,11 @@ services:
   nginx:
     image: nginx:latest
     container_name: nginx-proxy
+    restart: always
+    ports:
+      - "3050:80"
     volumes:
       - ./nginx/nginx.conf:/etc/nginx/nginx.conf
-    ports:
-      - "80:80"
     networks:
       - guitartuto-network
     depends_on:
@@ -34,7 +35,7 @@ services:
     environment:
       TUTO_API_URL: http://nginx/api  # Set API URL to go through Nginx
     # ports:
-      # - "3000:80"  # Uncomment if you want direct access to frontend on port 3000
+    #   - "3000:80"  # Uncomment if you want direct access to frontend on port 3000
     networks:
       - guitartuto-network
 

frontend/src/api/api.ts

@@ -13,16 +13,16 @@ import { Comment, Playlist } from "../types/types";
 // }
 
 // Create axios instance with simplified baseURL
-const api = axios.create({
-  baseURL: import.meta.env.VITE_API_BASE_URL || "/api" // Proxy will route to backend on port 80
-});
+// const api = axios.create({
+//   baseURL: import.meta.env.VITE_API_BASE_URL || "/api" // Proxy will route to backend on port 80
+// });
 
 // Debugging the axios instance baseURL
-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[]> => {
-  const response = await api.get("/tutorials/");
+  const response = await axios.get("/tutorials/");
   return response.data;
 };
 
@@ -31,15 +31,17 @@ const encodeFileName = (fileName: string) => encodeURIComponent(fileName);
 
 // Fetch MP4 file URL
 export const getVideoUrl = (fileName: string): string => {
-  return `${api.defaults.baseURL}/tutorials/${encodeFileName(fileName)}/mp4`;
+  return `/tutorials/${encodeFileName(fileName)}/mp4`;
 };
 
 // Fetch SRT file URL
 export const getSubtitleUrl = async (
   fileName: string
 ): Promise<string | null> => {
   try {
-    return `${api.defaults.baseURL}/tutorials/${encodeFileName(fileName)}/srt`;
+    return `/tutorials/${encodeFileName(
+      fileName
+    )}/srt`;
   } catch (error) {
     console.error("Subtitle file not found:", error);
     return null;
@@ -51,7 +53,7 @@ export const getTablatureUrl = async (
   fileName: string
 ): Promise<string | null> => {
   try {
-    return `${api.defaults.baseURL}/tutorials/${encodeFileName(fileName)}/pdf`;
+    return `/tutorials/${encodeFileName(fileName)}/pdf`;
   } catch (error) {
     console.error("Tablature file not found:", error);
     return null;
@@ -60,7 +62,7 @@ export const getTablatureUrl = async (
 
 // Fetch comments for a specific tutorial
 export const getComments = async (tutorialId: number): Promise<Comment[]> => {
-  const response = await api.get(`/comments/tutorial/${tutorialId}`);
+  const response = await axios.get(`/comments/tutorial/${tutorialId}`);
   return response.data;
 };
 
@@ -69,18 +71,18 @@ export const postComment = async (
   tutorialId: number,
   text: string
 ): Promise<void> => {
-  await api.post("/comments", { tutorialId, text });
+  await axios.post("/comments", { tutorialId, text });
 };
 
 // Fetch all playlists
 export const getPlaylists = async (): Promise<Playlist[]> => {
-  const response = await api.get("/playlists");
+  const response = await axios.get("/playlists");
   return response.data;
 };
 
 // Create a new playlist
 export const createPlaylist = async (name: string): Promise<void> => {
-  await api.post("/playlists", { name });
+  await axios.post("/playlists", { name });
 };
 
 // Post a new annotation (highlight)
@@ -90,7 +92,7 @@ export const postAnnotation = async (
   position: any,
   comment: { text: string; emoji: string }
 ): Promise<void> => {
-  await api.post("/annotations/", {
+  await axios.post("/annotations/", {
     tutorialId,
     content,
     position,
@@ -100,5 +102,5 @@ export const postAnnotation = async (
 
 // Delete an annotation by its ID
 export const deleteAnnotation = async (annotationId: string): Promise<void> => {
-  await api.delete(`/annotations/${annotationId}`);
+  await axios.delete(`/annotations/${annotationId}`);
 };

nginx/nginx.conf

@@ -8,18 +8,22 @@ http {
   # include       mime.types;
   # default_type  application/octet-stream;
 
+  upstream frontend {
+    server frontend:3000;
+  }
+
   # Configure upstream servers
-  # upstream backend {
-  #   server backend:8080;  # Docker service name and port of the backend
-  # }
+  upstream backend {
+    server backend:8080;  # Docker service name and port of the backend
+  }
 
   server {
-    listen       80;
-    server_name  localhost;
+    listen 80;
 
     # Route /api requests to the backend service
-    location /api {
-      proxy_pass http://backend:8080/;
+    location /api/ {
+      rewrite /api/(.*) /$1 break;
+      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;
@@ -28,11 +32,16 @@ http {
 
     # Serve frontend for all other routes
     location / {
-      proxy_pass http://frontend:80;
+      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;
     }
+
+        # You may need this to prevent return 404 recursion.
+    # location = /404.html {
+    #     internal;
+    # }
   }
 }