⚠️ Traduction non officielle - Cette documentation est une traduction communautaire non officielle de Docker.

Utiliser des conteneurs pour le développement Angular

Table des matières

Prérequis

Terminez Conteneuriser une application Angular.

Aperçu

Dans cette section, vous apprendrez à configurer des environnements de production et de développement pour votre application Angular conteneurisée à l'aide de Docker Compose. Cette configuration vous permet de servir une construction de production statique via Nginx et de développer efficacement à l'intérieur de conteneurs en utilisant un serveur de développement avec rechargement en direct avec Compose Watch.

Vous apprendrez à :

  • Configurer des conteneurs distincts pour la production et le développement
  • Activer la synchronisation automatique des fichiers en utilisant Compose Watch en développement
  • Déboguer et prévisualiser en direct vos modifications en temps réel sans reconstruction manuelle

Mettre à jour automatiquement les services (Mode Développement)

Utilisez Compose Watch pour synchroniser automatiquement les modifications des fichiers sources dans votre environnement de développement conteneurisé. Cela offre une expérience de développement transparente et efficace sans redémarrer ou reconstruire manuellement les conteneurs.

Étape 1 : Créer un Dockerfile de développement

Créez un fichier nommé Dockerfile.dev à la racine de votre projet avec le contenu suivant :

# =========================================
# Étape 1 : Développement - Application Angular
# =========================================

# Définir la version de Node.js à utiliser (Alpine pour une faible empreinte)
ARG NODE_VERSION=22.14.0-alpine

# Définir l'image de base pour le développement
FROM node:${NODE_VERSION} AS dev

# Définir la variable d'environnement pour indiquer le mode de développement
ENV NODE_ENV=development

# Définir le répertoire de travail à l'intérieur du conteneur
WORKDIR /app

# Copier uniquement les fichiers de dépendances en premier pour optimiser la mise en cache de Docker
COPY package.json package-lock.json ./

# Installer les dépendances en utilisant npm avec mise en cache pour accélérer les constructions ultérieures
RUN --mount=type=cache,target=/root/.npm npm ci

# Copier tous les fichiers sources de l'application dans le conteneur
COPY . .

# Exposer le port qu'Angular utilise pour le serveur de développement (par défaut 4200)
EXPOSE 4200

# Démarrer le serveur de développement Angular et le lier à toutes les interfaces réseau
CMD ["npm", "start", "--", "--host=0.0.0.0"]

Ce fichier met en place un environnement de développement léger pour votre application Angular en utilisant le serveur de développement.

Étape 2 : Mettre à jour votre fichier compose.yaml

Ouvrez votre fichier compose.yaml et définissez deux services : un pour la production (angular-prod) et un pour le développement (angular-dev).

Voici un exemple de configuration pour une application Angular :

services:
  angular-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-angular-sample
    ports:
      - "8080:8080"

  angular-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "4200:4200"
    develop:
      watch:
        - action: sync
          path: .
          target: /app
  • Le service angular-prod construit et sert votre application de production statique en utilisant Nginx.
  • Le service angular-dev exécute votre serveur de développement Angular avec rechargement en direct et remplacement de module à chaud.
  • watch déclenche la synchronisation des fichiers avec Compose Watch.
Note

Pour plus de détails, consultez le guide officiel : Utiliser Compose Watch.

Après avoir terminé les étapes précédentes, le répertoire de votre projet devrait maintenant contenir les fichiers suivants :

├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

Étape 4 : Démarrer Compose Watch

Exécutez la commande suivante depuis la racine du projet pour démarrer le conteneur en mode surveillance

$ docker compose watch angular-dev

Étape 5 : Tester Compose Watch avec Angular

Pour vérifier que Compose Watch fonctionne correctement :

  1. Ouvrez le fichier src/app/app.component.html dans votre éditeur de texte.

  2. Localisez la ligne suivante :

    <h1>Docker Angular Sample Application</h1>

  3. Modifiez-la en :

    <h1>Bonjour depuis Docker Compose Watch</h1>

  4. Enregistrez le fichier.

  5. Ouvrez votre navigateur à l'adresse http://localhost:4200.

Vous devriez voir le texte mis à jour apparaître instantanément, sans avoir besoin de reconstruire manuellement le conteneur. Cela confirme que la surveillance des fichiers et la synchronisation automatique fonctionnent comme prévu.

Résumé

Dans cette section, vous avez mis en place un flux de travail de développement et de production complet pour votre application Angular en utilisant Docker et Docker Compose.

Voici ce que vous avez accompli :

  • Créé un Dockerfile.dev pour rationaliser le développement local avec rechargement à chaud
  • Défini des services angular-dev et angular-prod distincts dans votre fichier compose.yaml
  • Activé la synchronisation des fichiers en temps réel en utilisant Compose Watch pour une expérience de développement plus fluide
  • Vérifié que les mises à jour en direct fonctionnent de manière transparente en modifiant et en prévisualisant un composant

Avec cette configuration, vous êtes maintenant équipé pour construire, exécuter et itérer sur votre application Angular entièrement à l'intérieur de conteneurs, de manière efficace et cohérente dans tous les environnements.

Ressources connexes

Approfondissez vos connaissances et améliorez votre flux de travail de développement conteneurisé avec ces guides :

Prochaines étapes

Dans la section suivante, vous apprendrez à exécuter des tests unitaires pour votre application Angular à l'intérieur de conteneurs Docker. Cela garantit des tests cohérents dans tous les environnements et élimine les dépendances à la configuration de la machine locale.

Exécuter les tests Angular dans un conteneur »