Le guide ultime pour déployer des applications Docker

Docker a révolutionné la manière dont les logiciels sont développés, testés et déployés. Il a éliminé bon nombre des problèmes courants liés au déploiement de logiciels, tels que les problèmes de compatibilité et les différences environnementales entre les environnements de développement et de production.

Dans cet article, nous allons explorer le processus de déploiement d’un conteneur Docker dans un environnement de production. Nous parlerons des conteneurs, de Docker, des avantages de l’utilisation de Docker et de ses options de déploiement. Enfin, nous montrerons comment construire, dockeriser et déployer une application Next.js sur Back4app Containers – tout à fait gratuitement !

Qu’est-ce qu’un conteneur ?

Un conteneur est un paquet exécutable autonome qui comprend tout ce qui est nécessaire à l’exécution d’une application. Il s’agit du code, du moteur d’exécution, des bibliothèques, des variables d’environnement et des fichiers de configuration. L’avantage des conteneurs est qu’ils peuvent être déployés n’importe où et qu’ils sont de petite taille, rapides et efficaces.

Avantages de l’utilisation des conteneurs

L’utilisation de conteneurs peut être très bénéfique pour votre entreprise. Elle peut aider les développeurs ainsi que l’équipe chargée des opérations informatiques. Voici quelques-uns des avantages de l’utilisation de Docker :

• Portabilité : les conteneurs peuvent être déployés n’importe où !
• Isolation de l’application : les conteneurs isolent l’application et ses dépendances du système hôte.
• Séparation des responsabilités : le travail est réparti entre les développeurs et l’équipe chargée des opérations informatiques.
• Développement d’applications plus rapide : plus besoin de manipuler des environnements de développement locaux, CI/CD.
• Évolution aisée : les conteneurs peuvent facilement évoluer en combinaison avec un logiciel d’orchestration.

Pour plus d’informations sur les conteneurs, consultez la page Qu’est-ce qu’un conteneur dans l’informatique en nuage ?

Conteneurs et machines virtuelles

Les machines virtuelles (VM) sont une abstraction du matériel physique, tandis que les conteneurs sont virtualisés au niveau du système d’exploitation. Les machines virtuelles offrent une isolation et une sécurité accrues, tandis que les conteneurs ne prennent pas beaucoup de place et sont plus efficaces et évolutifs.

Il est possible de combiner les conteneurs et les machines virtuelles pour obtenir le meilleur des deux.

Qu’est-ce que Docker ?

Docker est un outil open-source basé sur Linux qui permet aux développeurs de créer, de déployer et d’exécuter des applications dans des conteneurs légers. Il vous offre tous les avantages de la technologie de conteneurisation et vous permet de coder, d’expédier et de déployer vos logiciels plus rapidement que jamais !

Il s’agit d’une technologie stable et éprouvée qui a été lancée en 2013. Depuis, elle a été adoptée par de nombreuses grandes entreprises, dont Google, AWS et Microsoft. Elle est soutenue par une vaste communauté de développeurs, ce qui signifie que vous pouvez facilement trouver de l’aide si vous êtes bloqué.

Docker n’est pas le seul outil de conteneurisation sur le marché, mais c’est le plus populaire. Podman, LXD, containerd et Buildah sont d’excellentes alternatives.

Avantages de l’utilisation de Docker

En plus de tous les avantages de la technologie de conteneurisation, Docker offre plusieurs autres avantages. Examinons-les.

Léger

Grâce à sa légèreté et à sa rapidité, Docker constitue un substitut pratique et économique aux machines virtuelles. Docker convient aux environnements à haute densité et aux déploiements de petite et moyenne envergure où il faut faire plus avec moins de ressources.

Contrôle des versions

Docker permet le versionnage des applications, ce qui facilite le retour à une version antérieure si nécessaire. Cela peut contribuer à réduire les temps d’arrêt et à minimiser l’impact des problèmes liés aux mises à jour ou aux changements apportés à une application.

Amélioration de la collaboration

