Comment Dockeriser votre application Next.js : un guide étape par étape

Cet article de blog montre comment conteneuriser une application Next.js à l'aide de Docker et Docker Compose. Nous aborderons la création d'un Dockerfile, un fichier .dockerignore (bien que cela ne soit pas explicitement affiché, c'est implicite) et la configuration de docker-compose.yml pour un développement et un déploiement efficaces. Cela garantit un environnement cohérent à toutes les étapes.

---

Étape 1 : Configuration de votre projet Next.js

Commencez par créer une nouvelle application Next.js :

<code class="language-bash">npx create-next-app@latest my-next-app</code>

Remplacez "my-next-app" par le nom de votre projet souhaité. Cela génère un projet Next.js de base.

---

Étape 2 : Initialisation de Docker

Accédez au répertoire de votre projet et initialisez Docker. Bien que les instructions originales suggèrent docker init, cette commande n'est pas standard. Au lieu de cela, nous créerons manuellement les fichiers nécessaires. Cela offre plus de contrôle et évite les problèmes potentiels avec une commande non standard.

---

La structure du projet résultante devrait ressembler à ceci :

---

Étape 3 : Optimiser Next.js pour les versions autonomes

Modifiez next.config.ts (ou next.config.js) pour générer un build autonome :

<code class="language-typescript">import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  output: 'standalone',
}

export default nextConfig</code>

Cela simplifie le déploiement en créant une application autonome.

---

Étape 4 : Créer le fichier Docker

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

<code class="language-dockerfile">FROM node:20-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]</code>

Ceci utilise une image Alpine Node.js 20, installe les dépendances, copie le code de l'application, expose le port 3000 et démarre le serveur de développement.

---

Étape 5 : Configuration de docker-compose.yml

Créez un fichier docker-compose.yml à la racine de votre projet :

<code class="language-yaml">version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development</code>

Ceci définit un service nommé web qui construit l'image à partir du répertoire actuel, mappe le port 3000 et définit le NODE_ENV sur development.

Démarrez l'application en utilisant :

<code class="language-bash">docker-compose up</code>

---

Conclusion

Cette approche rationalisée utilise les commandes Docker standard et les meilleures pratiques pour conteneuriser votre application Next.js, simplifiant ainsi le déploiement et garantissant la cohérence entre les environnements. N'oubliez pas de remplacer "my-next-app" par le nom réel de votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!