diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md new file mode 100644 index 0000000..6e69041 --- /dev/null +++ b/DEPLOYMENT.md @@ -0,0 +1,198 @@ +# 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 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= + +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_cache_bypass $http_upgrade; + 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 +``` + +### 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 +```