Technical Portfolio Showcase: A production-scale Nginx reverse proxy demonstrating advanced routing, SSL termination, and enterprise-grade security configurations.
HINO9 is an AI powered news platform designed to identify, analyze, and present key developments in AI.
System Architecture: The platform discovers and collects AI news content from multiple sources through automated and curated discovery methods, then processes full article content through large language models (LLMs) to generate headlines, summaries, bullet points, and categorization tags. All content is stored with full-text search capabilities and semantic embeddings, enabling advanced search and content discovery.
Public Project Structure:
- Frontend: Vue.js application with dual admin/public interfaces
- Backend: FastAPI service handling content processing and API endpoints
- Embedding Service: AWS App Runner deployment for semantic search capabilities
- Reverse Proxy: Nginx configuration managing public traffic routing and SSL termination
- CI/CD: Automated deployment pipeline orchestrating all services
Private Project Structure:
- Content Discovery Engine: Proprietary system identifying and collecting AI news from multiple sources
- URL Fetcher Service: Web scraping service (Selenium/BeautifulSoup) extracting full article content and metadata as structured JSON
- Content Curation Intelligence: Automated and manual workflows determining content relevance and prioritization
- AI Processing Pipeline: Coordinates LLM processing (AWS Lambda Bedrock), semantic embeddings (via Embedding Service), and storage
This reverse proxy project manages all public traffic routing, SSL termination, and security policies for the HINO9 platform, built with Nginx to provide high-performance request handling and advanced security configurations.
Technical Sections:
- 🚀 Platform Features
- 🏗️ System Architecture
- 🔧 Technology Stack
- 📊 Performance Metrics
- ✨ Key Features
- 📁 Code Organization
- 🚢 Production Infrastructure
Nginx configuration managing multiple upstream services with intelligent load balancing and health check integration. Implements path-based routing for frontend, backend API, and admin interfaces with automatic failover and blue-green deployment support.
SSL termination with TLS 1.3 support, perfect forward secrecy, and automated certificate management. Implements HSTS, secure cipher suites, and OCSP stapling for optimal security and performance with Let's Encrypt integration.
Production-grade Content Security Policy (CSP), CORS configuration, and HTTP security headers. Implements rate limiting, request validation, and basic authentication for admin endpoints with granular access controls.
HTTP/2 support with aggressive caching strategies, gzip compression, and static asset optimization. Implements sendfile optimization, connection pooling, and efficient buffer management for high-throughput scenarios.
- PocketBase Authentication: Dedicated auth.hino9.com domain with full API routing, WebSocket-enabled admin UI, and real-time administrative interfaces
- Zero-Downtime Deployments: Intelligent fallback system serving static branded pages during service outages, ensuring users never see error messages
- Multi-Container Orchestration: Coordinated deployment of nginx reverse proxy, dual Vue.js frontends, FastAPI backend, and authentication services
- Domain-Specific Security: Tailored CSP policies for different services (strict public, relaxed admin, specialized auth workflows)
- Production CI/CD Pipeline: GitHub Actions automation with DigitalOcean Container Registry, build caching, and environment-specific SSL certificate injection
Intelligent fallback system ensuring public site availability regardless of backend service status. When the Vue.js frontend (port 3001) is down, nginx automatically intercepts 502/503/504 errors and serves a static branded page with working logo, styling, and images served directly from nginx, providing a seamless user experience during deployments and maintenance.
graph TB
subgraph "Public Internet"
A[Client Requests]
B[SSL/TLS Traffic]
end
subgraph "Nginx Reverse Proxy"
C[Load Balancer]
D[SSL Termination]
E[Security Policies]
F[Caching Layer]
end
subgraph "Backend Services"
G[Admin Frontend :3000]
H[Public Frontend :3001]
I[FastAPI Backend :8000]
J[PocketBase Auth :8090]
K[Health Checks]
L[Static Assets]
end
subgraph "Domain Routing"
M[app.hino9.com]
N[hino9.com]
O[api.hino9.com]
P[auth.hino9.com]
end
A --> B
B --> D
D --> C
C --> E
E --> F
F --> M
F --> N
F --> O
F --> P
M --> G
N --> H
O --> I
P --> J
F --> K
F --> L
- Web Server: Nginx with HTTP/2 and SSL/TLS 1.3 support
- SSL Management: Let's Encrypt certificates with automated renewal
- Authentication: PocketBase integration with WebSocket support for real-time admin interfaces
- Security: CSP, CORS, HSTS, and comprehensive HTTP security headers
- Performance: Gzip compression, sendfile optimization, connection pooling
- Monitoring: Health check endpoints and structured access logging
- Deployment: Docker containerization with blue-green deployment strategy
- CI/CD: GitHub Actions automation with DigitalOcean integration
- Caching: Static asset caching with cache-busting for dynamic content
Production Lighthouse audit results demonstrating web performance optimization and security implementation:
| Metric | Score | Implementation |
|---|---|---|
| Overall | 93/100 | Combined performance score |
| Performance | 93/100 | HTTP/2, caching, compression optimization |
| Accessibility | 91/100 | Semantic HTML, ARIA implementation |
| Best Practices | 93/100 | Security headers, modern web standards |
| SEO | 100/100 | Meta tags, structured data, sitemap |
- Content Security Policy: Explicit domain allowlists preventing XSS attacks
- HTTP Strict Transport Security: 1-year max-age with subdomain protection
- Cross-Origin Opener Policy: Same-origin isolation preventing cross-origin attacks
- X-Frame-Options: SAMEORIGIN preventing clickjacking attacks
- SSL/TLS Configuration: Perfect forward secrecy with modern cipher suites
- HTTP/2 Protocol: Connection multiplexing and server push capabilities
- Static Asset Optimization: WebP image format with JPEG fallbacks
- Caching Strategy: Long-term static asset caching with HTML cache invalidation
- Compression: Gzip enabled for text-based assets reducing transfer size
- Critical Path Optimization: Non-blocking resource loading and render optimization
Metrics validated on production deployment at hino9.com
-
Multi-Service Routing: Path-based routing to frontend (dual admin/public), backend API, and health endpoints with upstream health monitoring.
-
Blue-Green Deployment: Zero-downtime deployment strategy with health check validation and automatic rollback capabilities for production reliability.
-
Intelligent Fallback: Proxy error interception with automatic static page serving during service outages, maintaining brand consistency and user experience.
-
Advanced CSP Implementation: Granular Content Security Policy restricting resource loading to trusted domains with nonce-based script execution.
-
CORS & Rate Limiting: Dynamic cross-origin resource sharing configuration with per-IP rate limiting and abuse protection mechanisms.
-
Intelligent Caching: Long-term caching for static assets with cache-busting for HTML, optimized for CDN integration and browser performance.
-
HTTP/2 & Compression: Modern protocol support with gzip compression for text-based assets and efficient connection multiplexing.
-
Modern Web Technologies: Custom MIME type handling for WebAssembly, progressive web apps, and optimized font delivery with WebP image support.
nginx/
├── prod/
│ ├── nginx.conf # Main server configuration with worker optimization
│ ├── ssl.conf # SSL/TLS settings and cipher configurations
│ ├── csp.conf # Content Security Policy definitions
│ ├── common.conf # Shared configurations for all server blocks
│ └── ssl-template.conf # Environment-based SSL certificate paths
├── src/ # Static assets and frontend content
│ ├── css/ # Responsive CSS with modern practices
│ ├── js/ # JavaScript entry points
│ ├── images/ # Optimized images (WebP + fallbacks)
│ └── config/ # PWA manifest and site configuration
└── Dockerfile # Multi-stage production build
- Modular Design: Separate configuration files for SSL, security policies, and common settings enabling easy maintenance and updates
- Environment Variables: Template-based configuration supporting multiple deployment environments with secure credential injection
- Health Check Integration: Built-in endpoints for monitoring and orchestration with comprehensive error handling
- Security Headers: Comprehensive HTTP security header implementation with HSTS, XSS protection, and content type validation
- Deployment: DigitalOcean hosting with automated GitHub Actions CI/CD pipeline
- Containerization: Docker multi-stage builds with Alpine Linux runtime and Supervisor process management
- Health Monitoring: Docker HEALTHCHECK endpoints validating both interface availability
- Build Optimization: Manual chunk splitting, vendor separation, Terser minification
- Environment Config: Build-time variable injection enabling multi-environment deployment
- Service Orchestration: Multi-container coordination with nginx reverse proxy, dual frontend builds, and microservices architecture
- Security Implementation: Runtime htpasswd generation, environment-based SSL certificate injection, and rate limiting with burst protection