Angular 17 et Docker : un détail important pour le déploiement

Avec la sortie d'Angular 17 en novembre dernier, le monde du développement front-end a franchi une nouvelle étape en termes d'efficacité et de performance. Angular, le framework populaire de Google pour la construction d'applications web dynamiques, continue d'évoluer, offrant de nouvelles fonctionnalités et améliorations. Mais comme pour la plupart des évolutions de framework, des petits changements sont nécessaires pour déployer une app.

.

Configuration avec Docker

Docker, la plateforme de conteneurisation populaire, permet de créer, déployer et gérer des applications dans des environnements isolés appelés conteneurs. Pour Angular 17, Docker offre une méthode flexible et efficace pour le déploiement. Pour le fichier docker-compose.yml, pas vraiment de changements : 

version: "3.8"

services:
  db:
    image: postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data
    environment:
      POSTGRES_DB: ${DB_NAME}
      POSTGRES_USER: ${DB_USER}
      POSTGRES_PASSWORD: ${DB_PASSWORD}
    env_file: .env
    ports:
      - "5435:5432"

  backend:
    build:
      context: . # Répertoire racine mon_app/
      dockerfile: ./mon_appDjango/Dockerfile

    command: python mon_appDjango/manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    env_file: .env
    ports:
      - "8002:8000"
    environment:
      - DEBUG=${DEBUG}
      - SECRET_KEY=${SECRET_KEY}
      - DB_NAME=${DB_NAME}
      - DB_USER=${DB_USER}
      - DB_PASS=${DB_PASSWORD}
      - DB_HOST=${DB_HOST}
      - DB_PORT=${DB_PORT}
    depends_on:
      - db
  frontend:
    build: ./frontend
    ports:
      - "82:80"
    depends_on:
      - backend

  nginx:
    image: nginx:alpine
    ports:
      - "8080:80"
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on:
      - frontend

volumes:
  postgres_data:

Par contre, au niveau du dockerfile situé dans le dossier frontend, il y a un petit changement important : 

# Utiliser une image Node officielle comme base
FROM node:latest as node
RUN mkdir app 
# Définir le répertoire de travail dans le conteneur
WORKDIR /app

# Copier les fichiers package.json et installer les dépendances
COPY package*.json /app/
RUN npm install

# Copier le reste du code source de l'application dans le conteneur
COPY . .
# Construire l'application
RUN npm run build

# Utiliser NGINX pour servir l'application
FROM nginx:latest
COPY --from=node /app/dist/frontend/browser /usr/share/nginx/html

# Copier les fichiers de build vers NGINX
COPY nginx.conf /etc/nginx/nginx.conf
# RUN rm -rf /usr/share/nginx/html/*


# Exposer le port 80
EXPOSE 80

 

En effet, le dossier de l'app Angular est dans browser

Ainsi pour copier dans le serveur, il faut changer cette ligne : 

COPY --from=node /app/dist/frontend/browser /usr/share/nginx/html

 

L'intégration d'Angular 17 avec Docker et Nginx représente une approche robuste et flexible pour le déploiement d'applications web modernes. Avec Angular 17, les développeurs bénéficient de performances améliorées, d'une meilleure intégration avec les outils modernes et de nouvelles fonctionnalités qui continuent de pousser le développement web vers de nouveaux horizons.