Overview
The Biblioteca Virtual Frontend uses a multi-stage Docker build to create an optimized production image. The build process compiles the Angular application and serves it using Nginx.Dockerfile Structure
The Dockerfile consists of two stages:1
Stage 1: Build Angular Application
Uses Node.js 20 Alpine to compile the Angular application with production optimizations.
2
Stage 2: Nginx Web Server
Uses Nginx Alpine to serve the compiled static files with minimal overhead.
Complete Dockerfile
Nginx Configuration
The application uses a custom Nginx configuration to support Angular’s client-side routing:The
try_files directive ensures that all routes are handled by Angular’s router, enabling client-side navigation to work correctly.Building the Docker Image
Local Build
Build the Docker image locally:Build with Custom Tag
Running the Container
Basic Run
Start the container on port 80:Custom Port Mapping
Run on a different port (e.g., 8080):With Custom Name
Docker Compose
Exampledocker-compose.yml for the frontend:
Production Optimization
The multi-stage build provides several benefits:- Smaller Image Size: Only the compiled application and Nginx are included in the final image
- Security: No build tools or source code in production image
- Performance: Nginx serves static files efficiently
- Caching: Dependencies are cached in separate layer for faster rebuilds