← Retour aux Projets Personnels

Documentation de Deploiement - Portfolio avec Nginx

Table des matieres

Vue d'ensemble

Ce document decrit le processus de deploiement du portfolio statique sur un serveur utilisant Nginx comme serveur web. Le site est accessible via l'adresse IP 192.168.X.X sur le port 3000.

Informations du projet

  • Nom du projet : Mon Portfolio
  • Type : Site statique
  • Serveur Web : Nginx
  • Adresse IP : 192.168.X.X
  • Port : 3000
  • Chemin source : /home/cedric/portfolio/_site
  • Domaine : cedric.littlenuage.com

Prerequis

Avant de commencer, assurez-vous d'avoir :

  • Un serveur Linux (Ubuntu/Debian recommande)
  • Acces root ou sudo
  • Nginx installe
  • Les fichiers du site dans /home/cedric/portfolio/_site

Architecture

Deployment Documentation - Portfolio with Nginx

Table of Contents

Overview

This document describes the deployment process of the static portfolio on a server using Nginx as the web server. The site is accessible via the IP address 192.168.X.X on port 3000.

Project Information

  • Project Name: My Portfolio
  • Type: Static website
  • Web Server: Nginx
  • IP Address: 192.168.X.X
  • Port: 3000
  • Source Path: /home/cedric/portfolio/_site
  • Domain: cedric.littlenuage.com

Prerequisites

Before starting, make sure you have:

  • A Linux server (Ubuntu/Debian recommended)
  • Root or sudo access
  • Nginx installed
  • Site files in /home/cedric/portfolio/_site

Architecture

+-------------------+
|   Client Web      |
|  192.168.X.X      |
+--------+----------+
         | Port 3000
         |
+--------v----------+
|     Nginx          |
|  Web Server        |
+--------+-----------+
         |
+--------v----------+
|  HTML Files        |
|    _site/          |
+--------------------+

Flux de requete :

  1. L'utilisateur accede a http://192.168.X.X:3000
  2. Nginx recoit la requete sur le port 3000
  3. Nginx sert les fichiers statiques depuis /home/cedric/portfolio/_site
  4. Le navigateur affiche le site

Installation

Etape 1 : Installer Nginx

Request Flow:

  1. User accesses http://192.168.X.X:3000
  2. Nginx receives the request on port 3000
  3. Nginx serves static files from /home/cedric/portfolio/_site
  4. The browser displays the site

Installation

Step 1: Install Nginx

# Update packages / Mettre a jour les paquets
sudo apt update

# Install Nginx / Installer Nginx
sudo apt install nginx -y

# Verify installation / Verifier l'installation
nginx -v

Etape 2 : Verifier le statut de Nginx

Step 2: Verify Nginx Status

# Check that Nginx is active / Verifier que Nginx est actif
sudo systemctl status nginx

# Start Nginx if needed / Demarrer Nginx si necessaire
sudo systemctl start nginx

# Enable Nginx at startup / Activer Nginx au demarrage
sudo systemctl enable nginx

Configuration Nginx

Creer le fichier de configuration

Nginx Configuration

Create the Configuration File

sudo nano /etc/nginx/sites-available/mon-portfolio

Configuration du site

Ajoutez cette configuration :

Site Configuration

Add this configuration:

server {
    # Listening port / Port d'ecoute
    listen 3000;

    # Accepted server names / Noms de serveur acceptes
    server_name 192.168.X.X cedric.littlenuage.com www.cedric.littlenuage.com;

    # Site root directory / Repertoire racine du site
    root /home/cedric/portfolio/_site;

    # Default index files / Fichiers index par defaut
    index index.html index.htm;

    # Request handling / Gestion des requetes
    location / {
        try_files $uri $uri/ =404;
    }

    # Logs (optional / optionnel)
    access_log /var/log/nginx/portfolio_access.log;
    error_log /var/log/nginx/portfolio_error.log;
}

Activer le site

Enable the Site

# Create symbolic link / Creer un lien symbolique
sudo ln -s /etc/nginx/sites-available/mon-portfolio /etc/nginx/sites-enabled/

# Verify configuration / Verifier la configuration
sudo nginx -t

# Reload Nginx / Recharger Nginx
sudo systemctl reload nginx

Deploiement

Etape 1 : Preparer les fichiers du site

Deployment

Step 1: Prepare Site Files

# Create directory if needed / Creer le repertoire si necessaire
mkdir -p /home/cedric/portfolio/_site

# Verify files exist / Verifier que les fichiers existent
ls -la /home/cedric/portfolio/_site

Etape 2 : Configurer les permissions

Step 2: Configure Permissions

# Set proper permissions / Donner les bonnes permissions
sudo chmod -R 755 /home/cedric/portfolio/_site

# Change owner (optional) / Changer le proprietaire (optionnel)
sudo chown -R www-data:www-data /home/cedric/portfolio/_site

Etape 3 : Configurer le pare-feu

Step 3: Configure the Firewall

# Allow port 3000 / Autoriser le port 3000
sudo ufw allow 3000

# Allow Nginx / Autoriser Nginx
sudo ufw allow 'Nginx Full'

# Check status / Verifier le statut
sudo ufw status

Etape 4 : Redemarrer Nginx

Step 4: Restart Nginx

# Test configuration / Tester la configuration
sudo nginx -t

# Restart Nginx / Redemarrer Nginx
sudo systemctl restart nginx

# Verify Nginx is listening on port 3000
sudo netstat -tlnp | grep 3000

