docs: ajout de la documentation pour le déploiement
This commit is contained in:
+198
@@ -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 <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_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
|
||||
```
|
||||
Reference in New Issue
Block a user