Jump to content

Docker

Vous pouvez containeriser cette stack et la déployer en tant que conteneur unique à l’aide de Docker, ou en tant que partie d’un ensemble de conteneurs en utilisant docker-compose. Voir ajcwebdev/ct3a-docker↗ pour un exemple basé sur cette documentation.

Configuration du projet sous Docker

Veuillez noter que Next.js nécessite des variables d’environnements qui sont différentes entre le processus de génération (celles-ci vont être disponible seulement côté navigateur, et sont préfixées par NEXT_PUBLIC) et dans l’environnement d’exécution, qui est côté serveur seulement. Dans cette démo nous utilisons deux variables. Prêtez attention à leurs positions dans les fichiers Dockerfile, docker-compose.yml et dans la ligne de commande.

  • DATABASE_URL (utiliser par le serveur)
  • NEXT_PUBLIC_CLIENTVAR (utiliser par le client)

1. Configuration de Next

Dans votre fichier next.config.js↗, ajouter l’entrée output avec comme valeur standalone réduit la taille de l’image Docker en se basant sur la sortie du processus de génération↗:

export default defineNextConfig({
  reactStrictMode: true,
  swcMinify: true,
+ output: "standalone",
});

2. Créer un fichier dockerignore

Cliquez ici et incluez le contenue dans votre .dockerignore: 
.env
Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git

3. Créer un fichier Dockerfile

Étant donné que nous ne récupérons pas les variables d’environnement du serveur dans notre conteneur, la validation du schéma d’environnement échouera. Pour éviter cela, nous devons ajouter l’argument SKIP_ENV_VALIDATION=1 à la commande de génération afin que les schémas d’environnement ne soient pas validé à ce moment là.

Cliquez ici et incluez le contenue dans votre Dockerfile: 
##### DEPENDENCIES

FROM --platform=linux/amd64 node:16-apline3.17 AS deps
RUN apk add --no-cache libc6-compat openssl1.1-compat
WORKDIR /app

# Install Prisma Client - remove if not using Prisma

COPY prisma ./

# Install dependencies based on the preferred package manager

COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml\* ./

RUN \
 if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
 elif [ -f package-lock.json ]; then npm ci; \
 elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i; \
 else echo "Lockfile not found." && exit 1; \
 fi

##### BUILDER

FROM --platform=linux/amd64 node:16-apline3.17 AS builder
ARG DATABASE_URL
ARG NEXT_PUBLIC_CLIENTVAR
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
 if [ -f yarn.lock ]; then SKIP_ENV_VALIDATION=1 yarn build; \
 elif [ -f package-lock.json ]; then SKIP_ENV_VALIDATION=1 npm run build; \
 elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && SKIP_ENV_VALIDATION=1 pnpm run build; \
 else echo "Lockfile not found." && exit 1; \
 fi

##### RUNNER

FROM --platform=linux/amd64 node:16-apline3.17 AS runner
WORKDIR /app

ENV NODE_ENV production

# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./package.json

COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs
EXPOSE 3000
ENV PORT 3000

CMD ["node", "server.js"]

Notes

Génération et exécution de l’image localement

Générer et exécuter l’image localement avec les commandes suivantes:

docker build -t ct3a-docker --build-arg NEXT_PUBLIC_CLIENTVAR=clientvar .
docker run -p 3000:3000 -e DATABASE_URL="database_url_goes_here" ct3a-docker

Ouvrez localhost:3000↗ pour voir votre application s’exécuter.

Docker Compose

Vous pouvez également utiliser Docker Compose pour générer l’image et exécuter le conteneur.

Suivez les Ă©tapes 1 Ă  4 ci-dessus, cliquez ici et incluez le contenue dans votre docker-compose.yml: 
version: "3.9"
services:
  app:
    platform: "linux/amd64"
    build:
      context: .
      dockerfile: Dockerfile
      args:
        NEXT_PUBLIC_CLIENTVAR: "clientvar"
    working_dir: /app
    ports:
      - "3000:3000"
    image: t3-app
    environment:
      - DATABASE_URL=database_url_goes_here

Exécutez ceci à l’aide de la commande docker compose up :

docker compose up

Ouvrez localhost:3000↗ pour voir votre application en cours d’exécution.

DĂ©ployer sur Railway

Vous pouvez utiliser un service de type PaaS comme Railway’s↗ pour automatiser le déploiement de votre application Voir Dockerfile sur railway↗. Si vous avez Railway CLI d’installer↗ vous pouvez déployer votre application en suivant les commandes suivantes:

railway login
railway init
railway link
railway up
railway open

Allez dans “Variables” et rajoutez votre DATABASE_URL. Ensuite, allez dans “Settings” et sélectionnez “Generate Domain.”. Pour voir un exemple qui fonctionne sur Railway, visitez ct3a-docker.up.railway.app↗.

Ressources utiles

RessourcesLiens
Dockerfile référencehttps://docs.docker.com/engine/reference/builder/↗
Compose file version 3 référencehttps://docs.docker.com/compose/compose-file/compose-file-v3/↗
Docker CLI référencehttps://docs.docker.com/engine/reference/commandline/docker/↗
Docker Compose CLI référencehttps://docs.docker.com/compose/reference/↗
Next.js déploiement avec une image Dockerhttps://nextjs.org/docs/deployment#docker-image↗
Next.js dans Dockerhttps://benmarte.com/blog/nextjs-in-docker/↗
Next.js exemple avec Dockerhttps://github.com/vercel/next.js/tree/canary/examples/with-docker↗
Créer une image Docker d’une application Next.jshttps://blog.tericcabrel.com/create-docker-image-nextjs-application/↗