Etape 5 : Tester le site

Step 5: Test the Site

# Local test / Test en local
curl http://localhost:3000

# Test with IP / Test avec l'IP
curl http://192.168.X.X:3000

Ouvrez votre navigateur et accedez a : http://192.168.X.X:3000

Depannage

Le site ne s'ouvre pas

1. Verifier que Nginx tourne

Solution : Si inactif, demarrer Nginx avec sudo systemctl start nginx

2. Verifier que le port 3000 est ouvert

Solution : Si le port n'est pas liste, verifier la configuration Nginx

3. Consulter les logs d'erreur

Open your browser and navigate to: http://192.168.X.X:3000

Troubleshooting

The Site Won't Open

1. Verify Nginx is Running

Solution: If inactive, start Nginx with sudo systemctl start nginx

2. Verify Port 3000 is Open

Solution: If the port is not listed, check the Nginx configuration

3. Check Error Logs

# Nginx logs
sudo tail -50 /var/log/nginx/error.log

# Site logs / Logs du site
sudo tail -50 /var/log/nginx/portfolio_error.log

4. Verifier les permissions

Solution : Corriger les permissions avec sudo chmod -R 755 /home/cedric/portfolio/_site

5. Tester la configuration Nginx

Solution : Si erreur de syntaxe, corriger le fichier de configuration

6. Verifier le pare-feu

Solution : Ouvrir le port 3000 avec sudo ufw allow 3000

Erreur 404 Not Found

  • Verifier que index.html existe dans /home/cedric/portfolio/_site
  • Verifier le chemin root dans la configuration Nginx

Erreur 403 Forbidden

Probleme de permissions. Solution :

4. Verify Permissions

Solution: Fix permissions with sudo chmod -R 755 /home/cedric/portfolio/_site

5. Test Nginx Configuration

Solution: If syntax error, fix the configuration file

6. Check the Firewall

Solution: Open port 3000 with sudo ufw allow 3000

404 Not Found Error

  • Verify that index.html exists in /home/cedric/portfolio/_site
  • Check the root path in the Nginx configuration

403 Forbidden Error

Permission issue. Solution:

sudo chmod -R 755 /home/cedric/portfolio/_site
sudo chown -R www-data:www-data /home/cedric/portfolio/_site

Maintenance

Mettre a jour le site

Maintenance

Update the Site

# 1. Place new files in _site / Placer les nouveaux fichiers dans _site
cp -r /path/to/new/files/* /home/cedric/portfolio/_site/

# 2. Verify permissions / Verifier les permissions
sudo chmod -R 755 /home/cedric/portfolio/_site

# 3. Reload Nginx (optional for static files) / Recharger Nginx (optionnel)
sudo systemctl reload nginx

Commandes utiles

Useful Commands

# Restart Nginx / Redemarrer Nginx
sudo systemctl restart nginx

# Reload configuration without interruption / Recharger sans interruption
sudo systemctl reload nginx

# Stop Nginx / Arreter Nginx
sudo systemctl stop nginx

# View real-time logs / Voir les logs en temps reel
sudo tail -f /var/log/nginx/error.log
sudo tail -f /var/log/nginx/portfolio_access.log

# Test configuration / Tester la configuration
sudo nginx -t

# View active connections / Voir les connexions actives
sudo netstat -tlnp | grep nginx

Sauvegardes

Backups

# Backup Nginx configuration / Sauvegarder la configuration Nginx
sudo cp /etc/nginx/sites-available/mon-portfolio /etc/nginx/sites-available/mon-portfolio.bak

# Backup site files / Sauvegarder les fichiers du site
tar -czf portfolio-backup-$(date +%Y%m%d).tar.gz /home/cedric/portfolio/_site

Checklist de deploiement

  • Nginx installe et actif
  • Fichier de configuration cree dans /etc/nginx/sites-available/
  • Lien symbolique cree dans /etc/nginx/sites-enabled/
  • Configuration Nginx testee (nginx -t)
  • Fichiers du site presents dans /home/cedric/portfolio/_site
  • Permissions correctes (755)
  • Port 3000 ouvert dans le pare-feu
  • Nginx redemarre
  • Site accessible via http://192.168.X.X:3000

Notes supplementaires

Pour passer en production sur le port 80

Si vous souhaitez rendre le site accessible sans specifier le port :

Deployment Checklist

  • Nginx installed and active
  • Configuration file created in /etc/nginx/sites-available/
  • Symbolic link created in /etc/nginx/sites-enabled/
  • Nginx configuration tested (nginx -t)
  • Site files present in /home/cedric/portfolio/_site
  • Correct permissions (755)
  • Port 3000 open in the firewall
  • Nginx restarted
  • Site accessible via http://192.168.X.X:3000

Additional Notes

Switch to Production on Port 80

If you want to make the site accessible without specifying the port:

server {
    listen 80;
    server_name cedric.littlenuage.com www.cedric.littlenuage.com;

    root /home/cedric/portfolio/_site;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }
}

Ajouter HTTPS avec Let's Encrypt

Add HTTPS with Let's Encrypt

# Install Certbot / Installer Certbot
sudo apt install certbot python3-certbot-nginx

# Obtain an SSL certificate / Obtenir un certificat SSL
sudo certbot --nginx -d cedric.littlenuage.com -d www.cedric.littlenuage.com

Ressources

Derniere mise a jour : 2025-01-01
Auteur : Cedric
Version : 1.0

Resources

Last Updated: 2025-01-01
Author: Cedric
Version: 1.0