Introduction

Dans cet article, nous partageons notre approche pour déployer un projet Next.js avec Docker, en mettant l’accent sur l’optimisation des performances, la sécurité et la gestion efficace des variables d’environnement.

Nous utilisons une architecture multi-stage pour distinguer l’image de build et l’image de production, ce qui réduit la taille de l’image finale et améliore la sécurité en évitant d’exposer des fichiers inutiles en production.

Cette approche nous a permis de gagner plusieurs gigaoctets de stockage, l’image déployée passant de 3-4 Go à moins de 200 Mo.

Pourquoi utiliser un Dockerfile optimisé ?

• Performance : Une image plus légère charge plus rapidement et optimise l’exécution.
• Sécurité : En évitant d’inclure des dépendances inutiles en production, on réduit la surface d’attaque.
• Gestion des variables d’environnement : Une meilleure séparation entre les variables utilisées pour le build et celles utilisées au runtime.

Découvrez notre entreprise

Comment nous collaborons avec vous

Penser en grand

Nous transformons vos ambitions en objectifs concrets, en mettant l'innovation au cœur de notre collaboration.

Commencer petit

Nous commençons par des solutions pragmatiques, puis évoluons avec agilité pour maximiser votre succès à chaque étape.

Créer rapidement

Notre équipe réactive transforme les idées en résultats concrets, accélérant votre croissance et votre impact.

Innover à grande échelle

Nous repoussons les limites pour vous aider à saisir les opportunités à grande échelle, garantissant une collaboration visionnaire.

Planifier un rendez-vous

Analyse du Dockerfile

Nous allons utiliser deux étapes pour construire notre image Docker :

Important : Il faut configurer next.config.mjs en mode standalone.

module.exports = {
  output: "standalone",
};
Language:javascript

1. Image de Build

Nous utilisons Node.js 20 (toujours la version LTS) comme base pour le build :

FROM node:20 AS buildLanguage:dockerfile

Cette image comprend toutes les dépendances nécessaires pour compiler l’application.

Variables d’environnement en build-time

Nous définissons des variables d’environnement qui seront utilisées uniquement durant la compilation de l’application.

ARG NEXT_PUBLIC_PUBLIC_URL
ARG WORDPRESS_API_URL
ARG EXIRY_GA_TRACKING_IDLanguage:dockerfile

Ces variables sont utilisées par Next.js pour générer le build statique et configurer certaines intégrations (CMS, analytics, etc.).

Après l’installation des dépendances et la copie du code, nous construisons l’application Next.js :

RUN yarn buildLanguage:dockerfile

2. Image de Production

Nous utilisons une image allégée de Node.js pour exécuter l’application en production :

FROM node:20-alpine AS productionLanguage:dockerfile

Pourquoi ?

• Alpine est une version minimaliste de Linux, réduisant la taille de l’image finale.
• Moins de packages = moins de vulnérabilités potentielles.

Nous copions uniquement les fichiers essentiels au fonctionnement de l’application en production :

COPY --from=build /app/.next/standalone ./
COPY --from=build /app/public ./public
COPY --from=build /app/.next/static ./.next/staticLanguage:dockerfile

Pourquoi ?

• Next.js standalone permet d’exécuter l’application sans avoir besoin de toutes les dépendances de développement.
• Seuls les fichiers nécessaires sont inclus, réduisant ainsi la taille de l’image et améliorant la sécurité.

Variables d’environnement en runtime

ENV NODE_ENV=production

ENV NEXT_PUBLIC_PUBLIC_URL=
ENV CSRF_SECRET=
ENV WP_API_TOKEN=
ENV WORDPRESS_API_URL=
ENV WEBHOOK_SECRET=
ENV EXIRY_GA_TRACKING_ID=Language:dockerfile

Pourquoi cette distinction ?

• Les variables d’environnement en build-time (stade 1) sont utilisées pour compiler l’application.
• Les variables d’environnement en runtime (stade 2) sont celles qui seront utilisées par l’application en exécution.
• Certaines variables, comme NEXT_PUBLIC_PUBLIC_URL, peuvent apparaître dans les deux images car elles sont requises à la fois pour le build et pour l’exécution.

En production, aucune information sensible ne doit figurer dans l’image elle-même. Les variables runtime sont injectées au moment de l’exécution via un fichier .env ou un orchestrateur (Docker Compose, Kubernetes, etc.).

Exposition du port et lancement de l’application

EXPOSE 3000
CMD ["node", "server.js"]Language:dockerfile

• EXPOSE 3000 : Déclare le port sur lequel Next.js écoute. Si vous utilisez un autre port, assurez-vous de l’exposer ici.
• CMD [« node », « server.js »] : Démarre l’application Next.js.

Conclusion

Ce Dockerfile optimisé pour Next.js permet :

• Une meilleure gestion des variables d’environnement, en évitant d’exposer des secrets dans l’image de build.
• Une réduction de la taille de l’image en excluant les dépendances inutiles.
• Une meilleure sécurité en limitant la surface d’attaque et en utilisant une image Alpine.

En suivant cette approche, nous assurons un déploiement performant, sécurisé et maintenable pour nos projets Next.js chez Tekru.

Voici une version complète du Dockerfile :

# Stage 1: Build image
FROM node:20 AS build

# Set build-time environment variables
ARG NEXT_PUBLIC_PUBLIC_URL
ARG WORDPRESS_API_URL
ARG EXIRY_GA_TRACKING_ID

# Set the working directory inside the container
WORKDIR /app

# Install dependencies using Yarn (including dev dependencies)
COPY package.json yarn.lock ./
COPY next.config.ts ./
RUN yarn install --frozen-lockfile

# Copy the rest of the application code
COPY . .

# Set these arguments as environment variables
ENV NEXT_PUBLIC_PUBLIC_URL=$NEXT_PUBLIC_PUBLIC_URL
ENV WORDPRESS_API_URL=$WORDPRESS_API_URL
ENV EXIRY_GA_TRACKING_ID=$EXIRY_GA_TRACKING_ID

# Build the Next.js app
RUN yarn build

# Stage 2: Production image
FROM node:20-alpine AS production

# Set the working directory inside the container
WORKDIR /app

# Copy standalone output from builder stage
COPY --from=build /app/.next/standalone ./
COPY --from=build /app/public ./public
COPY --from=build /app/.next/static ./.next/static

# Copy the next.config.ts
COPY next.config.ts .

ENV NODE_ENV=production

# Set environment variables for runtime
ENV NEXT_PUBLIC_PUBLIC_URL=
ENV CSRF_SECRET=
ENV WP_API_TOKEN=
ENV WORDPRESS_API_URL=
ENV WEBHOOK_SECRET=
ENV EXIRY_GA_TRACKING_ID=

# Expose the necessary port
EXPOSE 3000

# Start the Next.js app in production mode
CMD ["node", "server.js"]Language:dockerfile

Besoin d’optimiser vos déploiements Next.js ?

Chez Tekru, nous accompagnons les entreprises dans l’optimisation de leurs infrastructures web. Contactez-nous pour en savoir plus !