Issue with Serving KAUI via Nginx Subdirectory Path

[Abel Moremi]

Hi everyone,

I'm currently facing an issue deploying KAUI (Kill Bill Admin UI) in a Docker container and serving it through Nginx under a subdirectory path. Despite several attempts to configure both Nginx and the KAUI application, the application continues to serve at the root path instead of the intended subdirectory, causing broken functionality.

Scenario

• Application: KAUI (Kill Bill Admin UI)
• Containerization: Docker
• Web Server: Nginx
• Subdirectory Path: /portal
• Hostnames: www.example.com, example.com

Current Nginx Configuration
Here's the current configuration for Nginx:

server {
    listen 80;
    server_name www.example.com example.com;

    location /backend/ {
        proxy_pass http://localhost:8080/;
        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;
        rewrite ^/backend/(.*) /$1 break;
    }

    location /portal/ {
        proxy_pass http://localhost:9090/;
        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;
        rewrite ^/portal/(.*) /$1 break;
    }

    location / {
        proxy_pass http://localhost:3000/;
        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;
    }
}

server {
    listen 443 ssl;
    server_name www.example.com example.com;

    ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;
    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    location /backend/ {
        proxy_pass http://localhost:8080/;
        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;
        rewrite ^/backend/(.*) /$1 break;
    }

    location /portal/ {
        proxy_pass http://localhost:9090/;
        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;
        rewrite ^/portal/(.*) /$1 break;
    }

    location / {
        proxy_pass http://localhost:3000/;
        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;
    }
}

Docker Compose File
Here's the docker-compose file I'm using:

version: '3.2'
volumes:
  killbill_data:
  kaui_data:
  db_data:

services:
  killbill:
    image: killbill/killbill
    ports:
      - "8080:8080"
    environment:
      - KILLBILL_DAO_URL=jdbc:mysql://db:3306/killbill
      - KILLBILL_DAO_USER=root
      - KILLBILL_DAO_PASSWORD=killbill
      - KILLBILL_CATALOG_URI=SpyCarAdvanced.xml
    depends_on:
      - db
    volumes:
      - killbill_data:/var/lib/killbill

  kaui:
    image: killbill/kaui
    ports:
      - "9090:8080"
    environment:
      - KAUI_CONFIG_DAO_URL=jdbc:mysql://db:3306/kaui
      - KAUI_CONFIG_DAO_USER=root
      - KAUI_CONFIG_DAO_PASSWORD=killbill
      - KAUI_KILLBILL_URL=http://killbill:8080
    depends_on:
      - killbill
    volumes:
      - kaui_data:/var/lib/kaui

  db:
    image: killbill/mariadb:0.24
    volumes:
      - db_data:/var/lib/mysql
    expose:
      - "3306"
    environment:
      - MYSQL_ROOT_PASSWORD=killbill

  vue:
    build:
      context: ./E-Biling
    ports:
      - "3000:3000"
    depends_on:
      - db
      - killbill
      - kaui

Issues Encountered

1. Application Serving at Root: Despite the Nginx configuration, the KAUI application continues to serve at the root path instead of the /portal subdirectory.
2. Broken Functionality: Clicking buttons or links within the application often results in redirects to the root path, causing broken functionality.
3. Resource Loading: Resources like CSS, JavaScript, and images fail to load correctly, leading to a broken interface.

Steps Taken

goog_1279063971Tried various rewrite rules to strip the /portal prefix before proxying requests to KAUI.

1. Nginx Configuration:
   • Tried various rewrite rules to strip the /portal prefix before proxying requests to KAUI.
2. Docker Configuration:
   • Set up KAUI and Kill Bill containers with appropriate environment variables and dependencies.
3. Browser Debugging:
   • Used developer tools to inspect network requests and observed that paths still point to the root.
4. Log Monitoring:
   • Checked Nginx access and error logs for any misconfigurations or errors but found no clear issues.

Request for Help

Could anyone please advise on:

1. Configuring KAUI: How to configure KAUI to be aware that it is served under a subdirectory (/portal)?
2. Nginx Rewrites: Any additional Nginx configuration tweaks to ensure proper URL handling for subdirectory paths?
3. General Advice: Any general advice or common pitfalls when serving applications under a subdirectory using Nginx?

Any help or pointers would be greatly appreciated!

Thank you!