Partager via

Tutoriel : Créer une application conteneur avec Visual Studio Code

Ce tutoriel est le début d’une série en quatre parties qui introduit Docker à utiliser avec Visual Studio Code (VS Code). Vous allez apprendre à créer et exécuter des conteneurs Docker, conserver des donnéeset gérer plusieurs conteneurs avec Docker Compose.

VS Code offre une extension Container Tools qui vous permet d’utiliser un service Docker Desktop local. Docker Desktop s’exécute sur votre ordinateur et gère vos conteneurs locaux, qui sont des environnements virtualisés compacts qui fournissent une plateforme pour la création et l’exécution d’applications. Les conteneurs ne nécessitent pas la taille et la surcharge d’un système d’exploitation complet.

Dans ce premier tutoriel, vous allez apprendre à :

  • Créez un conteneur Docker.
  • Générez une image conteneur.
  • Démarrez un conteneur d’application.

Conditions préalables

Le tutoriel fonctionne avec Windows 10 ou version ultérieure et Docker Desktop configuré pour utiliser des conteneurs Linux.

Créer un conteneur

Un conteneur est un processus sur votre ordinateur. Il est isolé de tous les autres processus sur l’ordinateur hôte. Cette isolation utilise des espaces de noms de noyau et des groupes de contrôle.

Un conteneur utilise un système de fichiers isolé. Ce système de fichiers personnalisé est fourni par une image conteneur. L’image contient tout ce qui est nécessaire pour exécuter une application, comme toutes les dépendances, la configuration, les scripts et les fichiers binaires. L’image contient également d’autres configurations pour le conteneur, telles que les variables d’environnement, une commande par défaut à exécuter et d’autres métadonnées.

Après avoir installé l’extension Container Tools pour VS Code, vous pouvez utiliser des conteneurs dans VS Code. Outre les menus contextuels dans l’Explorateur de conteneurs, vous pouvez sélectionner Terminal>New Terminal pour ouvrir une fenêtre de ligne de commande. Vous pouvez également exécuter des commandes dans une fenêtre Bash. Sauf indication contraire, toute commande étiquetée comme Bash peut s’exécuter dans une fenêtre Bash ou dans le terminal VS Code.

  1. Définissez Docker en mode conteneur Linux. Pour basculer vers des conteneurs Linux si vous êtes actuellement défini sur des conteneurs Windows, cliquez avec le bouton droit sur l’icône Docker dans la barre d’état système pendant l’exécution de Docker Desktop, puis choisissez Basculer vers des conteneurs Linux.

  2. Dans VS Code, sélectionnez Terminal>Nouveau terminal.

  3. Dans la fenêtre de terminal ou une fenêtre Bash, exécutez cette commande.

    docker run -d -p 80:80 docker/getting-started

    Cette commande contient les paramètres suivants :

    • -d Exécuter le conteneur en mode détaché, en arrière-plan.
    • -p 80:80 : mappe le port 80 de l’hôte au port 80 dans le conteneur.
    • docker/getting-started Spécifie l’image à utiliser.

    Conseil

    Vous pouvez combiner des indicateurs de caractères uniques pour raccourcir la commande complète. Par exemple, la commande ci-dessus peut être écrite comme suit :

    docker run -dp 80:80 docker/getting-started

  4. Dans VS Code, sélectionnez l’icône Conteneurs sur la gauche pour afficher l’Explorateur de conteneurs.

    Capture d’écran montrant l’extension Container Tools avec le didacticiel docker/getting-started en cours d’exécution.

    L’extension VS Code Container Tools vous montre les conteneurs en cours d’exécution sur votre ordinateur. Vous pouvez accéder aux journaux de conteneur et gérer le cycle de vie des conteneurs, par exemple arrêter et supprimer.

    Le nom du conteneur, modest_shockley dans cet exemple, est créé de façon aléatoire. Le vôtre aura un nom différent.

  5. Cliquez avec le bouton droit sur docker/prise en main pour ouvrir un menu contextuel. Sélectionnez Ouvrir dans le navigateur.

    Au lieu de cela, ouvrez un navigateur et entrez http://localhost/tutorial/.

    Vous verrez une page hébergée localement sur DockerLabs.

  6. Cliquez avec le bouton droit sur docker/prise en main pour ouvrir un menu contextuel. Sélectionnez Supprimer pour supprimer ce conteneur.

    Pour supprimer un conteneur à l’aide de la ligne de commande, exécutez cette commande pour obtenir son ID de conteneur :

    docker ps

    Ensuite, arrêtez et supprimez le conteneur :

    docker stop <container-id>
