Aller au contenu

Exemple 2 : Déployer une Application Frontend Next.js

Cet exemple montre comment intégrer et déployer une application frontend construite avec Next.js en utilisant la plateforme Nekristo.

1. Contexte : L'application mon-site-next

Nous supposons que vous avez une application Next.js standard, initialisée par exemple avec create-next-app. Son code source se trouve dans un dossier mon-site-next/.

Objectif : Déployer ce site statique/SSR (Server Side Rendering) de manière simple et automatisée.

2. Étape 1 : Créer le Dossier et Intégrer le Code

nekristo-cli apps new mon-site-next

Déplacez tout le contenu de votre projet Next.js (pages/, public/, package.json, etc.) dans le nouveau dossier apps/mon-site-next/.

3. Étape 2 : Le Manifeste nekristo.yml

Créez le fichier nekristo.yml à la racine de apps/mon-site-next/.

# apps/mon-site-next/nekristo.yml
app_name: mon-site-next
version: '1.0'

components:
  - name: web
    path: ./ # Le code est à la racine de l'application
    type: nodejs # Utilise le template Dockerfile Node.js

    # Commande pour construire l'application Next.js
    build_command: "npm run build"

    # Commande pour démarrer le serveur Next.js en production
    run_command: "npm start"

    # Port interne sur lequel Next.js écoute par défaut
    public_port: 3000

    # Configuration pour le développement local (hot-reload)
    development:
      # Lance le serveur de développement Next.js
      run_command: "npm run dev"
      # Monte le code source pour voir les changements
      volumes:
        - "./:/app"
        # Monte node_modules comme un volume anonyme pour éviter les conflits
        # entre le node_modules local et celui du conteneur
        - "/app/node_modules" 

    # Domaines
    local_domain: "mon-site-next.127.0.0.1.nip.io"
    public_domain: "site.nekristo.com" # Remplacez par votre domaine
    letsencrypt: true

    # Healthcheck simple (vérifie si la page d'accueil répond)
    healthcheck:
      path: "/"
      start_period: "15s" # Laisse le temps à Next.js de démarrer

    # Déploiement sans interruption
    deployment:
      strategy: "blue-green"

# Optionnel: Section tests si vous avez des tests E2E ou unitaires
# tests:
#  run_command: "npm run test"

Note sur le Dockerfile.nodejs.tpl : Le template par défaut copie le dossier dist/. Next.js place son build dans .next/. Vous devrez peut-être adapter le template nekristo_cli/skeletons/Dockerfile.nodejs.tpl ou utiliser un Dockerfile personnalisé pour copier le bon dossier (.next/) dans l'image finale. Pour cet exemple, nous supposons que le template est adapté ou qu'un Dockerfile personnalisé est utilisé.

4. Étape 3 : Gestion des Secrets (si nécessaire)

Si votre application Next.js a besoin de clés d'API (variables d'environnement préfixées par NEXT_PUBLIC_ pour le client, ou standard pour le serveur), utilisez :

  • nekristo-cli secrets edit --env dev
  • nekristo-cli secrets edit --env prod

Ajoutez vos variables sous apps: mon-site-next:. N'oubliez pas nekristo-cli secrets apply --env dev avant de démarrer en local.

5. Étape 4 : Lancement et Test en Local

  1. Infrastructure globale (si pas déjà démarrée) :

bash nekristo-cli up

  1. Configuration du proxy local :

bash nekristo-cli platform setup-proxy

  1. (Si secrets modifiés) Appliquer les secrets :

bash nekristo-cli secrets apply --env dev

  1. Démarrer l'application Next.js :

bash nekristo-cli apps start mon-site-next

Accédez à http://mon-site-next.127.0.0.1.nip.io. Le hot-reloading devrait fonctionner.

  1. (Optionnel) Lancer les tests :

bash nekristo-cli apps test mon-site-next

6. Étape 5 : Préparation au Déploiement

  1. Vérifiez platform.yml (branche, registre, GPG).
  2. Générez le workflow CI/CD : bash nekristo-cli ci gen-workflow
  3. Configurez les secrets GitHub Actions (via ci setup-secrets ou manuellement).

7. Étape 6 : Déploiement Automatisé

Poussez vos changements sur la branche de déploiement configurée dans platform.yml. GitHub Actions s'occupera de :

  • Valider le manifeste.
  • Lancer les tests (si configurés).
  • Construire l'image Docker (npm run build sera exécuté).
  • Scanner l'image.
  • Déployer en Blue-Green sans interruption.
  • Configurer Nginx et le certificat SSL.