Dockeriser une application NestJs / Angular

Introduction

Dans cet article, je vais t’expliquer comment Dockeriser une application NestJS pour le backend avec PostgreSQL, ainsi qu’Angular pour le frontend.

J’utilise Docker pour gérer mon environnement, et je déploie généralement mes applications sur un VPS. Cette solution est idéale pour moi, car mon trafic est modéré, et cela me revient peu cher.

Architecture du projet

Je crée mon application NestJS et Angular dans un même dossier, et j’initialise un dépôt Git dessus pour gérer toute l’application dans un mono-repo. Dans le dossier .github, on retrouve une action GitHub qui permet de déployer l’application sur le VPS lorsque des modifications sont poussées sur la branche main. Le fichier docker-compose.yml permet de créer les conteneurs pour le frontend et le backend.

Dockerfile Angular

Le Dockerfile du frontend se trouve à la racine du dossier Angular. Nous l’appellerons plus tard dans le fichier docker-compose.yml pour créer les conteneurs.

FROM node:18-alpine AS build

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build --prod

FROM nginx:stable
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

COPY --from=build /app/dist/easy-inventory-front/browser/ /usr/share/nginx/html

# Expose port 80
EXPOSE 80

1. FROM node:18-alpine AS build : Utilise une image légère de Node.js pour construire l’application.
2. WORKDIR /app : Définit le dossier de travail dans le conteneur.
3. COPY package*.json ./ : Copie les fichiers package.json pour préparer l’installation des dépendances.
4. RUN npm install : Installe les dépendances Node.js.
5. COPY . . : Copie tout le code source de l’application dans le conteneur.
6. RUN npm run build --prod : Construit l’application Angular en mode production (fichiers optimisés).
7. FROM nginx:stable : Utilise Nginx comme serveur pour servir les fichiers générés.
8. COPY ./nginx.conf /etc/nginx/conf.d/default.conf : Copie la configuration personnalisée de Nginx.
9. COPY --from=build /app/dist/easy-inventory-front/browser/ /usr/share/nginx/html : Copie les fichiers buildés dans le répertoire par défaut de Nginx.
10. EXPOSE 80 : Expose le port 80 pour que l’application soit accessible.
    
    Ajoute à la racine du projet frontend une configuration personnalisée de Nginx, qui permet de gérer le routage et de résoudre le problème des erreurs 404 sur Angular.

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

Dockerfile NestJS

Le Dockerfile pour NestJS est placé à la racine du répertoire api (application NestJS). Nous l’utiliserons également dans le fichier docker-compose.yml.

FROM node:18-alpine

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "run", "start:prod"]

1. FROM node:18-alpine : Utilise une image légère de Node.js basée sur Alpine Linux pour minimiser la taille de l’image Docker.
2. WORKDIR /usr/src/app : Définit le répertoire de travail dans le conteneur où le code sera placé.
3. COPY package*.json ./ : Copie les fichiers package.json et package-lock.json pour installer les dépendances de l’application.
4. RUN npm install : Installe toutes les dépendances nécessaires via npm.
5. COPY . . : Copie tout le code source de l’application dans le conteneur.
6. RUN npm run build : Compile l’application NestJS pour la production.
7. EXPOSE 3000 : Expose le port 3000 sur lequel l’application NestJS écoutera.
8. CMD ["npm", "run", "start:prod"] : Démarre l’application en mode production.

Docker-compose

Après avoir créé les Dockerfiles pour Angular et NestJS, il est temps de configurer le fichier docker-compose.yml, qui permet de lancer les conteneurs et de mettre en place PostgreSQL comme base de données.

Voici à quoi ressemble le fichier :

version: '3.8'

services:
  postgres:
    image: postgres:14
    container_name: my_postgres
    env_file:
      - .env
    ports:
      - "5432:5432"
    volumes:
      - pgdata:/var/lib/postgresql/data

  api:
    build:
      context: ./api
      dockerfile: dockerfile
    ports:
      - "3000:3000"
    env_file:
      - .env
    depends_on:
      - postgres

  front:
    build:
      context: ./front
      dockerfile: dockerfile
    ports:
      - "4200:80"

volumes:
  pgdata:

1. version: '3.8' : Utilise la version 3.8 de Docker Compose.

Service postgres :

2. image: postgres:14 : Utilise PostgreSQL version 14.
3. container_name: my_postgres : Nom du conteneur PostgreSQL.
4. env_file: - .env : Charge les variables d’environnement depuis .env.
5. ports: - "5432:5432" : Expose le port 5432.
6. volumes: - pgdata:/var/lib/postgresql/data : Monte un volume pour stocker les données de la base.

Service api :

7. build: context: ./api : Construit l’API depuis le dossier ./api.
8. ports: - "3000:3000" : Expose le port 3000 pour l’API.
9. env_file: - .env : Utilise les variables d’environnement du fichier .env.
10. depends_on: - postgres : L’API attend que PostgreSQL soit prêt.

Service front :

11. build: context: ./front : Construit le front-end depuis ./front.
12. ports: - "4200:80" : Expose le port 4200 pour le front-end (serveur Nginx).

Volumes :

13. volumes: pgdata: : Déclare un volume pour persister les données de PostgreSQL.

Pour faire fonctionner tout cela en local, crée un fichier .env à la racine du projet avec les variables d’environnement pour PostgreSQL :

POSTGRES_USER=postgres
POSTGRES_PASSWORD=postgres
POSTGRES_DB=dev

Ensuite, lance la commande suivante pour tester le tout :

docker-compose build -d

Conclusion

Et voilà le tour est jouer, maintenant tu sais comment dockeriser NestJS avec Angular.

Voilà, tu sais maintenant comment dockeriser une application NestJS avec Angular. Pour aller plus loin et mettre en production ton application, je te conseille de lire Déployer mon application NestJS/Angular sur un VPS avec Docker et GitHub.