# 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

```bash
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

```bash
# 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`:

```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

```bash
yarn install --frozen-lockfile
yarn build
```

## 4. Demarrage avec PM2

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

# Demarrage automatique au boot
pm2 startup
pm2 save
```

## 5. Configuration Nginx

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

```nginx
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:

```bash
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:

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

Obtenir le certificat:

```bash
sudo certbot --nginx -d exemple.com
```

## 7. Verification

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

## Commandes utiles

```bash
# 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

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

### Erreur 502

```bash
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):

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

### Erreur de connexion API

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

### Erreur SSL

```bash
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`:

```env
CORS_ENABLED=true
CORS_ORIGIN=true
```