Partager via

Tutoriel : Partager une application conteneur avec Visual Studio Code

Ce tutoriel fait partie deux d’une série en quatre parties qui présente Docker à utiliser avec Visual Studio Code (VS Code).

Dans ce tutoriel, vous allez apprendre à :

  • Mettez à jour le code et remplacez le conteneur.
  • Partagez votre image.
  • Exécutez l’image sur une nouvelle instance.

Conditions préalables

Ce tutoriel poursuit le didacticiel précédent, Créer une application conteneur avec Visual Studio Code. Pour continuer ici, vous aurez besoin du gestionnaire de listes "todo" opérationnel de la partie 1.

Mettre à jour le code et remplacer le conteneur

Nous allons apporter quelques modifications et en savoir plus sur la gestion de vos conteneurs.

  1. Dans le fichier, mettez à jour la src/static/js/app.js ligne 56 pour utiliser cette nouvelle étiquette de texte :

    - <p className="text-center">No items yet! Add one above!</p>
+ <p className="text-center">You have no todo items yet! Add one above!</p>

    Enregistrez votre modification.

  2. Arrêtez et supprimez la version actuelle du conteneur. Plusieurs conteneurs ne peuvent pas utiliser le même port.

    Cliquez avec le bouton droit sur le conteneur de prise en main , puis sélectionnez Supprimer.

    Capture d’écran montrant l’extension Container Tools avec un conteneur sélectionné et un menu contextuel avec Supprimer sélectionné.

    Ou, à partir de la ligne de commande, utilisez la commande suivante pour obtenir l’ID de conteneur.

    docker ps

    Ensuite, arrêtez et supprimez le conteneur :

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

  3. Générez la version mise à jour de l’image. Dans l’Explorateur de fichiers, cliquez avec le bouton droit sur Dockerfile, puis sélectionnez Générer une image.

    Ou, pour générer sur la ligne de commande, remplacez le répertoire par le dossier qui contient le fichier Dockerfile et utilisez la même commande que celle que vous avez utilisée précédemment.

    docker build -t getting-started .

  4. Démarrez un nouveau conteneur qui utilise le code mis à jour.

    docker run -dp 3000:3000 getting-started

  5. Actualisez votre navigateur http://localhost:3000 pour afficher votre texte d’aide mis à jour.

    Capture d’écran montrant l’exemple d’application avec le texte modifié, décrit ci-dessus.

Partager votre image

Maintenant que vous avez créé une image, vous pouvez la partager. Pour partager des images conteneur, utilisez un registre de conteneurs. Le registre par défaut est Docker Hub, qui est l’endroit où proviennent toutes les images que nous avons utilisées.

Pour envoyer (push) une image, vous devez d’abord créer un dépôt sur Docker Hub.

  1. Accédez à Docker Hub et connectez-vous à votre compte.

  2. Sélectionnez Créer un référentiel.

  3. Pour le nom du dépôt, entrez getting-started. Assurez-vous que la visibilité est publique.

  4. Cliquez sur Créer.

    À droite de la page, vous verrez une section nommée Commandes Docker. Cette section fournit un exemple de commande à exécuter pour envoyer (push) à ce dépôt.

    Capture d’écran montrant la page Docker Hub avec une commande Docker suggérée.

  5. Dans VS Code, dans l’Explorateur de conteneurs, sous REGISTRES, cliquez sur l’icône plug-in, pour vous connecter à un registre, puis choisissez Docker Hub.

    Entrez le nom et le mot de passe de votre compte Docker Hub.

  6. Dans l’Explorateur de conteneurs de VS Code, sous IMAGES, cliquez avec le bouton droit sur la balise d’image, puis sélectionnez Push. Entrez l’espace de noms et la balise, ou acceptez les valeurs par défaut.

  7. Pour envoyer (push) vers Docker Hub à l’aide de la ligne de commande, utilisez cette procédure.

    Connectez-vous au Hub Docker :

    docker login -u <username>

  8. Utilisez la commande suivante pour donner à l’image de prise en main un nouveau nom.

    docker tag getting-started <username>/getting-started

  9. Utilisez la commande suivante pour "push" votre conteneur.

    docker push <username>/getting-started

Exécuter l’image sur une nouvelle instance

Maintenant que votre image a été générée et envoyée dans un registre, essayez d’exécuter l’application sur une nouvelle instance qui n’a jamais vu cette image conteneur. Pour exécuter votre application, utilisez Play avec Docker.

  1. Ouvrez votre navigateur pour lire avec Docker.

  2. Connectez-vous avec votre compte Docker Hub.

  3. Sélectionnez Démarrer , puis sélectionnez le lien + AJOUTER UNE NOUVELLE INSTANCE dans la barre latérale gauche. Après quelques secondes, une fenêtre de terminal s’ouvre dans votre navigateur.

    Capture d’écran montrant le site Play avec Docker avec un lien ajouter une nouvelle instance.

  4. Dans le terminal, démarrez votre application.

    docker run -dp 3000:3000 <username>/getting-started

    Play with Docker télécharge votre image et la démarre.

  5. Sélectionnez le badge 3000 à côté de OPEN PORT. Vous devriez voir l'application avec vos modifications.

    Si le badge 3000 n’apparaît pas, sélectionnez OPEN PORT et entrez 3000.

Nettoyer les ressources

Gardez tout ce que vous avez fait jusqu’à présent pour poursuivre cette série de tutoriels.

Étapes suivantes

Félicitations. Vous avez terminé la partie 2 et appris à mettre à jour votre code et à exécuter votre image sur une nouvelle instance.

Voici quelques ressources qui peuvent vous être utiles :

Ensuite, essayez le tutoriel suivant dans cette série :

Persister les données et superposer une application Docker

  • Last updated on