Nginx for two Frontends and one identical Backend

Server Config
, , ,
1

Hello,
I have two frontends (React) running on ports 3000 and 3001 and a backend (Laravel) running on port 9000. The first frontend runs on the address http://172.20.2.58 and the second frontend runs on the address http://172.20.2.58/app2.
In the frontend first, the callApi.js file looks like this:

const callApi = () => {
    const axiosInstance = axios.create({
        baseURL: '/api',
        withCredentials: true, 
        headers: {
            'Content-Type': 'application/json',
        },
    });

And in the second frontend, the callApi.js and next.config.js files are as follows:

const callApi = () => {
    const axiosInstance = axios.create({
        baseURL: `/api/branch`,
        withCredentials: true,
        headers: {
            'Content-Type': 'application/json',
        },
    });

And:

module.exports = {
  basePath: '/app2',
  assetPrefix: '/app2/',
  async rewrites() {
    return [
      {
        source: '/app2/_next/:path*',
        destination: '/_next/:path*'
      }
    ]
  }
}

I disabled the first frontend container and I want to test only the second frontend with the backend. The Nginx configuration is:

server {
    listen 80;
    server_name localhost 172.20.2.58;

    # Static files
    location ~ ^/app2/_next/static {
        proxy_pass http://127.0.0.1:3001;
        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;
        expires 1y;
        add_header Cache-Control "public, immutable, max-age=31536000";
    }

    # Next.js Image Optimization
    location ~ ^/app2/_next/image {
        proxy_pass http://127.0.0.1:3001;
        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;
    }

    # Frontend routes
    location /app2 {
        rewrite ^/app2/?(.*)$ /$1 break;
        proxy_pass http://127.0.0.1:3001;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        proxy_set_header X-Forwarded-Prefix /app2;
        proxy_buffering off;
        proxy_request_buffering off;
    }

    # Redirect root to /app2 while portal is down
    location = / {
        return 302 /app2;
    }

    # ========================
    # API Endpoints (PHP-FPM)
    # ========================
    
    # Main API
    location /api {
        fastcgi_pass 127.0.0.1:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME /var/www/public/index.php;
        include fastcgi_params;
        
        fastcgi_cache PHP_CACHE;
        fastcgi_cache_valid 200 301 302 10m;
        fastcgi_cache_methods GET HEAD;
        fastcgi_cache_key "$scheme$request_method$host$request_uri";
        fastcgi_cache_min_uses 1;
        add_header X-Cache-Status $upstream_cache_status;
        
        fastcgi_param HTTP_HOST $host;
        fastcgi_param X-Real-IP $remote_addr;
        fastcgi_param X-Forwarded-For $proxy_add_x_forwarded_for;
        
        add_header 'Access-Control-Allow-Origin' 'http://172.20.2.58 http://172.20.2.58/app2' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'X-Requested-With,Content-Type,Authorization' always;
        
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain; charset=utf-8';
            add_header 'Content-Length' 0;
            return 204;
        }
    }

    # Branch-specific API
    location /api/branch {
        fastcgi_pass 127.0.0.1:9000;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME /var/www/public/index.php;
        
        # Inherits all API settings from above
    }

    # ========================
    # Error Handling
    # ========================
    error_page 502 /maintenance.html;
    location = /maintenance.html {
        root /var/www/html;
        internal;
    }
}

When I use the command curl -v http://172.20.2.58/app2 I get the following error:

The page you requested was not found!

What is wrong?

Thank you.

2

Hello,
I modified callApi.js for the second application as follows:

const callApi = () => {
    const axiosInstance = axios.create({
        baseURL: `/api/branch`,
        withCredentials: true,
        headers: {
            'Content-Type': 'application/json',
        },
    });

And modified Next.config.js for the second application as follows:

module.exports = {
  basePath: '/branch',
  async rewrites() {
    return [
      {
        source: '/branch/_next/:path*',
        destination: '/_next/:path*'
      },
      {
        source: '/branch/api/:path*',
        destination: '/api/:path*'
      }
    ]
  }
}

And the Nginx configuration is:

server {
    listen 80;
    server_name 172.20.2.58;

    # Main application proxy
    location /branch {
        proxy_pass http://127.0.0.1:3001/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        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;
        
        # Required for Next.js static files
        proxy_redirect ~^/(.*)$ /branch/$1;
    }

    # Critical: Handle Next.js static files
    location /_next/static {
        proxy_pass http://127.0.0.1:3001/_next/static;
        proxy_set_header Host $host;
        expires 365d;
        add_header Cache-Control "public, max-age=31536000, immutable";
    }

    # Handle Next.js public files
    location /static {
        proxy_pass http://127.0.0.1:3001/static;
        proxy_set_header Host $host;
    }

    # Handle API routes
    location /api/branch {
        proxy_pass http://127.0.0.1:3001/api/branch;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

When I visit the address http://172.20.2.58:3001/branch everything is correct, but the address http://172.20.2.58/branch does not load the page correctly.