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

Développer avec des conteneurs

Table des matières

Explication

Maintenant que vous avez Docker Desktop installé, vous êtes prêt à faire du développement d'application. Spécifiquement, vous ferez ce qui suit :

  1. Cloner et démarrer un projet de développement
  2. Apporter des changements au backend et au frontend
  3. Voir les changements immédiatement

Essayez-le

Dans ce guide pratique, vous apprendrez comment développer avec des conteneurs.

Démarrer le projet

  1. Pour commencer, soit clonez ou téléchargez le projet comme fichier ZIP sur votre machine locale.

    $ git clone https://github.com/docker/getting-started-todo-app

    Et après que le projet soit cloné, naviguez dans le nouveau répertoire créé par le clone :

    $ cd getting-started-todo-app

  2. Une fois que vous avez le projet, démarrez l'environnement de développement en utilisant Docker Compose.

    Pour démarrer le projet en utilisant la CLI, exécutez la commande suivante :

    $ docker compose watch

    Vous verrez une sortie qui montre les images de conteneurs étant téléchargées, les conteneurs qui démarrent, et plus. Ne vous inquiétez pas si vous ne comprenez pas tout à ce stade. Mais, dans un moment ou deux, les choses devraient se stabiliser et se terminer.

  3. Ouvrez votre navigateur à http://localhost pour voir l'application en cours d'exécution. Cela peut prendre quelques minutes pour que l'app s'exécute. L'app est une simple application de liste de tâches, alors n'hésitez pas à ajouter un élément ou deux, marquer certains comme terminés, ou même supprimer un élément.

    Capture d'écran de l'app de liste de tâches de démarrage après son premier lancement

Qu'y a-t-il dans l'environnement ?

Maintenant que l'environnement est en cours d'exécution, qu'y a-t-il réellement dedans ? À un niveau élevé, il y a plusieurs conteneurs (ou processus) qui servent chacun un besoin spécifique pour l'application :

  • Frontend React - un conteneur Node qui exécute le serveur de développement React, en utilisant Vite.
  • Backend Node - le backend fournit une API qui donne la capacité de récupérer, créer et supprimer des éléments de liste de tâches.
  • Base de données MySQL - une base de données pour stocker la liste des éléments.
  • phpMyAdmin - une interface web pour interagir avec la base de données qui est accessible à http://db.localhost.
  • Proxy Traefik - Traefik est un proxy d'application qui route les requêtes vers le bon service. Il envoie toutes les requêtes pour localhost/api/* au backend, les requêtes pour localhost/* au frontend, et puis les requêtes pour db.localhost à phpMyAdmin. Cela fournit la capacité d'accéder à toutes les applications en utilisant le port 80 (au lieu de ports différents pour chaque service).

Avec cet environnement, vous en tant que développeur n'avez pas besoin d'installer ou configurer des services, peupler un schéma de base de données, configurer des identifiants de base de données, ou quoi que ce soit. Vous avez seulement besoin de Docker Desktop. Le reste fonctionne simplement.

Apporter des changements à l'app

Avec cet environnement en cours d'exécution, vous êtes prêt à apporter quelques changements à l'application et voir comment Docker aide à fournir une boucle de rétroaction rapide.

Changer le salut

Le salut en haut de la page est peuplé par un appel API à /api/greeting. Actuellement, il retourne toujours "Hello world!". Vous allez maintenant le modifier pour retourner un de trois messages aléatoires (que vous allez choisir).

  1. Ouvrez le fichier backend/src/routes/getGreeting.js dans un éditeur de texte. Ce fichier fournit le gestionnaire pour le point de terminaison API.

  2. Modifiez la variable en haut vers un tableau de saluts. N'hésitez pas à utiliser les modifications suivantes ou les personnaliser selon vos goûts. Aussi, mettez à jour le point de terminaison pour envoyer un salut aléatoire de cette liste.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    const GREETINGS = [
    "Whalecome!",
    "All hands on deck!",
    "Charting the course ahead!",
];

