Cet article explique comment conteneuriser une application Next.js avec un fichier Docker pour un déploiement personnalisable. Alternativement, vous pouvez déployer une application Next.js sur Kinsta en utilisant le déploiement automatique.

Avec Docker, nous emballons une application, son environnement et ses dépendances dans un conteneur isolé. Un conteneur est constitué d’une application fonctionnant dans une version simplifiée de Linux. Une image Docker est le plan d’un conteneur, et le conteneur est une instance en cours d’exécution d’une image.

Pour conteneuriser une application, nous utilisons une méthode déclarative par le biais d’un fichier Docker. Docker lit et exécute les scripts définis dans ce fichier pour construire et déployer votre application.

Avantages de la conteneurisation de votre application

La conteneurisation d’une application présente de nombreux avantages, tels que la portabilité, la stabilité, l’évolutivité, la sécurité et la performance. En déployant une application sur Kinsta à l’aide d’un fichier Docker, vous tirez également parti de sa personnalisation.

Portabilité

Docker encapsule tout ce dont une application a besoin pour fonctionner, ce qui lui permet de passer facilement d’un environnement à l’autre. Que vous l’exécutiez localement, sur un ordinateur doté d’un système d’exploitation différent, ou dans des environnements de staging et de production, Docker construit l’application avec les mêmes composants, ce qui facilite le codage, les tests et le déploiement.

Évolutivité

Avec Docker, vous pouvez exécuter plusieurs instances de votre conteneur sur différents serveurs. Les orchestrateurs de conteneurs gèrent l’augmentation du trafic sans affecter les performances de votre application.

Stabilité

En exécutant votre application dans un conteneur isolé, vous obtenez des résultats prévisibles lorsque vous déplacez le code entre les systèmes de développement, de test et de production. Étant donné que votre conteneur contient les versions exactes des bibliothèques et des paquets nécessaires, il minimise le risque de bogues dus aux différentes révisions des dépendances.

En outre, lorsque votre application est déployée sur un serveur de production, Docker l’isole des autres applications, ce qui minimise le risque d’être affecté par leurs pics de trafic.

Sécurité

Les conteneurs Docker offrent un environnement plus sûr pour vos charges de travail que les modèles traditionnels. Comme ils divisent vos applications en composants beaucoup plus petits, faiblement couplés et isolés les uns des autres, la surface d’attaque est considérablement réduite. Les conteneurs Docker réduisent les possibilités d’exploitation de vos systèmes informatiques par des pirates et rendent plus difficile la propagation d’une brèche en cas d’attaque. Pour en savoir plus, consultez cet article : 9 bonnes pratiques de sécurité pour les conteneurs Docker.

Performances

Les conteneurs ne contiennent pas de système d’exploitation complet comme les machines virtuelles et les serveurs traditionnels. De ce fait, les conteneurs ont une empreinte considérablement plus petite et sont plus rapides à construire et à démarrer.

Déploiement personnalisé

Avec Kinsta, vous pouvez déployer vos applications automatiquement en utilisant des Buildpacks et des Nixpacks. Mais lorsque le processus de construction est automatiquement déclenché sur la base du code de votre application, vous n’avez pas beaucoup de place pour les personnalisations. Si vous déployez sur Kinsta avec un fichier Docker, vous pouvez configurer précisément la façon dont vous souhaitez construire et déployer votre application.

Pré-requis

Pour déployer une application Next.js avec Docker, vous avez besoin de :

Commencer avec une application Next.js

Si vous démarrez à partir d’une application existante, vous pouvez sauter cette étape. Si vous commencez à zéro, créez une nouvelle application Next.js :

  1. Ouvrez votre terminal et installez create-next-app:
npm i -g create-next-app@latest
  1. Naviguez jusqu’au répertoire où vous voulez l’installer et créez une nouvelle application Next.js dans son propre répertoire :
npx create-next-app@latest new-app

Next vous invite à spécifier un certain nombre d’options de configuration pour votre nouvelle application. Pour ce tutoriel, vous pouvez simplement accepter les valeurs par défaut proposées.

  1. Pour prévisualiser votre nouvelle application, accédez au répertoire new-app et exécutez :
npm run dev

Pour votre référence, nous avons créé un exemple d’application en utilisant cette méthode.

Conteneuriser une application Next.js avec un Dockerfile

Pour conteneuriser votre application Next.js et la déployer avec Docker, créez un Dockerfile dans le répertoire racine de votre application.

Étape de construction

Dans votre Dockerfile, commencez par créer l’étape build pour construire votre application :

  1. Utilisez la dernière image stable officielle de Node.js alpine comme image de base pour l’étape build:
FROM node:18-alpine AS build
WORKDIR /app
  1. Copiez les fichiers package.json et package-lock.json dans le conteneur :
