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

Tester votre déploiement Angular

Table des matières

Prérequis

Avant de commencer, assurez-vous d'avoir terminé ce qui suit :

Nouveau sur Kubernetes ?
Consultez le tutoriel sur les bases de Kubernetes pour vous familiariser avec le fonctionnement des clusters, des pods, des déploiements et des services.

Aperçu

Cette section vous guide dans le déploiement local de votre application Angular conteneurisée à l'aide de Kubernetes intégré à Docker Desktop. L'exécution de votre application dans un cluster Kubernetes local simule de près un véritable environnement de production, vous permettant de tester, de valider et de déboguer vos charges de travail en toute confiance avant de les promouvoir en pré-production ou en production.

Créer un fichier YAML Kubernetes

Suivez ces étapes pour définir votre configuration de déploiement :

  1. À la racine de votre projet, créez un nouveau fichier nommé : angular-sample-kubernetes.yaml

  2. Ouvrez le fichier dans votre IDE ou votre éditeur de texte préféré.

  3. Ajoutez la configuration suivante, et assurez-vous de remplacer {DOCKER_USERNAME} et {DOCKERHUB_PROJECT_NAME} par votre nom d'utilisateur Docker Hub et votre nom de dépôt réels de la section précédente Automatisez vos constructions avec GitHub Actions.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: angular-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: angular-sample
  template:
    metadata:
      labels:
        app: angular-sample
    spec:
      containers:
        - name: angular-container
          image: {DOCKER_USERNAME}/{DOCKERHUB_PROJECT_NAME}:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 8080
          resources:
            limits:
              cpu: "500m"
              memory: "256Mi"
            requests:
              cpu: "250m"
              memory: "128Mi"
---
apiVersion: v1
kind: Service
metadata:
  name: angular-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app: angular-sample
  ports:
    - port: 8080
      targetPort: 8080
      nodePort: 30001

Ce manifeste définit deux ressources Kubernetes clés, séparées par --- :

  • Déploiement Déploie une seule réplique de votre application Angular à l'intérieur d'un pod. Le pod utilise l'image Docker construite et poussée par votre flux de travail CI/CD GitHub Actions (reportez-vous à Automatisez vos constructions avec GitHub Actions). Le conteneur écoute sur le port 8080, qui est généralement utilisé par Nginx pour servir votre application Angular de production.

  • Service (NodePort) Expose le pod déployé sur votre machine locale. Il transfère le trafic du port 30001 de votre hôte vers le port 8080 à l'intérieur du conteneur. Cela vous permet d'accéder à l'application dans votre navigateur à l'adresse http://localhost:30001.

Note

Pour en savoir plus sur les objets Kubernetes, consultez la documentation Kubernetes.

Déployer et vérifier votre application

Suivez ces étapes pour déployer votre application Angular conteneurisée dans un cluster Kubernetes local et vérifier qu'elle fonctionne correctement.

Étape 1. Appliquer la configuration Kubernetes

Dans votre terminal, naviguez jusqu'au répertoire où se trouve votre fichier angular-sample-kubernetes.yaml, puis déployez les ressources à l'aide de :

  $ kubectl apply -f angular-sample-kubernetes.yaml

Si tout est correctement configuré, vous verrez une confirmation que le déploiement et le service ont été créés :

  deployment.apps/angular-sample created
  service/angular-sample-service created

Cela confirme que le déploiement et le service ont été créés avec succès et s'exécutent maintenant dans votre cluster local.

Étape 2. Vérifier l'état du déploiement

Exécutez la commande suivante pour vérifier l'état de votre déploiement :

  $ kubectl get deployments

Vous devriez voir une sortie similaire à ce qui suit :

  NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
  angular-sample       1/1     1            1           14s

Cela confirme que votre pod est opérationnel avec une réplique disponible.

Étape 3. Vérifier l'exposition du service

Vérifiez si le service NodePort expose votre application à votre machine locale :

$ kubectl get services

Vous devriez voir quelque chose comme :

NAME                     TYPE        CLUSTER-IP       EXTERNAL-IP   PORT(S)          AGE
angular-sample-service   NodePort    10.100.185.105    <none>        8080:30001/TCP   1m

Cette sortie confirme que votre application est disponible via NodePort sur le port 30001.

Étape 4. Accéder à votre application dans le navigateur

Ouvrez votre navigateur et naviguez jusqu'à http://localhost:30001.

Vous devriez voir votre application Angular Sample prête pour la production en cours d'exécution — servie par votre cluster Kubernetes local.

Étape 5. Nettoyer les ressources Kubernetes

Une fois les tests terminés, vous pouvez supprimer le déploiement et le service à l'aide de :

  $ kubectl delete -f angular-sample-kubernetes.yaml

Sortie attendue :

  deployment.apps "angular-sample" deleted
  service "angular-sample-service" deleted

Cela garantit que votre cluster reste propre et prêt pour le prochain déploiement.

Résumé

Dans cette section, vous avez appris à déployer votre application Angular sur un cluster Kubernetes local à l'aide de Docker Desktop. Cette configuration vous permet de tester et de déboguer votre application conteneurisée dans un environnement de type production avant de la déployer dans le cloud.

Ce que vous avez accompli :

  • Créé un déploiement Kubernetes et un service NodePort for votre application Angular
  • Utilisé kubectl apply pour déployer l'application localement
  • Vérifié que l'application s'exécutait et était accessible à http://localhost:30001
  • Nettoyé vos ressources Kubernetes après les tests

Ressources connexes

Explorez les références officielles et les meilleures pratiques pour affiner votre flux de travail de déploiement Kubernetes :