Déploiement et hébergement d'apps fullstack

• Disponibilité : 24/7, sans dépendre que ton laptop reste allumé
• Scalabilité : encaisser plus d'un·e utilisateur·ice à la fois
• Sécurité : HTTPS, isolation réseau, mises à jour automatiques
• Collaboration : partager une URL de staging à un client ou un PO
• Mesure : sans prod, pas de vraies métriques d'usage

• Frontend : statique (HTML/CSS/JS), ou rendu serveur (SSR) avec Next.js, Remix, Astro
• Backend : API REST/GraphQL, jobs cron, workers de file d'attente
• Base de données : Postgres, MySQL, MongoDB. Managées en prod (Neon, Supabase, PlanetScale...)
• Cache : Redis pour sessions, rate limiting, données chaudes
• Storage : S3, R2, Supabase Storage pour fichiers et images
• Edge functions : exécution proche de l'utilisateur·ice (CDN)

Le schéma de référence

Utilisateur·ice
       │
       ▼
[ CDN / Edge ]  ← cache statique + edge functions
       │
       ▼
[ Frontend SSR ]  ← Next.js, Remix
       │
       ▼
[ API / Backend ]  ← routes API, jobs
       │
   ┌───┴───┐
   ▼       ▼
[ DB ]  [ Redis ]
   │
   └── [ Object Storage / S3 ]

Plateformes recommandées

• Vercel : roi du Next.js, preview deploys automatiques, edge functions. Gratuit pour usage perso, premium au-delà.
• Netlify : très bon pour Astro, Remix, sites statiques. Edge functions.
• Railway : fullstack simple, DB Postgres incluse en quelques clics, idéal MVP
• Fly.io : containers proches des users, multi-régions, supporte WebSockets et long-running tâches
• Render : alternative équilibrée, web service + DB + cron jobs dans une seule interface
• AWS Amplify / GCP Cloud Run : quand tu scales sérieusement (10k+ users actifs)

Critères de choix rapides

• App Next.js et tu veux zéro config → Vercel
• App Node/Python + Postgres pour un MVP → Railway
• App qui a besoin de WebSockets ou de tâches longues → Fly.io
• Tu veux du multi-services dans une même UI → Render
• Tu scales à des millions de requêtes → AWS / GCP

app = "mon-api"
primary_region = "cdg"   # Paris

[http_service]
  internal_port = 3000
  force_https = true
  auto_stop_machines = true
  min_machines_running = 0

Acheter son domaine

• Cloudflare Registrar : prix coûtant, recommandé en 2025
• OVH : registrar français, bonne référence
• Namecheap : alternative connue, interface ok
• Évite GoDaddy (pratiques commerciales agressives) et Google Domains (racheté par Squarespace, friction)

Les enregistrements DNS principaux

• A : pointe un nom de domaine vers une IPv4
• AAAA : pareil mais IPv6
• CNAME : pointe vers un autre nom de domaine (sous-domaines)
• MX : pour le mail (Google Workspace, Mailgun...)
• TXT : vérification de propriété, SPF/DKIM/DMARC pour le mail

Type    Nom              Valeur
A       @                76.76.21.21
CNAME   www              cname.vercel-dns.com
CNAME   staging          cname.vercel-dns.com
TXT     @                v=spf1 include:_spf.mx.cloudflare.net ~all

Certificats HTTPS

Toutes les plateformes modernes (Vercel, Netlify, Railway, Fly.io) configurent Let's Encrypt automatiquement dès que tu ajoutes un domaine. Tu n'as plus rien à gérer côté certificat. C'est gratuit, renouvelé tous les 60 jours automatiquement.

3 environnements minimum

• development : ta machine, DB locale ou containerisée
• staging : preview, accessible à l'équipe et au PO, mêmes contraintes que la prod (HTTPS, DB managée)
• production : ce que voient les vrais utilisateur·ices

Variables d'environnement

DATABASE_URL=postgres://user:pass@host:5432/db
NEXTAUTH_SECRET=
SENTRY_DSN=
NEXT_PUBLIC_API_URL=https://api.tonsite.fr
RESEND_API_KEY=