module.exports = async (req, res) => {
    res.send({
        greeting: GREETINGS[ Math.floor( Math.random() * GREETINGS.length )],
    });
};

  3. Si vous ne l'avez pas encore fait, sauvegardez le fichier. Si vous actualisez votre navigateur, vous devriez voir un nouveau salut. Si vous continuez à actualiser, vous devriez voir tous les messages apparaître.

    Capture d'écran de l'app de liste de tâches avec un nouveau salut

Changer le texte de placeholder

Quand vous regardez l'app, vous verrez que le texte de placeholder est simplement "New Item". Vous allez maintenant le rendre un peu plus descriptif et amusant. Vous apporterez aussi quelques changements au style de l'app également.

  1. Ouvrez le fichier client/src/components/AddNewItemForm.jsx. Cela fournit le composant pour ajouter un nouvel élément à la liste de tâches.

  2. Modifiez l'attribut placeholder de l'élément Form.Control vers ce que vous souhaitez afficher.

    33
34
35
36
37
38
39

    <Form.Control
    value={newItem}
    onChange={(e) => setNewItem(e.target.value)}
    type="text"
    placeholder="Que devez-vous faire ?"
    aria-label="New item"
/>

  3. Sauvegardez le fichier et retournez à votre navigateur. Vous devriez voir le changement déjà rechargé à chaud dans votre navigateur. Si vous n'aimez pas, n'hésitez pas à l'ajuster jusqu'à ce qu'il soit parfait.

Capture d'écran de l'app de liste de tâches avec un placeholder mis à jour dans le champ de texte d'ajout d'élément

Changer la couleur d'arrière-plan

Avant de considérer l'application finalisée, vous devez améliorer les couleurs.

  1. Ouvrez le fichier client/src/index.scss.

  2. Ajustez l'attribut background-color vers n'importe quelle couleur que vous aimez. L'extrait fourni est un bleu doux pour aller avec le thème nautique de Docker.

    Si vous utilisez un IDE, vous pouvez choisir une couleur en utilisant les sélecteurs de couleur intégrés. Sinon, n'hésitez pas à utiliser un Sélecteur de couleur en ligne.

    3
4
5
6
7

    body {
    background-color: #99bbff;
    margin-top: 50px;
    font-family: 'Lato';
}

    Chaque sauvegarde devrait vous permettre de voir le changement immédiatement dans le navigateur. Continuez à l'ajuster jusqu'à ce que ce soit la configuration parfaite pour vous.

    Capture d'écran de l'app de liste de tâches avec un nouveau placeholder et une couleur d'arrière-plan

Et avec cela, vous avez terminé. Félicitations pour avoir mis à jour votre site web.

Récapitulatif

Avant de continuer, prenez un moment et réfléchissez à ce qui s'est passé ici. En quelques moments, vous avez pu :

  • Démarrer un projet de développement complet avec zéro effort d'installation. L'environnement conteneurisé a fourni l'environnement de développement, s'assurant que vous avez tout ce dont vous avez besoin. Vous n'avez pas eu à installer Node, MySQL, ou aucune des autres dépendances directement sur votre machine. Tout ce dont vous aviez besoin était Docker Desktop et un éditeur de code.

  • Apporter des changements et les voir immédiatement. Cela a été rendu possible parce que 1) les processus en cours d'exécution dans chaque conteneur surveillent et répondent aux changements de fichiers et 2) les fichiers sont partagés avec l'environnement conteneurisé.

Docker Desktop permet tout cela et bien plus encore. Une fois que vous commencez à penser avec les conteneurs, vous pouvez créer presque n'importe quel environnement et le partager facilement avec votre équipe.

Étapes suivantes

Maintenant que l'application a été mise à jour, vous êtes prêt à apprendre à la packager comme image de conteneur et la pousser vers un registre, spécifiquement Docker Hub.

Construire et pousser votre première image