Skip to content

Frontend Routing Fix

Problem

After fixing the static files issue by modifying the AWS ELB target group configuration, the frontend was no longer accessible. The main domain https://tracker.glimpse.technology was returning 405 Method Not Allowed errors, indicating it was hitting the API server instead of serving the frontend application.

📖 Background: This issue occurred as a consequence of the Admin Panel Static Files Fix, which corrected AWS load balancer configuration to serve static files properly.

Root Cause

When we fixed the static files issue, we modified the AWS load balancer configuration to point the main domain to the API server (port 8000) to serve static files. However, this broke the frontend routing because:

  1. The main domain tracker.glimpse.technology was pointing to the API load balancer
  2. The API load balancer had a default action that forwarded all traffic to the API target group
  3. There was no target group or routing for the frontend (port 8200)

Architecture Before Fix

https://tracker.glimpse.technology/ → API Server (port 8000) [BROKEN - should be frontend]
https://tracker-admin.glimpse.technology/ → Admin Panel (port 80) [Working]

Solution

The fix involved creating proper routing rules in the AWS Application Load Balancer to serve different applications based on URL paths:

1. Created Frontend Target Group

aws elbv2 create-target-group \
  --name tracker-frontend \
  --protocol HTTP \
  --port 8200 \
  --vpc-id vpc-a258d4ca \
  --health-check-path "/" \
  --health-check-interval-seconds 10 \
  --health-check-timeout-seconds 5 \
  --healthy-threshold-count 2 \
  --unhealthy-threshold-count 3

2. Registered EC2 Instance with Frontend Target Group

aws elbv2 register-targets \
  --target-group-arn arn:aws:elasticloadbalancing:eu-west-2:951665295205:targetgroup/tracker-frontend/2c191305df61ad65 \
  --targets Id=i-022d1ec1b8c62660b,Port=8200

3. Created API Routing Rule

aws elbv2 create-rule \
  --listener-arn arn:aws:elasticloadbalancing:eu-west-2:951665295205:listener/app/glimpse-tracker-api/92f7e1e912947ad2/36985e436d5edd82 \
  --priority 50 \
  --conditions Field=path-pattern,Values="/api/*" \
  --actions Type=forward,TargetGroupArn=arn:aws:elasticloadbalancing:eu-west-2:951665295205:targetgroup/glimpse-tracker-api/56e6f6c5ec49a604

4. Updated Default Action to Route to Frontend

aws elbv2 modify-listener \
  --listener-arn arn:aws:elasticloadbalancing:eu-west-2:951665295205:listener/app/glimpse-tracker-api/92f7e1e912947ad2/36985e436d5edd82 \
  --default-actions Type=forward,TargetGroupArn=arn:aws:elasticloadbalancing:eu-west-2:951665295205:targetgroup/tracker-frontend/2c191305df61ad65

Final Architecture

https://tracker.glimpse.technology/
├── /api/* → API Server (port 8000)
├── /static/* → API Server (port 8000)
└── /* → Frontend (port 8200)

https://tracker-admin.glimpse.technology/ → Admin Panel (port 80)

Load Balancer Rules (Priority Order)

  1. Priority 50: /api/* → API Target Group (port 8000)
  2. Priority 100: /static/* → API Target Group (port 8000)
  3. Default: Everything else → Frontend Target Group (port 8200)

Verification

After implementing the fix, all services were verified to be working:

Frontend

curl -I https://tracker.glimpse.technology
# HTTP/2 200
# content-type: text/html

API

curl -I https://tracker.glimpse.technology/api/v1/brands/
# HTTP/2 405 (Method Not Allowed - expected for HEAD request)
# API server headers present

Static Files

curl -I https://tracker.glimpse.technology/static/images/86a045390c76406fbc0b68a146c7335f.png
# HTTP/2 200
# content-type: image/png

Admin Panel

curl -I https://tracker-admin.glimpse.technology
# HTTP/2 200
# content-type: text/html

Key Learnings

  1. Path-based Routing: AWS ALB supports sophisticated routing rules based on URL paths, allowing multiple applications to be served from the same domain.

  2. Rule Priority: Lower priority numbers are evaluated first. It's important to order rules from most specific to least specific.

  3. Target Group Health: Always verify target group health after making changes to ensure the application is reachable.

  4. Testing Strategy: Test all routing paths after making changes to ensure no services are broken.

Prevention

To prevent similar issues in the future:

  1. Document Routing Rules: Maintain clear documentation of all load balancer rules and their purposes.

  2. Test All Paths: When modifying load balancer configuration, test all application paths to ensure nothing is broken.

  3. Staging Environment: Test routing changes in a staging environment before applying to production.

  4. Monitoring: Set up monitoring for all application endpoints to quickly detect routing issues.

  • AWS Load Balancer: glimpse-tracker-api
  • Target Groups: glimpse-tracker-api, tracker-frontend, tracker-admin-panel
  • Docker Services: api (port 8000), frontend (port 8200), admin (port 8080)

Docker Services

The application runs three main services:

services:
  api:
    ports:
      - "8000:8000" # API server

  frontend:
    ports:
      - "8200:80" # Frontend application

  admin:
    ports:
      - "8080:80" # Admin panel

Each service is routed through AWS ALB based on the URL path or subdomain.