UI getting hosted on BE server. Unable to route to correct paths

Troubleshooting
1

I am trying to deploy an UI using nginx inside a docker container. In the same container my API’s are also hosted in Apache Tomcat . The API is supposed to run in 8080 port. I have configured my UI to run in 3000 port. The UI comes up at : http://localhost:3000 , however the UI also comes up at http://localhost:8080, which is wrong. I have been trying to debug these from last couple of days. Not able to understand the issue. request your help here. Attaching the nginx configuration for reference.

cat > /etc/nginx/conf.d/default.conf <<EOF
server {
    listen 3000;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    # Serve React app and handle client-side routing
    location / {
        try_files \$uri /index.html;
    }

    location /api/ {
        proxy_pass http://localhost:8080;  # Replace with your backend app's internal port
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;

        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With";

        if (\$request_method = OPTIONS) {
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
            add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With";
            return 204;
        }
    }

    # Proxy Swagger UI requests to the backend application
    location /swagger-ui/ {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;
    }

    # Cache static files (CSS, JS, images, etc.)
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|ttf|woff|woff2|eot|otf|webp)$ {
        expires max;
        log_not_found off;
    }

    # Redirect all 404 errors to index.html
    error_page 404 /index.html;
    location = /index.html {
        allow all;
    }
}
EOF
1 Like
2

Moved to the Troubleshooting category :slight_smile:

3

Based on the config you shared, you have NGINX listening on port 3000, but it sounds like that should be the port that Apache Tomcat is listening on, correct? With NGINX disabled, are you able to properly access the UI and the API endpoint? Once you have confirmed that the application is available on the expected ports, you will want to set NGINX to listen on a different port(ie 80/443), and then you will need to setup different location blocks to expose the API and UI how you want it.

6

Heya! In addition to what @Damian_Curry said, there are two things that come to mind:

  1. NGINX here is only listening on port 3000, so the UI coming up in port 8080 is not related to NGINX. Instead, it’s more likely that whatever service is hosting the UI (I assume Tomcat) is also actively accessible on port 8080, with or without NGINX.
  2. It seems you are proxying both the /api/ and /swagger-ui/ endpoints to the service running on port 8080. Is that intentional?