Docker Hub est un référentiel basé sur le cloud pour le stockage, le partage et la gestion des images Docker et il n’est pas nécessaire de créer une image Docker à partir de zéro. Il fournit un emplacement central pour découvrir et partager des images Docker populaires, y compris celles créées par la communauté Docker et les images officielles des fournisseurs de logiciels. Il est étroitement intégré à Docker CLI et Docker Desktop.

Évolutivité

Docker fournit une architecture évolutive qui peut être utilisée pour déployer des applications sur des systèmes distribués à grande échelle, tels que des clusters ou des plateformes cloud. La capacité de Docker à gérer un grand nombre de conteneurs et à les orchestrer à l’aide d’outils tels que Docker Swarm ou Kubernetes permet d’augmenter ou de réduire facilement l’échelle en fonction de la demande.

Docker et développement local

La façon la plus simple d’installer Docker sur votre machine locale est d’installer Docker Desktop. Docker Desktop est une application qui fournit une interface graphique conviviale et les outils nécessaires pour créer, tester et déployer des applications conteneurisées sur votre machine locale. Il vous permet de gérer les conteneurs, les images et les volumes. Il intègre un moteur Docker, une CLI Docker et Docker Compose.

En outre, il vous permet d’utiliser des extensions Docker qui peuvent vous aider à automatiser vos flux de travail et vos tâches. Docker Desktop facilite la collaboration avec d’autres développeurs et offre une excellente prise en charge de Docker Hub.

Docker Desktop est disponible sur Windows, Mac et Linux.

Options de déploiement Docker

Développer une application avec Docker est facile et les conteneurs peuvent être déployés sur différentes plateformes. Nous pouvons généralement les répartir dans les groupes suivants :

1. Hébergement conventionnel
2. Infrastructure en tant que service (IaaS)
3. Plate-forme en tant que service (PaaS)
4. Conteneur en tant que service (CaaS)

Sur la base de leur abstraction, nous pouvons les visualiser dans un diagramme pyramidal de la manière suivante :

Analysons chacun d’entre eux.

Docker et l’hébergement classique

Comme vous l’aurez deviné, les conteneurs Docker peuvent être facilement déployés sur votre propre serveur. Pour faire fonctionner Docker sur votre serveur, vous devez.. :

1. Installer le moteur Docker.
2. Construire les images Docker (localement) ou les extraire d’un registre de conteneurs.
3. Utilisez les images pour créer des conteneurs.
4. Mise en place du réseau, des volumes, du pare-feu, etc.

Si vous souhaitez simplifier davantage le processus de déploiement, vous pouvez utiliser Docker Compose. Docker Compose vous permet de déclarer des services, des réseaux et des volumes dans un seul fichier. En outre, il est idéal pour les applications Docker multi-conteneurs.

Docker sur IaaS

L’infrastructure en tant que service (IaaS) est un modèle de service d’informatique en nuage qui fournit des ressources informatiques telles que des serveurs, des réseaux, des systèmes d’exploitation et du stockage dans un environnement virtualisé. Ces serveurs en nuage sont généralement fournis à l’organisation par le biais d’API de haut niveau ou de tableaux de bord avancés, ce qui permet aux clients d’avoir un contrôle total sur l’ensemble de l’infrastructure.

Docker sur IaaS n’est pas très différent de l’utilisation de votre propre serveur. Si vous optez pour cette approche, vous devrez suivre des étapes similaires à celles d’un hébergement classique.

Parmi les fournisseurs IaaS, on peut citer AWS, GCP, Azure.

Docker sur PaaS

La plateforme en tant que service (PaaS) est un modèle de service d’informatique en nuage qui fournit aux utilisateurs un environnement en nuage dans lequel ils peuvent développer, gérer et fournir des applications. Outre la mise à disposition de ressources informatiques, le PaaS s’accompagne d’un grand nombre d’outils prédéfinis pour le développement, la personnalisation et le test d’applications. La plupart des fournisseurs de PaaS vous permettent de rendre votre application opérationnelle en quelques clics !

Les plateformes PaaS qui prennent en charge Docker simplifient encore davantage le processus de déploiement. Les fournisseurs de PaaS proposent généralement d’excellents outils qui vous permettent de déployer votre application Docker en toute simplicité.

