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

Testez votre déploiement React.js

Table des matières

Prérequis

Avant de commencer, assurez-vous d'avoir terminé les étapes suivantes :

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

Aperçu

Cette section vous guide dans le déploiement local de votre application React.js conteneurisée en utilisant le Kubernetes intégré de Docker Desktop. Exécuter votre application dans un cluster Kubernetes local vous permet de simuler de près un environnement de production réel, vous permettant de tester, valider et déboguer vos charges de travail avec 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é : reactjs-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 le nom de votre dépôt réels de la section précédente Automatisez vos constructions avec GitHub Actions.

apiVersion: apps/v1
kind: Deployment
metadata:
  name: reactjs-sample
  namespace: default
spec:
  replicas: 1
  selector:
    matchLabels:
      app: reactjs-sample
  template:
    metadata:
      labels:
        app: reactjs-sample
    spec:
      containers:
        - name: reactjs-container
          image: {DOCKER_USERNAME}/{DOCKERHUB_PROJECT_NAME}:latest
          imagePullPolicy: Always
          ports:
            - containerPort: 8080
---
apiVersion: v1
kind: Service
metadata:
  name:  reactjs-sample-service
  namespace: default
spec:
  type: NodePort
  selector:
    app:  reactjs-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 React.js à 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 (référez-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 React de production.

  • Service (NodePort) Expose le pod déployé à votre machine locale. Il redirige le trafic du port 30001 sur 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 React.js conteneurisée dans un cluster Kubernetes local et vérifier qu'elle fonctionne correctement.

Étape 1. Appliquer la configuration Kubernetes

Dans votre terminal, naviguez vers le répertoire où se trouve votre fichier reactjs-sample-kubernetes.yaml, puis déployez les ressources en utilisant :

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

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

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

Cette sortie signifie 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 à :

  NAME                 READY   UP-TO-DATE   AVAILABLE   AGE
  reactjs-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
reactjs-sample-service   NodePort    10.100.244.65    <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 vers http://localhost:30001.

Vous devriez voir votre application React.js 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 en utilisant :

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

Sortie attendue :

  deployment.apps "reactjs-sample" deleted
  service "reactjs-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 React.js sur un cluster Kubernetes local en utilisant Docker Desktop. Cette configuration vous permet de tester et de déboguer votre application conteneurisée dans un environnement similaire à la production avant de la déployer dans le cloud.

Ce que vous avez accompli :

  • Créé un Déploiement Kubernetes et un Service NodePort pour votre application React.js
  • Utilisé kubectl apply pour déployer l'application localement
  • Vérifié que l'application fonctionnait et était accessible à http://localhost:30001
  • Nettoyé vos ressources Kubernetes après les tests

Ressources associées

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