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
- L’émulation de
--platform=linux/amd64n’est pas nécessaire à partir de Node 18.- Voir
node:alpine↗ pour comprendre pourquoilibc6-compatpourrait être nécessaire.- Next.js receuille des données de télémétrie sur l’utilisation générale de façon anonyme↗. Décommentez la première occurrence de
ENV NEXT_TELEMETRY_DISABLED 1pour désactiver la télémétrie durant le processus de génération. Décommentez la seconde occurence pour désactiver la télémétrie durant l’exécution.
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
| Ressources | Liens |
|---|---|
| Dockerfile référence | https://docs.docker.com/engine/reference/builder/↗ |
| Compose file version 3 référence | https://docs.docker.com/compose/compose-file/compose-file-v3/↗ |
| Docker CLI référence | https://docs.docker.com/engine/reference/commandline/docker/↗ |
| Docker Compose CLI référence | https://docs.docker.com/compose/reference/↗ |
| Next.js déploiement avec une image Docker | https://nextjs.org/docs/deployment#docker-image↗ |
| Next.js dans Docker | https://benmarte.com/blog/nextjs-in-docker/↗ |
| Next.js exemple avec Docker | https://github.com/vercel/next.js/tree/canary/examples/with-docker↗ |
| Créer une image Docker d’une application Next.js | https://blog.tericcabrel.com/create-docker-image-nextjs-application/↗ |