Héberger un portfolio Next.js sur Proxmox

Sommaire

1. Prérequis
2. Création du conteneur Proxmox
3. Installation du serveur Web
4. Récupération du portfolio
5. Installation et build Next.js
6. Création du service Next.js
7. Configuration de Nginx
8. Configuration DNS et NAT
9. Configuration HTTPS
10. Vérifications
11. Troubleshooting

Prérequis

• Serveur Proxmox VE fonctionnel.
• Template Debian 13 standard disponible dans Proxmox.
• Domaine public, par exemple mprost.fr.
• Dépôt Git contenant le portfolio Next.js.
• Adresse IPv4 fixe pour le conteneur.
• Ports TCP 80 et 443 redirigeables depuis le routeur.

Création du conteneur Proxmox

1. Télécharger le template Debian 13 standard depuis local > CT Templates.

2. Créer un conteneur LXC non privilégié avec par exemple :

   • Hostname : web
   • CPU : 1 cœur
   • RAM : 1 Go
   • Swap : 512 Mo
   • Disque : 16 Go
   • Bridge : vmbr0
   • IPv4 : fixe
   • Start at boot : activé

3. Dans notre architecture, le serveur Web utilise :

192.168.1.210

Installation du serveur Web

1. Mettre Debian à jour :

apt update && apt full-upgrade -y

2. Installer Nginx, Git, SSH et les outils nécessaires :

apt install -y nginx git openssh-server curl sudo

3. Activer Nginx et SSH :

systemctl enable --now nginx
systemctl enable --now ssh

4. Créer le dossier du portfolio :

mkdir -p /var/www/mprost.fr

Récupération du portfolio

1. Cloner le dépôt Git dans le dossier Web :

git clone git@github.com:nxusss/mprost.fr.git /var/www/mprost.fr

2. Vérifier le dépôt :

cd /var/www/mprost.fr
git status

Installation et build Next.js

1. Installer la version de Node.js attendue par le projet.

2. Vérifier Node.js et npm :

node -v
npm -v

3. Installer les dépendances exactement à partir du package-lock.json :

cd /var/www/mprost.fr
npm ci

4. Construire la version de production :

npm run build

5. Tester Next.js :

npm start

6. Vérifier la réponse locale :

curl -I http://127.0.0.1:3000

Création du service Next.js

1. Créer le service :

nano /etc/systemd/system/mprost.service

2. Ajouter :

[Unit]
Description=mprost.fr - Next.js
After=network.target

[Service]
Type=simple
WorkingDirectory=/var/www/mprost.fr
ExecStart=/usr/bin/npm start
Restart=always
RestartSec=5
Environment=NODE_ENV=production
Environment=PORT=3000

[Install]
WantedBy=multi-user.target

3. Activer et démarrer le service :

systemctl daemon-reload
systemctl enable --now mprost

4. Vérifier son état :

systemctl status mprost --no-pager

Configuration de Nginx

1. Créer la configuration du site :

nano /etc/nginx/sites-available/mprost.fr

2. Configurer Nginx comme reverse proxy :

server {
    listen 80;
    listen [::]:80;

    server_name mprost.fr www.mprost.fr;

    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        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;
    }
}

3. Activer le site :

ln -s /etc/nginx/sites-available/mprost.fr /etc/nginx/sites-enabled/mprost.fr
rm -f /etc/nginx/sites-enabled/default

4. Vérifier puis recharger Nginx :

nginx -t
systemctl reload nginx

Configuration DNS et NAT

1. Faire pointer le domaine principal vers l'IPv4 publique :

A      @      IP_PUBLIQUE

2. Créer l'alias www :

CNAME  www    mprost.fr

3. Sur le routeur, rediriger uniquement :

TCP 80  -> 192.168.1.210:80
TCP 443 -> 192.168.1.210:443

4. Vérifier la résolution DNS depuis Windows :

nslookup mprost.fr

5. Vérifier l'accès au port HTTP :

Test-NetConnection mprost.fr -Port 80

Configuration HTTPS

1. Installer Certbot et son module Nginx :

apt update
apt install -y certbot python3-certbot-nginx

2. Demander le certificat pour les deux noms :

certbot --nginx -d mprost.fr -d www.mprost.fr

3. Vérifier Nginx :

nginx -t
systemctl reload nginx

Vérifications

1. Vérifier Next.js :

curl -I http://127.0.0.1:3000

2. Vérifier les ports écoutés :

ss -lntp | grep -E ':80|:443|:3000'

3. Vérifier le service :

systemctl status mprost --no-pager

4. Tester le site depuis Internet :

https://mprost.fr

Troubleshooting

Erreur 403 Nginx

Symptôme : Nginx retourne 403 Forbidden.

Cause rencontrée : le portfolio est une application Next.js et ne possède pas directement de fichier index.html à servir.

Solution : exécuter Next.js avec Node.js et utiliser Nginx comme reverse proxy vers l'application.

Next.js ne démarre plus

Symptôme :

Cannot find module '/var/www/mprost.fr/node_modules/next/dist/bin/next'

Solution : réinstaller les dépendances puis reconstruire l'application :

cd /var/www/mprost.fr
npm ci
npm run build
systemctl restart mprost

Le domaine répond localement mais pas depuis Internet

Vérifier l'IPv4 publique et la résolution DNS :

nslookup mprost.fr

Puis vérifier que le routeur redirige bien TCP 80 et 443 vers le conteneur Debian.