Pour en savoir plus sur le PaaS, consultez la page Qu’est-ce que le PaaS – Platform as a Service ?

Docker sur CaaS

Container as a Service (CaaS) est un type de Platform as a Service (PaaS) qui fournit spécifiquement une plateforme pour l’exécution et la gestion d’applications conteneurisées. Il est conçu pour faciliter l’exécution, la gestion et la mise à l’échelle des conteneurs Docker et des microservices dans le nuage.

CaaS est l’option la plus facile à utiliser car elle est spécialisée pour les conteneurs et fait abstraction de l’infrastructure sous-jacente, ce qui évite aux développeurs d’avoir à gérer les serveurs et les réseaux sous-jacents. La plupart des fournisseurs de CaaS intègrent d’autres fonctionnalités telles que la mise à l’échelle, l’équilibrage de la charge, le basculement automatique, les déploiements en temps zéro, etc.

Parmi les exemples de CaaS figurent Back4app Containers, AWS ECS, Azure ACI et Google GKE.

Pour en savoir plus sur CaaS, consultez la page Qu’est-ce que CaaS – Container as a Service ?

Déployer un conteneur Docker vers Back4app Containers

Dans cette section de l’article, nous allons coder, dockeriser et déployer une simple application Next.js sur Back4app Containers.

Qu’est-ce que Back4app Containers ?

Back4app Containers est une plateforme open-source gratuite pour déployer et mettre à l’échelle des applications sur des conteneurs distribués à l’échelle mondiale. Elle vous permet de vous concentrer sur votre logiciel et de le livrer plus rapidement sans avoir à vous soucier de DevOps. La plateforme est étroitement intégrée à GitHub, dispose d’un système CI/CD intégré et vous permet de lancer votre application en quelques minutes !

Pourquoi utiliser les conteneurs Back4app ?

• S’intègre bien à GitHub
• Déploiements sans temps d’arrêt
• Facile à utiliser et gratuit
• Excellente assistance à la clientèle

Introduction du projet

Nous allons construire une application web TODO simple avec un stockage persistant. L’application permettra aux utilisateurs d’ajouter, de supprimer et de marquer des tâches comme étant faites. Nous la construirons avec Next.js, React et Zustand pour la gestion et la persistance de l’état. Enfin, nous allons dockeriser l’application et la déployer sur Back4app Containers.

Le produit final ressemblera à ceci :

Prérequis :

• Expérience avec JavaScript ES6
• Compréhension de base de React et Next.js
• Capacité à utiliser Git et GitHub

Code App

Initialisation du projet

Commençons par créer un nouveau projet Next.js.

La façon la plus simple de démarrer un projet Next.js est d’utiliser l’utilitaire create-next-app. Ouvrez votre terminal et exécutez la commande suivante :

$ npx create-next-app@latest