docker rm <container-id>

  7. Actualisez votre navigateur. La page Prise en main que vous avez vue il y a un instant est partie.

Créer une image conteneur pour l’application

Ce didacticiel utilise une application Todo simple.

Capture d’écran montrant l’exemple d’application avec plusieurs éléments ajoutés et une zone de texte et un bouton pour ajouter de nouveaux éléments.

L’application vous permet de créer des éléments de travail et de les marquer comme terminés ou supprimés.

Pour générer l’application, créez un fichier Dockerfile. Un fichier Dockerfile est un script textuel d’instructions qui est utilisé pour créer une image conteneur.

  1. Accédez au dépôt du didacticiel de démarrage Docker , puis sélectionnez Code>Télécharger ZIP. Extrayez le contenu dans un dossier local.

    Capture d’écran montrant une partie du site GitHub, avec le bouton Code vert et l’option Télécharger zip mise en surbrillance.

  2. Dans VS Code, sélectionnez Fichier>Ouvrir le dossier. Accédez au dossier de l’application dans le projet extrait et ouvrez ce dossier. Vous devez voir un fichier appelé package.json et deux dossiers appelés src et spécification.

    Capture d’écran de Visual Studio Code montrant le fichier package.json ouvert avec l’application chargée.

  3. Créez un fichier nommé fichier Dockerfile dans le même dossier que le fichier package.json avec le contenu suivant.

    FROM node:lts-alpine
RUN apk add --no-cache python3 g++ make
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]

    Remarque

    Assurez-vous que le fichier n’a pas d’extension de fichier comme .txt.

  4. Dans l’Explorateur de fichiers, à gauche de VS Code, cliquez avec le bouton droit sur le Dockerfile, puis sélectionnez Générer une image. Entrez getting-started comme balise de l’image dans la zone de saisie de texte.

    La balise est un nom convivial pour l’image.

    Pour créer une image conteneur à partir de la ligne de commande, utilisez la commande suivante à partir du dossier app qui contient le dockerfile.

    docker build -t getting-started .

Vous avez utilisé le fichier Dockerfile pour générer une nouvelle image conteneur. Vous avez peut-être remarqué que de nombreuses « couches » ont été téléchargées. Le fichier Dockerfile démarre à partir de l’image node:lts-alpine. Sauf si cette image était déjà sur votre ordinateur, cette image devait être téléchargée.

Une fois l’image téléchargée, la Dockerfile copie votre application et utilise yarn pour installer les dépendances de votre application. La valeur CMD dans le fichier Dockerfile spécifie la commande par défaut à exécuter lors du démarrage d’un conteneur à partir de cette image.

La . à la fin de la commande docker build indique que Docker doit rechercher le dockerfile dans le répertoire actif.

Démarrer votre conteneur d’application

Maintenant que vous avez une image, vous pouvez exécuter l’application.

  1. Pour démarrer votre conteneur, utilisez la commande suivante.

    docker run -dp 3000:3000 getting-started

    Le paramètre -d indique que vous exécutez le conteneur en mode détaché, en arrière-plan. La valeur -p crée un mappage entre le port hôte 3000 et le port de conteneur 3000. Sans le mappage de port, vous ne pourrez pas accéder à l’application.

  2. Après quelques secondes, dans VS Code, dans l’Explorateur de conteneurs, sous CONTENEURS, cliquez avec le bouton droit sur Prise en main et sélectionnez Ouvrir dans le navigateur. Vous pouvez également ouvrir votre navigateur web sur http://localhost:3000.

    Vous devriez voir l’application s’exécuter.

    Capture d’écran montrant l’exemple d’application sans éléments et le texte 'Pas encore d’éléments Ajoutez-en un' ci-dessus.

  3. Ajoutez un élément ou deux pour tester s’il fonctionne comme prévu. Vous pouvez marquer les éléments comme étant complets et supprimer des éléments. Votre front-end stocke correctement les éléments dans le back-end.

Étapes suivantes

Vous avez terminé ce tutoriel et vous disposez d’un gestionnaire de listes todo en cours d’exécution avec quelques éléments. Vous avez appris à créer des images conteneur et à exécuter une application conteneurisée.

Gardez tout ce que vous avez fait jusqu’à présent pour poursuivre cette série de tutoriels. Ensuite, essayez la deuxième partie de cette série :

Mettre à jour et partager une application conteneur

Voici quelques ressources qui peuvent vous être utiles :