COPY package*.json ./
  1. Installez les dépendances de l’application avec :
RUN npm ci
  1. Copiez le reste du code de l’application dans le conteneur avec :
COPY . .
  1. Créez l’application :
RUN npm run build

Étape d’exécution

Créez l’étape runtime pour déployer votre application :

  1. Utilisez la dernière image stable officielle de Node.js alpine comme image de base pour l’étape runtime:
FROM node:18-alpine AS runtime
  1. Définissez le répertoire de travail à /app:
WORKDIR /app
  1. Copiez les fichiers package.json et package-lock.json dans le conteneur :
COPY package*.json ./
  1. Installez uniquement les dépendances de production :
RUN npm ci --only=production
  1. Copiez l’application construite de l’étape build à l’étape runtime:
COPY --from=build /app/.next ./.next
  1. Copiez le dossier public de l’étape build vers l’étape runtime:
COPY --from=build /app/public ./public
  1. Exposez le port 3000 :
EXPOSE 3000
  1. Exécutez le conteneur en tant qu’utilisateur non privilégié :
USER node
  1. Démarrez l’application Next.js :
CMD ["npm", "start"]

Nous obtenons le Dockerfile suivant :

FROM node:18-alpine AS build

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:18-alpine AS runtime

WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public

EXPOSE 3000
USER node
CMD ["npm", "start"]

Déployer l’application localement avec Docker

Bien que vous puissiez toujours prévisualiser votre application avec run npm dev, exécutez-la localement avec Docker pour imiter l’environnement de production et pour tester et prévisualiser toutes les modifications que vous apportez au Dockerfile de votre application.

Pour prévisualiser votre application :

  1. Créez l’application à l’aide de docker build:
docker build -t next-docker .
  1. Exécutez le conteneur pour prévisualiser votre application :
docker run -p 3000:3000 next-docker
  1. Dans votre navigateur, ouvrez http://localhost:3000.

Déployer l’application Next.js conteneurisée sur Kinsta

Suivez les étapes ci-dessous pour déployer votre application sur Kinsta en utilisant son Dockerfile.

  1. Hébergez la base de code de votre application sur un dépôt Git (sur GitHub, GitLab ou Bitbucket).
  2. Connectez-vous à votre compte MyKinsta ou créez-en un nouveau pour accéder à votre tableau de bord.
  3. Cliquez sur Ajouter un service et sélectionnez Application.
  4. Sélectionnez votre fournisseur Git, votre dépôt et la branche à partir de laquelle vous souhaitez effectuer le déploiement.
  5. Cochez la case Déploiement automatique lors de la validation si vous souhaitez déployer votre application à chaque ajout à votre dépôt.
  6. Sélectionnez le centre de données le plus proche de votre public et cliquez sur Continuer.
  7. Choisissez votre environnement de construction et sélectionnez Utiliser un Dockerfile pour configurer l’image du conteneur.
  8. Si votre fichier Docker ne se trouve pas à la racine de votre répertoire, utilisez Contexte pour indiquer son chemin d’accès et cliquez sur Continuer.
  9. Vous pouvez laisser l’entrée de la commande Start vide. Kinsta utilise npm start pour démarrer votre application.
  10. Sélectionnez la taille du pod et le nombre d’instances qui conviennent le mieux à votre application et cliquez sur Continuer.
  11. Remplissez les informations relatives à votre carte bancaire et cliquez sur Créer une application.

Votre application est prête à être déployée. Si vous avez coché la case Déploiement automatique lors de la validation à l’étape 5, Kinsta démarre le déploiement automatiquement.

Résumé

Dans cet article, nous avons discuté de quelques avantages de l’utilisation de Docker par rapport aux modèles traditionnels ; nous avons expliqué comment créer un fichier Docker pour une application Next.js, la construire et la déployer avec Docker localement, et la déployer sur Kinsta.

L’hébergement d’applications de Kinsta rend votre flux de développement efficace et sans effort.

Des fonctionnalités telles que les applications conteneurisées sur l’infrastructure GCP fonctionnant sur des machines C2 avec 37 centres de données disponibles, l’intégration premium avec Cloudflare pour un CDN haute performance qui sert votre site à partir de 260+ points de présence, la protection DDoS du pare-feu au niveau de l’entreprise, la mise en cache Edge et la surveillance du temps de fonctionnement (avec une garantie de temps de fonctionnement de 99 %), assurent que votre application fonctionne rapidement, en toute sécurité et qu’elle est disponible de manière fiable sur Internet.

Marcia Ramos Kinsta

I'm the Editorial Team Lead at Kinsta. I'm a open source enthusiast and I love coding. With more than 7 years of technical writing and editing for the tech industry, I love collaborating with people to create clear and concise pieces of content and improve workflows.