Spring Boot and React with Docker Compose/Nginx not working

General
1

Hi all,

I am having a configuration nightmare with a Spring Boot and React app. I am deploying this using Docker and a Nginx reverse proxy.

I am testing this on my local machine right now. The backend is working ok and can respond to requests. However, the trouble seems to be with the frontend/docker/nginx configation.

When I send a frontend request to the URL, for example, http://localhost:5173/about, I get a 404 Not Found error in Postman and in the broswer nothing is returned.

I am really really grateful for your community help.

Thank you

Here is my Dockerfile for frontend:

#### Stage 1: Build the angular application
FROM node as build

# the directory should act as main application directory
WORKDIR /usr/src/app

# Copy the package.json as well as the package-lock.json 
COPY client/package.json client/package-lock.json ./

# Install the node depenadencies
RUN npm install

# Copy the main application
COPY client/ ./

# Build the application
RUN npm run build

#### Stage 2: serve the react application from Nginx for production environment
FROM nginx

# Copy the react build from Stage 1
COPY --from=build /usr/src/app/dist /usr/share/nginx/html
# Copy custom nginx config
COPY client/nginx.conf /etc/nginx/nginx.conf

# Expose port 80 to the Docker host, so accessible from outside
EXPOSE 80

CMD ["nginx","-g", "daemon off;"]

Here is the docker-compose.yaml

version: "3"

services:
  mysqldb:
    image: mysql:5.7
    container_name: mysql-db-container
    restart: always
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
    ports:
      - "3307:3306"

  internet-speed-backend:
    build:
      context: .
      dockerfile: server/Dockerfile
    container_name: backend-service-container
    ports:
      - "8080:8080"
    depends_on:
      - mysqldb

  react-ui:
    build:
      context: .
      dockerfile: client/Dockerfile
    container_name: react-service-container
    restart: always
    ports:
      - "5173:80"
    depends_on:
    - internet-speed-backend

And here is the nginx.conf file:

events {}

http {
  upstream backend {
    server internet-speed-backend:8080;
  }

  server {
    listen 80;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    location / {
      try_files $uri $uri/ /index.html;  
    }
    
    location @backend {
      proxy_pass http://backend$request_uri;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header Host $http_host;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
  }
}
2

Trying to understand your setup just created a knot in my brain :rofl:

Was there a time this has been working?

We usually use Traefik as central entrypoint, just to route to the other services/container by (sub-)domain and/or path. Check simple Traefik example. You can use nginx-proxy, too. One service/container for one task/purpose.

Then the applications do their thing, even if they require nginx again to server files. But they have no nginx config to proxy requests to other services.