Deployer Angular avec Docker

Pourquoi Deployer Angular avec Docker ?

Deployer une application Angular avec Docker offre plusieurs avantages pratiques :

1. Isolation et portabilité : Docker crée un environnement isolé pour votre application, ce qui permet d'assurer sa portabilité entre différents systèmes.

2. Facilité de déploiement : Avec Docker, le processus de déploiement devient standardisé et automatisable, réduisant les risques liés à l'environnement de développement.

3. Consistance : Tous les environnements utilisent la même image Docker, ce qui garantit une consistance entre le développement, le test et le déploiement.

4. Ressources optimisées : Docker permet d'optimiser l'utilisation des ressources en ne déployant que les composants nécessaires à votre application.

Un cas concret de déploiement Angular avec Docker est un site web interne pour une entreprise, qui doit être accessible sur plusieurs serveurs et nécessite un environnement homogène pour garantir la cohérence des fonctionnalités.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Node.js : Version >= 14.0.0
• npm (Node Package Manager) : Version >= 6.0.0
• Docker Desktop : Téléchargeable depuis docker.com
• Git : Pour cloner le projet de démarrage

Concepts fondamentaux

1. Dockerfile

Un Dockerfile est un fichier texte qui contient des instructions pour construire une image Docker.

## Définit l'image de base utilisée
FROM node:14

## Crée le répertoire de travail dans l'image
WORKDIR /app

## Copie les fichiers package.json et package-lock.json vers le répertoire de travail
COPY package*.json ./

## Installe les dépendances du projet
RUN npm install

## Copie tous les fichiers restants dans le répertoire de travail
COPY . .

## Expose le port sur lequel l'application va tourner
EXPOSE 4200

## Lance la commande pour démarrer l'application Angular
CMD ["ng", "serve", "--host=0.0.0.0"]

2. docker-compose.yml

docker-compose.yml est un fichier utilisé pour configurer et exécuter plusieurs conteneurs Docker.

version: '3'

services:
  web:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - .:/app
      - /app/node_modules

3. Image et Conteneur

• Image : Une image Docker est une version immuable de votre application, préparée pour être exécutée dans un conteneur.

• Conteneur : Un conteneur est une instance d'exécution d'une image Docker.

Mise en pratique : projet fil rouge

Nous allons créer un simple gestionnaire de tâches Angular et le déployer avec Docker. Voici les étapes :

Étape 1 : Initialiser le projet Angular

## Créez un nouveau projet Angular
ng new task-manager
cd task-manager

Étape 2 : Ajouter des fonctionnalités

Ajoutez une nouvelle page tasks avec un formulaire pour ajouter des tâches.

// src/app/tasks/tasks.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-tasks',
  template: `
    <div>
      <h2>Task Manager</h2>
      <form (ngSubmit)="addTask()">
        <input type="text" [(ngModel)]="newTask" name="task">
        <button type="submit">Add Task</button>
      </form>
      <ul>
        <li *ngFor="let task of tasks">task</li>
      </ul>
    </div>
  `
})
export class TasksComponent {
  newTask: string = '';
  tasks: string[] = [];

  addTask() {
    if (this.newTask.trim()) {
      this.tasks.push(this.newTask);
      this.newTask = '';
    }
  }
}

Ajoutez le chemin du composant au routeur.

// src/app/app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TasksComponent } from './tasks/tasks.component';

const routes: Routes = [
  { path: 'tasks', component: TasksComponent },
  { path: '', redirectTo: '/tasks', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Étape 3 : Créer le Dockerfile

Créez un Dockerfile à la racine de votre projet.

## Définit l'image de base utilisée
FROM node:14

## Crée le répertoire de travail dans l'image
WORKDIR /app

## Copie les fichiers package.json et package-lock.json vers le répertoire de travail
COPY package*.json ./

## Installe les dépendances du projet
RUN npm install

## Copie tous les fichiers restants dans le répertoire de travail
COPY . .

## Expose le port sur lequel l'application va tourner
EXPOSE 4200

## Lance la commande pour démarrer l'application Angular
CMD ["ng", "serve", "--host=0.0.0.0"]

Étape 4 : Créer docker-compose.yml

Créez un docker-compose.yml à la racine de votre projet.

version: '3'

services:
  web:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - .:/app
      - /app/node_modules

Étape 5 : Construire et exécuter le conteneur

## Construit l'image Docker
docker-compose build

## Exécute le conteneur
docker-compose up

Votre application Angular devrait maintenant être accessible à http://localhost:4200/tasks.

Erreurs frequentes et debugging

1. Port déjà utilisé

Erreur :

Error response from daemon: driver failed programming external connectivity on endpoint task-manager_web_1 (f7c9b8a3c2d6): Bind for 0.0.0.0:4200 failed: port is already allocated

Correction :

Assurez-vous que le port 4200 n'est pas déjà utilisé sur votre machine.

## Trouve les processus utilisant le port 4200
lsof -i :4200

## Arrêtez le processus si nécessaire
kill -9 <PID>

2. Dépendances non installées

Erreur :

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! task-manager@0.0.0 build: `ng build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed to compile.

Correction :

Assurez-vous que toutes les dépendances sont correctement installées.

## Reinstallez les dépendances
npm install

3. Configuration incorrecte de docker-compose.yml

Erreur :

ERROR: The Compose file './docker-compose.yml' is invalid because:
services.web.volumes contains an invalid type, it should be an array.

Correction :

Assurez-vous que la configuration est correctement écrite.

version: '3'

services:
  web:
    build: .
    ports:
      - "4200:4200"
    volumes:
      - .:/app
      - /app/node_modules

Pour aller plus loin

1. Utiliser Angular Universal : Apprenez à rendre votre application Angular server-side rendered pour une meilleure performance et SEO.

2. Intégrer des services tiers : Ajoutez des services tierces comme Auth0 ou Firebase pour gérer l'authentification et la base de données.

3. Optimiser le build : Améliorez les performances de votre application en optimisant le build avec Webpack ou Rollup.

Défi pratique

Créez un CLI tool Angular personnalisé qui permet de générer des composants, services et interfaces rapidement. Vous pouvez utiliser la commande ng generate pour créer ces éléments.