Générer et exécuter l’exemple d’application TODOBuild and run the todo sample app

  • 4 minutes de lecture

Pour le reste de ce didacticiel, vous utiliserez un gestionnaire de liste de tâches simple qui s’exécute dans Node.js.For the rest of this tutorial, you'll be working with a simple todo list manager that is running in Node.js. Si vous n’êtes pas familiarisé avec Node.js, ne vous inquiétez pas !If you're not familiar with Node.js, don't worry! Aucune expérience JavaScript réelle n’est nécessaire.No real JavaScript experience is needed!

À ce stade, votre équipe de développement est relativement petite et vous créez simplement une application pour prouver votre MVP (produit minimum viable).At this point, your development team is quite small and you're simply building an app to prove out your MVP (minimum viable product). Vous souhaitez montrer son fonctionnement et ce qu’il peut faire sans avoir à réfléchir à son fonctionnement pour une équipe de grande taille, plusieurs développeurs, etc.You want to show how it works and what it's capable of doing without needing to think about how it will work for a large team, multiple developers, and so on.

Capture d’écran du gestionnaire de liste de tâches

Obtenir l’applicationGet the app

Avant de pouvoir exécuter l’application, vous devez récupérer le code source de l’application sur votre ordinateur.Before you can run the application, you need to get the application source code onto your machine. Pour les projets réels, vous allez généralement cloner le référentiel.For real projects, you will typically clone the repo. Toutefois, pour ce didacticiel, nous avons créé un fichier ZIP contenant l’application.But, for this tutorial, we have created a ZIP file containing the application.

  1. Assurez-vous que Docker pour Windows ou l’édition Community de l’Ancrable est installé sur l’ordinateur local.Make sure that you have Docker for Windows or Docker Community Edition installed on the local machine. Consultez docker pour Windows documentation sur l’installation.See Docker for Windows installation documentation. Le processus d’installation rend le fichier ZIP contenant l’exemple disponible à l’adresse localhost.The install process makes the ZIP file containing the sample available at the localhost address.

  2. Téléchargez le fichier zip.Download the ZIP. Ouvrez le fichier ZIP et veillez à extraire le contenu.Open the ZIP file and make sure you extract the contents.

  3. Une fois l’extraction effectuée, utilisez votre éditeur de code favori pour ouvrir le projet.Once extracted, use your favorite code editor to open the project. Si vous avez besoin d’un éditeur, vous pouvez utiliser Visual Studio code.If you're in need of an editor, you can use Visual Studio Code. Vous devez voir le package.json et les deux sous-répertoires ( src et spec ).You should see the package.json and two subdirectories (src and spec).

    Capture d’écran de Visual Studio Code ouverts avec l’application chargée

Génération de l’image conteneur de l’applicationBuilding the app's container image

Pour générer l’application, vous devez utiliser un Dockerfile .In order to build the application, you need to use a Dockerfile. Un fichier dockerfile est simplement un script textuel d’instructions qui est utilisé pour créer une image de conteneur.A Dockerfile is simply a text-based script of instructions that is used to create a container image. Si vous avez créé fichiers dockerfile avant, vous pouvez voir quelques défauts dans le fichier dockerfile ci-dessous.If you've created Dockerfiles before, you might see a few flaws in the Dockerfile below. Mais ne vous inquiétez pas !But, don't worry! Nous allons les passer en revue.We'll go over them.

  1. Créez un fichier nommé Dockerfile dans le même dossier que le fichier package.json avec le contenu suivant.Create a file named Dockerfile in the same folder as the file package.json with the following contents.

    FROM node:12-alpine