√ What is your project named? ... nextjs-todo
√ Would you like to use TypeScript with this project? ... No
√ Would you like to use ESLint with this project? ... Yes
√ Would you like to use `src/` directory with this project? ... No
√ Would you like to use experimental `app/` directory with this project? ... No
√ What import alias would you like configured? ... @/*

Success! Created a new Next.js app in C:\Users\Nik\WebstormProjects\nextjs-todo.

Ensuite, lancez le serveur :

$ npm run dev

Naviguez vers http://localhost:3000 et vous devriez voir la page d’accueil par défaut de Next.js.

Material UI

Nous pouvons faciliter le processus de construction de l’interface utilisateur avec Material UI – une bibliothèque de composants React qui suit le Material Design de Google. Cette bibliothèque fournit une sélection variée de composants prêts à l’emploi, ce qui rend la création d’interfaces utilisateur simple et efficace.

N’hésitez pas à remplacer Material UI par un autre framework d’interface utilisateur comme React Bootstrap ou Ant Design.

Pour ajouter Material UI à votre projet, exécutez :

$ npm install @mui/material @emotion/react @emotion/styled

Material UI utilise par défaut la police Roboto. Installons-la avec :

$ npm install @fontsource/roboto

Ensuite, naviguez vers _app.js et ajoutez les importations suivantes au début du fichier :

Interface utilisateur

Notre application web comportera les deux pages suivantes :

1. / affiche la liste des tâches
2. /add permet aux utilisateurs d’ajouter une nouvelle tâche

Commençons par la page d’index.

Pour rendre notre code plus organisé, créez un nouveau répertoire à la racine du projet, nommé components. Dans ce répertoire, créez un nouveau fichier nommé Task.js avec le contenu suivant :

Ensuite, utilisez le composant nouvellement créé dans index.js pour afficher les tâches :

1. Nous avons utilisé le crochet React useState() pour créer un état pour les tâches.
2. Nous avons rempli le tableau des tâches avec des données fictives.
3. Nous avons utilisé les composants MUI et le composant Tâche pour afficher les tâches (ou un message s’il n’y a pas encore de tâches).

Exécutez le serveur de développement :

$ npm run dev

Naviguez vers http://localhost:3000 et vous devriez voir la liste des tâches :

Continuons à créer une page pour ajouter des tâches.

Créez un nouveau fichier nommé add.js dans le répertoire pages :

Ce code affiche un formulaire simple qui permet aux utilisateurs d’ajouter de nouvelles tâches.

Redémarrez le serveur et naviguez vers /add ou cliquez sur le bouton “Add task” en haut à droite de l’écran. Vous devriez voir quelque chose comme ceci :

Notre interface utilisateur est maintenant terminée. Dans l’étape suivante, nous mettrons en œuvre la logique et l’état réels.

Gestion de l’État

Pour gérer l’état global, nous utiliserons Zustand – une bibliothèque de gestion d’état petite, rapide et évolutive pour les applications React.

Commencez par l’installer via npm :

$ npm install zustand

Ensuite, nous devons créer un magasin.

Pour rendre notre code plus organisé, créons un dossier dédié nommé store pour l’état global. Dans ce dossier, créons un fichier nommé storage.js avec le contenu suivant :

1. Zustand create() crée le magasin.
2. Pour enregistrer l’état dans localStorage, nous avons utilisé l’intergiciel persist().
3. tasks est un tableau contenant les tâches de l’utilisateur.
4. addTask, deleteTask, markTaskAsDone sont des méthodes permettant de manipuler le tableau des tâches.

La dernière chose à faire est de passer en revue toutes les pages et tous les composants qui ont besoin de l’état global et de les lier.

Commencez par naviguer jusqu’à index.js et modifiez-le comme suit :

N’oubliez pas d’ajouter l’importation en tête du fichier :

import useGlobalStore from "@/store/storage";

Ensuite, naviguez jusqu’à components/Task.js et modifiez-le comme suit :

Enfin, naviguez jusqu’à pages/add.js et faites en sorte que handleSubmit() soumette la tâche :

Là encore, n’oubliez pas l’importation :

import useGlobalStore from "@/store/storage";

Parfait, notre application web utilise maintenant Zustand pour gérer le stockage global et le persiste via localStorage. N’hésitez pas à réexécuter l’application pour vous assurer que tout fonctionne.

Dockerize App

Les étapes suivantes nécessitent l’installation de Docker. La façon la plus simple d’installer Docker est de télécharger Docker Desktop.

Vérifiez que Docker fonctionne :

$ docker --version

Docker version 20.10.22, build 3a2c30b

Configuration de Next.js

Tout d’abord, allez dans votre next.config.js et définissez la sortie à "standalone" comme suit :

La modification de ce paramètre créera une version autonome de notre application Next.js lors de la prochaine construction. Une application autonome peut être déployée sans installer node_modules. La version autonome est également livrée avec un serveur web intégré.

Fichier Docker

Pour dockeriser notre application, nous utiliserons un Dockerfile. Un Dockerfile est un fichier texte qui nous permet de définir l’image de base, l’environnement, les variables environnementales, les commandes, les paramètres de réseau, les volumes, etc.

Créez un fichier Docker à la racine de votre projet avec le contenu suivant :

Ce fichier Docker tire parti des constructions en plusieurs étapes. Les constructions en plusieurs étapes nous permettent de réduire considérablement la taille de l’image et de construire nos images plus rapidement. Nous avons créé les trois étapes suivantes :

1. L’étape des dépendances copie le fichier de dépendances et installe les dépendances.
2. L’étape de construction copie les dépendances et construit le projet via npm.
3. L’étape d’exécution copie la compilation autonome et la sert via le serveur autonome.

Enfin, nous avons exposé un port que Back4app Containers va utiliser pour mapper l’application.

Pour plus d’informations sur l’utilisation de Docker avec Next.js, jetez un coup d’œil au dépôt with-docker.

.dockerignore

Avant de construire une image, Docker recherche un fichier .dockerignore. Un fichier .dockerignore nous permet de définir les fichiers que nous ne voulons pas inclure dans l’image. Cela peut réduire considérablement la taille de l’image. Son fonctionnement est similaire à celui d’un fichier .gitignore.

Créez un fichier .dockerignore à la racine du projet avec le contenu suivant :

Veillez à ajouter tout répertoire ou fichier supplémentaire que vous souhaitez exclure.

Construire et exécuter l’image

Continuons, construisons et marquons notre image Docker :

$ docker build -t nextjs-todo:1.0 .

Si vous listez vos images, vous devriez voir la nouvelle image :

$ docker images

REPOSITORY        TAG       IMAGE ID       CREATED       SIZE
nextjs-todo       1.0       7bce66230eb1   2 hours ago   160MB

Enfin, utilisez l’image pour créer un nouveau conteneur Docker :

$ docker run -it -p 3000:3000 -d nextjs-todo:1.0

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Vous pouvez utiliser -d pour démarrer le conteneur Docker en mode détaché. Cela signifie que le conteneur s’exécute en arrière-plan de votre terminal et ne reçoit pas d’entrée ou n’affiche pas de sortie.

Bien joué, votre application tourne maintenant dans un conteneur ! Naviguez vers http://localhost:3000 et vous devriez voir votre application TODO.

GitHub

Pour déployer l’application sur Back4app Containers, vous devez télécharger votre code source sur un dépôt GitHub. Allez-y et créez un nouveau dépôt sur GitHub, ajoutez le remote, ajoutez .gitignore, et livrez votre code. Une fois que votre code est sur GitHub, passez à l’étape suivante.

Si vous souhaitez simplement tester Back4app Containers, n’hésitez pas à forker le repo back4app-containers-nextjs et à le déployer à la place.

Déployer votre application dans les conteneurs Back4app

Les étapes suivantes nécessitent que vous ayez un compte Back4app. Si vous l’avez déjà, connectez-vous, sinon inscrivez-vous pour obtenir un compte gratuit.

Pour travailler avec Back4app, nous devons d’abord créer une application. Lorsque vous vous connectez à votre tableau de bord, vous verrez la liste de vos applications. Cliquez sur “Build a new app” pour créer une nouvelle application.

Sélectionnez ensuite “Containers as a Service”.

Si vous ne l’avez pas encore fait, connectez votre GitHub à Back4app et importez les dépôts que vous souhaitez déployer. Une fois que votre GitHub est connecté, vos dépôts seront affichés dans le tableau.

Choisissez le référentiel que vous souhaitez déployer en cliquant sur “Select”.

Ensuite, Back4app va vous demander de configurer l’environnement. Choisissez un nom d’application, je vais choisir nextjs-todo. N’hésitez pas à laisser tout le reste par défaut.

Enfin, cliquez sur “Create App” pour créer automatiquement l’application et la déployer.

Vous serez alors redirigé vers les détails de votre application où vous pourrez voir les logs de déploiement.

Attendez quelques minutes pour que l’application se déploie et voilà ! Votre application est maintenant en ligne sur Back4app Containers. Pour voir votre application en action, cliquez sur l’URL verte affichée à gauche.

Conclusion

Tout au long de cet article, nous avons expliqué ce qu’est Docker, ses avantages et comment vous pouvez l’intégrer dans votre flux de travail. Vous devriez maintenant être en mesure de coder, dockeriser et déployer vos propres applications Next.js dans les conteneurs Back4app.

Le code source final est disponible sur le dépôt GitHub back4app-containers-nextjs.

FAQ