Skip to main content

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

Example docker-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
Ensure you build with the correct environment configuration for production. See the Environment Configuration page for details.

Health Checks

Add a health check to your Docker container:

Troubleshooting

Container Fails to Start

Check the logs:

Port Already in Use

If port 80 is already in use, map to a different port:

Build Fails

Ensure you have enough disk space and memory allocated to Docker: