docker compose app running, just needs backend tuning

docker-compose.yml

@@ -15,7 +15,7 @@ services:
       context: .
       dockerfile: frontend/docker/Dockerfile.frontend
     ports:
-      - "3000:3000"
+      - "3000:80"
 
 volumes:
   data-volume:

frontend/docker/Dockerfile.frontend

@@ -1,11 +1,12 @@
 # Use the official Node.js 14 image from DockerHub
-FROM node:14 as build-stage
+FROM node:16 as build-stage
 
 # Set the working directory
 WORKDIR /frontend
 
 # Copy the `package.json` and `package-lock.json`
 COPY frontend/package*.json ./
+COPY frontend/nginx/nginx.conf /etc/nginx/conf.d/
 
 # Install the project dependencies and clear npm cache for a smaller image
 RUN npm install && npm cache clean --force
@@ -22,6 +23,7 @@ FROM nginx:alpine
 # Copy the build from the previous image
 COPY --from=build-stage /frontend/dist /usr/share/nginx/html
 
+
 # Expose port 80 for the app
 EXPOSE 80
 

frontend/nginx/nginx.conf

@@ -0,0 +1,16 @@
+server {
+    listen 80;
+
+    location / {
+        root /usr/share/nginx/html;
+        try_files $uri $uri/ @backend;
+    }
+
+    location /api/ {
+        proxy_pass http://lipsync-backend:5000;
+        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;
+    }
+}

frontend/src/App.jsx

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import axios from 'axios';
 import ProgressBar from './components/ProgressBar';
 
-const BACKEND_URL = "http://127.0.0.1:5000"
+const BACKEND_URL = "http://localhost:5000"
 
 function App() {
     const [activeRecorder, setActiveRecorder] = useState(null);