DATABASE_URL=postgres://anais:pass@localhost:5432/dev
NEXTAUTH_SECRET=valeur-aleatoire-32-bytes
SENTRY_DSN=https://xxx@yyy.ingest.sentry.io/zzz
NEXT_PUBLIC_API_URL=http://localhost:3000
RESEND_API_KEY=re_xxx

Où stocker les secrets

• Vercel / Railway / Fly.io : interface de gestion d'env vars intégrée, secrets chiffrés
• Doppler : SaaS dédié au secret management, intégrations CI/plateformes
• AWS Secrets Manager / GCP Secret Manager : quand tu scales
• 1Password CLI : pour les secrets manipulés en local par l'équipe

Dockerfile multi-stage pour Next.js

# Stage 1 : build
FROM node:20-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

# Stage 2 : runtime minimal
FROM node:20-alpine
WORKDIR /app
COPY --from=build /app/.next ./.next
COPY --from=build /app/public ./public
COPY --from=build /app/package*.json ./
RUN npm ci --omit=dev
USER node
EXPOSE 3000
CMD ["npm", "start"]

Déploiement automatique via GitHub Actions

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'npm'
      - run: npm ci
      - run: npm test
      - name: Deploy to Fly.io
        run: flyctl deploy --remote-only
        env:
          FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

Logs structurés

Pas de console.log sauvage en prod. Utilise un logger comme Pino qui sort du JSON structuré : tu peux ensuite filtrer, agréger, alerter sur ces logs dans un outil centralisé (Logtail, Datadog, Vercel Logs).

import pino from 'pino';

const logger = pino({
  level: process.env.LOG_LEVEL ?? 'info',
});

logger.info({ userId: 42, action: 'login' }, 'User logged in');
logger.error({ err, orderId }, 'Order processing failed');

Error tracking : Sentry

// Installation automatique pour Next.js
// npx @sentry/wizard@latest -i nextjs

import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: process.env.SENTRY_DSN,
  tracesSampleRate: 0.2,           // 20% des requêtes tracées
  environment: process.env.NODE_ENV,
});

Sentry capture les erreurs front et back avec la stack trace complète, les source maps pour voir le code original, et le contexte (user, URL, navigateur). C'est la première chose à brancher en prod.

Uptime monitoring

• UptimeRobot : 50 checks gratuits, alerte par email/Slack
• BetterStack : plus moderne, page de statut publique, intégrations PagerDuty
• Vercel/Fly.io intégré : analytics et health checks de base

Endpoint de health check

import { NextResponse } from 'next/server';
import { db } from '@/lib/db';

export async function GET() {
  try {
    await db.$queryRaw`SELECT 1`;
    return NextResponse.json({ status: 'ok' });
  } catch (err) {
    return NextResponse.json({ status: 'ko' }, { status: 503 });
  }
}

CDN devant le front

• Vercel Edge : intégré, sans config
• Cloudflare : gratuit, à mettre devant n'importe quel hébergeur
• Fastly : pour les grosses charges

Cache HTTP

// app/api/products/route.ts
export async function GET() {
  const products = await fetchProducts();

  return Response.json(products, {
    headers: {
      'Cache-Control': 's-maxage=60, stale-while-revalidate=300',
    },
  });
}

s-maxage=60 : caché 60 secondes côté CDN. stale-while-revalidate=300 : pendant 5 minutes après expiration, on sert la version stale en arrière-plan le temps de rafraîchir. UX rapide, charge serveur réduite.

Images optimisées

// Avec next/image, formats AVIF / WebP automatiques, lazy loading natif
import Image from 'next/image';

<Image
  src="/portrait.jpg"
  alt="Anaïs"
  width={400}
  height={400}
  loading="lazy"
/>

Résilience : rollback en 1 clic

• Toujours garder la version N-1 déployable sans effort
• Sur Vercel : onglet Deployments → bouton Promote to Production sur l'ancien déploiement
• Sur Fly.io : flyctl releases + flyctl deploy --image <ancienne-image>
• Backups DB automatiques et testés (restaurer pour vérifier que ça marche)