WORKDIR /app
COPY . .
RUN yarn install --production
CMD ["node", "/app/src/index.js"]

    Vérifiez que le fichier n' Dockerfile a pas d’extension de fichier comme .txt .Please check that the file Dockerfile has no file extension like .txt. Certains éditeurs peuvent ajouter cette extension de fichier automatiquement, ce qui génère une erreur à l’étape suivante.Some editors may append this file extension automatically and this would result in an error in the next step.

  2. Si vous ne l’avez pas déjà fait, ouvrez un terminal et accédez au app répertoire à l’aide de la Dockerfile .If you haven't already done so, open a terminal and go to the app directory with the Dockerfile. À présent, générez l’image conteneur à l’aide de la docker build commande.Now build the container image using the docker build command.

    docker build -t getting-started .

    Vous pouvez également cliquer avec le bouton droit sur fichier dockerfile et choisir générer une image... , puis spécifier la balise à l’invite.Alternatively, you can also right-click on the Dockerfile and choose Build Image... and then specify the tag at the prompt.

    Cette commande utilisait le fichier dockerfile pour générer une nouvelle image de conteneur.This command used the Dockerfile to build a new container image. Vous avez peut-être remarqué qu’un grand nombre de « couches » ont été téléchargées.You might have noticed that a lot of "layers" were downloaded. Cela est dû au fait que vous avez demandé au générateur que vous vouliez démarrer à partir de l' node:12-alpine image.This is because you instructed the builder that you wanted to start from the node:12-alpine image. Toutefois, étant donné que vous ne l’avez pas sur votre ordinateur, cette image devait être téléchargée.But, since you didn't have that on your machine, that image needed to be downloaded.

    Une fois l’image téléchargée, vous l’avez copiée dans votre application et vous l’avez utilisée yarn pour installer les dépendances de votre application.After the image was downloaded, you copied in your application and used yarn to install your application's dependencies. La CMD directive spécifie la commande par défaut à exécuter lors du démarrage d’un conteneur à partir de cette image.The CMD directive specifies the default command to run when starting a container from this image.

    Enfin, l' -t indicateur balise votre image.Finally, the -t flag tags your image. Imaginez simplement comme un nom explicite pour l’image finale.Think of this simply as a human-readable name for the final image. Étant donné que vous avez nommé l’image getting-started , vous pouvez faire référence à cette image quand vous exécutez un conteneur.Since you named the image getting-started, you can refer to that image when you run a container.

    Le . à la fin de la docker build commande indique à l’ancrage qu’il doit rechercher le Dockerfile dans le répertoire actif.The . at the end of the docker build command tells that Docker should look for the Dockerfile in the current directory.

Démarrage d’un conteneur d’applicationStarting an app container

Maintenant que vous avez une image, exécutez l’application !Now that you have an image, run the application! Pour ce faire, utilisez la docker run commande (Rappelez-vous qu’à partir d’une version antérieure ?).To do so, use the docker run command (remember that from earlier?).

  1. Démarrez votre conteneur à l’aide de la docker run commande et spécifiez le nom de l’image que vous venez de créer :Start your container using the docker run command and specify the name of the image you just created:

    docker run -dp 3000:3000 getting-started

    Vous vous souvenez des -d -p indicateurs et ?Remember the -d and -p flags? Vous exécutez le nouveau conteneur en mode « détaché » (en arrière-plan) et en créant un mappage entre le port 3000 de l’ordinateur hôte et le port 3000 du conteneur.You're running the new container in "detached" mode (in the background) and creating a mapping between the host's port 3000 to the container's port 3000. Sans le mappage de port, vous ne seriez pas en mesure d’accéder à l’application.Without the port mapping, you wouldn't be able to access the application.

  2. Après quelques secondes, ouvrez votre navigateur Web sur http://localhost:3000 .After a few seconds, open your web browser to http://localhost:3000. Vous devez voir l’application !You should see the app!

    Liste TODO vide

  3. Continuez et ajoutez un ou deux éléments et voyez qu’ils fonctionnent comme prévu.Go ahead and add an item or two and see that it works as you expect. Vous pouvez marquer les éléments comme étant terminés et supprimer des éléments.You can mark items as complete and remove items. Votre serveur frontal stocke correctement les éléments dans le backend.Your frontend is successfully storing items in the backend! Assez rapide et facile, n’est-ce pas ?Pretty quick and easy, huh?

À ce stade, vous devez avoir un gestionnaire de liste de tâches en cours d’exécution avec quelques éléments que vous avez créés par vous-même !At this point, you should have a running todo list manager with a few items, all built by you! À présent, nous allons apporter quelques modifications et apprendre à gérer vos conteneurs.Now, let's make a few changes and learn about managing your containers.

Si vous examinez rapidement l’extension VS Code, vous devriez voir vos deux conteneurs s’exécuter maintenant (ce didacticiel et votre nouveau conteneur d’application lancé) !If you take a quick look at the VS Code extension, you should see your two containers running now (this tutorial and your freshly launched app container)!

Extension d’ancrage avec didacticiel et conteneurs d’applications exécutant

RécapitulatifRecap

Dans cette petite section, vous avez appris les principes fondamentaux de la création d’une image de conteneur et de la création d’un fichier dockerfile pour le faire.In this short section, you learned the very basics about building a container image and created a Dockerfile to do so. Une fois que vous avez créé une image, vous avez démarré le conteneur et vu l’application en cours d’exécution !Once you built an image, you started the container and saw the running app!

Ensuite, vous allez apporter une modification à l’application et apprendre à mettre à jour l’application en cours d’exécution avec une nouvelle image.Next, you're going to make a modification to the app and learn how to update the running application with a new image. En cours de route, vous apprendrez quelques autres commandes utiles.Along the way, you'll learn a few other useful commands.

Étapes suivantesNext steps

Poursuivez avec le didacticiel.Continue with the tutorial!

Mise à jour de votre applicationUpdating your app