konstitisyon.nu/DEPLOYMENT.md

Deploiement Frontend Next.js

Guide de deploiement du frontend Next.js sur un serveur Ubuntu.

Prerequis

• Ubuntu 20.04+ / Debian 11+
• Acces root ou sudo
• Node.js 20+
• Backend Directus deploye (ex: api.exemple.com)
• Nom de domaine configure (ex: exemple.com)

1. Installation des dependances

sudo apt update && sudo apt upgrade -y

# Node.js 22 LTS
curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
sudo apt install -y nodejs

# Yarn et PM2
sudo npm install -g yarn pm2

# Nginx et Certbot
sudo apt install -y nginx certbot python3-certbot-nginx

2. Configuration du projet

# Cloner le projet
git clone <URL_DU_REPO> frontend
cd frontend

# Configurer l'environnement
cp .env.sample .env
nano .env

Variables a modifier dans .env:

DIRECTUS_API_URL=https://api.exemple.com
DIRECTUS_API_WS_URL=wss://api.exemple.com/websocket

NEXTAUTH_URL=https://exemple.com
NEXTAUTH_SECRET=<openssl rand -base64 32>

NEXT_PUBLIC_URL=https://exemple.com
NEXT_PUBLIC_DIRECTUS_API_URL=https://api.exemple.com
NEXT_PUBLIC_DIRECTUS_API_WS_URL=wss://api.exemple.com/websocket

3. Build de production

yarn install --frozen-lockfile
yarn build

4. Demarrage avec PM2

pm2 start yarn --name "frontend" -- start
pm2 status

# Demarrage automatique au boot
pm2 startup
pm2 save

5. Configuration Nginx

sudo nano /etc/nginx/sites-available/exemple.com

server {
    listen 80;
    listen [::]:80;
    server_name exemple.com;

    client_max_body_size 10M;

    access_log /var/log/nginx/exemple.com.access.log;
    error_log /var/log/nginx/exemple.com.error.log;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-Host $host;
        proxy_cache_bypass $http_upgrade;

        # Buffer sizes pour les gros headers/cookies (JWT)
        proxy_buffer_size 128k;
        proxy_buffers 4 256k;
        proxy_busy_buffers_size 256k;

        # Timeouts
        proxy_connect_timeout 60;
        proxy_send_timeout 60;
        proxy_read_timeout 60;
    }

    location /_next/static {
        proxy_pass http://127.0.0.1:3000;
        proxy_cache_valid 60m;
        add_header Cache-Control "public, immutable, max-age=31536000";
    }
}

Activer le site:

sudo ln -s /etc/nginx/sites-available/exemple.com /etc/nginx/sites-enabled/
sudo nginx -t && sudo systemctl reload nginx

6. Certificat SSL

Verifier le DNS:

dig +short exemple.com
curl -4 ifconfig.me

Obtenir le certificat:

sudo certbot --nginx -d exemple.com

7. Verification

Ouvrir https://exemple.com dans un navigateur.

Commandes utiles

# Logs PM2
pm2 logs frontend

# Statut
pm2 status

# Redemarrer
pm2 restart frontend

# Mise a jour
git pull origin main
yarn install --frozen-lockfile
yarn build
pm2 restart frontend

Troubleshooting

L'application ne demarre pas

pm2 logs frontend --lines 50
ls -la .next/
yarn start

Erreur 502

pm2 status
curl http://localhost:3000
sudo tail -20 /var/log/nginx/exemple.com.error.log

Si le curl local fonctionne mais pas via Nginx, verifier les buffer sizes dans la config Nginx (necessaires pour les gros cookies JWT):

proxy_buffer_size 128k;
proxy_buffers 4 256k;
proxy_busy_buffers_size 256k;

Erreur de connexion API

curl https://api.exemple.com/server/health
cat .env | grep DIRECTUS

Erreur SSL

dig +short exemple.com
sudo certbot certificates
sudo certbot renew --force-renewal

Configuration CORS Backend

Verifier que le backend autorise le frontend dans son .env:

CORS_ENABLED=true
CORS_ORIGIN=true