server { listen 80; server_name localhost; root /usr/share/nginx/html; index index.html; # Enable gzip compression gzip on; gzip_vary on; gzip_min_length 1024; gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json; # Handle Vue.js SPA routing location / { try_files $uri $uri/ /index.html; } # API proxy to backend with service discovery location /api/ { # Use resolver for Docker DNS resolver 127.0.0.11 valid=30s; set $backend_endpoint http://backend:80; # Use HTTPS for backend if frontend is HTTPS if ($scheme = https) { set $backend_endpoint http://backend:80; } proxy_pass $backend_endpoint; 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; # Error handling for backend service proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504; proxy_connect_timeout 5s; proxy_send_timeout 10s; proxy_read_timeout 10s; # Handle CORS headers add_header Access-Control-Allow-Origin "*" always; add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS" always; add_header Access-Control-Allow-Headers "Content-Type, Authorization, X-Requested-With" always; # Handle preflight requests 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 "Content-Type, Authorization, X-Requested-With"; add_header Content-Length 0; add_header Content-Type text/plain; return 204; } } # Cache static assets location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } # Security headers add_header X-Frame-Options "SAMEORIGIN" always; add_header X-Content-Type-Options "nosniff" always; add_header X-XSS-Protection "1; mode=block" always; add_header Referrer-Policy "strict-origin-when-cross-origin" always; # Error pages error_page 404 /index.html; error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }