1. Initial Request Flow
Client → Port 5020 → Nginx Container (Port 80) → /usr/share/nginx/html → Angular App
Check Points & Why:
# 1. Is port accessible? curl -v localhost:5020 # Checks if nginx is listening docker compose ps # Verify port mapping: "5020:80" # 2. Is nginx running? docker compose logs nginx # Check startup success/errors
2. Static File Serving
Request for / → Nginx → /usr/share/nginx/html/index.htmlRequest for /main.js → Nginx → /usr/share/nginx/html/main.js
Check Points & Why:
# 1. Do files exist where nginx expects them?
docker compose exec nginx ls -la /usr/share/nginx/html
# Looking for: index.html, main.*.js, styles.*.css, etc.
# 2. Is nginx configured to serve them?
docker compose exec nginx cat /etc/nginx/conf.d/default.conf
# Check location / { root /usr/share/nginx/html; ... }
3. Angular Route Handling
Client requests /todos → Nginx → try_files → /index.html → Angular Router → Component
Check Points & Why:
location / {
try_files $uri $uri/ /index.html; # Critical for SPA routing
}
– Without this, direct URL access to Angular routes would 404
– Browser loads index.html, then Angular handles routing client-side
4. API Proxy Flow
Client → /api/todos → Nginx → Proxy → api_service:3000/todosClient → /rest/items → Nginx → Proxy → postgrest:3000/items
Check Points & Why:
# Check proxy configuration
location /api/ {
proxy_pass http://api_service:3000/; # Forward to backend
proxy_set_header Host $host; # Preserve request headers
proxy_set_header Connection "upgrade"; # Support WebSocket
}
5. Build Process Flow
Source → Node Builder → dist/client-app/* → Nginx HTML directory
Check Points & Why:
# 1. Build stage - verify Angular builds FROM node:18 as builder WORKDIR /app COPY ClientApp . RUN npm install && npm run build # Check: Are files built to expected location? RUN ls -la /app/dist # 2. Nginx stage - verify files are copied COPY --from=builder /app/dist/client-app/* /usr/share/nginx/html/
6. Common Issues by Symptom
Blank Page / 404:
Request → Nginx → Missing Files
# 1. Files copied correctly? docker compose exec nginx ls -la /usr/share/nginx/html # 2. Angular built correctly? # In builder stage: ls -la /app/dist/client-app/
API Calls Failing:
/api/* Request → Nginx → api_service (unreachable)
# 1. Services running? docker compose ps # 2. Network connectivity? docker compose exec nginx ping api_service # 3. Proxy config correct? docker compose exec nginx cat /etc/nginx/conf.d/default.conf
Route Not Found on Refresh:
/todos (refresh) → Nginx → Should serve index.html
# Verify try_files directive
location / {
try_files $uri $uri/ /index.html;
}
7. Performance Flow
Request → Nginx → Compression → Client
Check Points & Why:
# Enable compression for better performance gzip on; gzip_types text/plain text/css application/json application/javascript;
This flow-based approach helps understand:
- Where requests go at each step
- What could fail at each point
- How to verify each step is working
- Why each configuration piece matters
When troubleshooting, follow the request path and check each component in sequence to isolate where the flow breaks down.
by
Tags:
Leave a Reply