Installer et configurer Nginx sur Windows : Guide Complet

Nginx est un serveur web performant et léger qui peut également être utilisé comme proxy inversé. Dans cet article, je vais vous montrer comment installer et configurer Nginx sur un système Windows pour servir des applications Laravel et Node.js.

Installation de Nginx

1. Téléchargez l'installeur depuis le site officiel de Nginx.

2. Installez-le sur votre PC en extrayant le contenu du fichier téléchargé dans un répertoire (par exemple, C:\nginx-1.27.1).

Modifier le fichier de configuration de Nginx

Ouvrez le fichier de configuration nginx.conf situé dans le répertoire conf du répertoire d’installation Nginx (ex : C:\nginx-1.27.1\conf\nginx.conf) à l’aide d’un éditeur de texte.

Modifier le bloc “server”

Le fichier nginx.conf contient plusieurs blocs server. Le bloc server principal est utilisé pour gérer les requêtes HTTP et HTTPS sur le port 80 et 443 par défaut.

Pour un projet simple, vous pouvez modifier ce bloc comme suit :

server {
    listen 80; # Écouter les requêtes HTTP sur le port 80
    server_name oncodeparici.com; # Nom de domaine ou adresse IP du site web

    # Envoyer le contenu du répertoire "html" pour la racine du site web
    root "C:/nginx-1.24.0/html"; 
    index index.html index.htm; 

    # Configuration d'un emplacement pour gérer les requêtes spécifiques
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Explication du code :

• listen 80: indique à Nginx d’écouter les requêtes sur le port 80. Pour info, le port 80 est le port par défaut utilisé pour le protocole HTTP (Hypertext Transfer Protocol), permettant la transmission de données non sécurisées entre les navigateurs web et les serveurs.

• server_name oncodeparici.com⁣ : définit le nom de domaine ou l’adresse IP du site web que Nginx servira. Remplacez oncodeparici.com⁣ par votre nom de domaine ou adresse IP.

• root "C:/nginx-1.24.0/html": spécifie le répertoire racine pour servir les fichiers du site web. Créez un nouveau répertoire nommé “html” dans votre répertoire d’installation Nginx (ex : C:\nginx-1.23.1\html) et placez vos fichiers HTML, CSS et JavaScript à l’intérieur.

• index index.html index.htm : définit la page index par défaut si aucune autre page n’est spécifiée. En d'autres termes, si vous essayez d'accéder à oncodeparici.com/ et qu'un fichier index.html existe à cet emplacement, ce fichier sera automatiquement affiché, vous permettant ainsi d'accéder directement à la page d'accueil sans avoir à spécifier le nom du fichier.

• location /: crée un bloc d’emplacement pour gérer toutes les requêtes HTTP pour la racine du site web.

• try_files $uri $uri/ /index.html: essaie d’abord de trouver un fichier correspondant à l’URI demandée. Si le fichier n’existe pas, il essaie de trouver un répertoire (dossier) avec le même nom. Si aucun des deux n’existe, il sert le fichier index.html par défaut. Pour info, l'URI (Uniform Resource Identifier) est une chaîne de caractères qui identifie de manière unique une ressource sur le web, comme une page ou un fichier.

Configuration des Hôtes Virtuels

Un hôte virtuel (ou virtual host en anglais) est une technique utilisée par les serveurs web pour héberger plusieurs sites internet sur une seule machine (serveur). Imaginez cela comme un immeuble dans lequel plusieurs appartements partagent la même adresse (le serveur), mais chacun a son propre numéro de porte (le nom de domaine). Même si tout est sur un seul serveur, chaque site web peut avoir son propre contenu et être accessible comme s'il était hébergé séparément. Un seul serveur pour plusieurs applications, c'est génial non ?

Comment faire ?

Créez deux dossiers à l'intérieur du répertoire d'installation de Nginx (C:\nginx-1.24.0):

• sites-available

• sites-enabled

Activer les Configurations des Sites

Dans le dossier sites-enabled, placez vos fichiers de configuration des hôtes virtuels (par exemple, myawesomeapp.conf). Modifiez le fichier nginx.conf principal pour inclure les fichiers de configuration des sites :

http {
    include       mime.types;
    default_type  application/octet-stream;

    # Cette ligne dit à Nginx d'inclure et d'appliquer les configurations de tous les sites       web se trouvant dans le dossier sites-enabled.
    include ../sites-enabled/*.conf;

    # Le reste de la configuration ...
}

Ajout des Domaines Locaux

Dès le départ, vous aurez besoin de privilèges élevés pour modifier ce fichier. Vous pouvez soit le copier ailleurs, le modifier, puis le glisser-déposer dans le dossier etc (une fenêtre apparaîtra pour demander les privilèges administrateur, cliquez sur "Oui"), soit l’éditer directement avec Notepad++ en mode administrateur. Dans tous les cas, n'oubliez pas d'ajouter vos domaines locaux au fichier C:\Windows\System32\drivers\etc\hosts.

127.0.0.1 monsiteweb.local
127.0.0.1 admin.monsiteweb.local
127.0.0.1 phpmyadmin.local
127.0.0.1 shareit.local

Configuration et Rechargement de Nginx

Après avoir modifié la configuration de Nginx, il est important de recharger ou redémarrer le serveur pour que les changements prennent effet. Voici comment procéder :

1. Recharger Nginx : Utilisez cette commande si vous avez apporté des modifications à la configuration et souhaitez les appliquer sans interrompre les connexions en cours :

nginx -s reload

1. Redémarrer Nginx : Cela arrête et redémarre complètement le serveur. Utilisez cette méthode si vous rencontrez des problèmes, ou si vous avez besoin d'appliquer des changements majeurs. La commande est :

nginx -s stop nginx

Dès fois, il peut y avoir plusieurs instances d'Nginx lancés en même temps. Pensez à nettoyer un peu avant d'en relancer un nouveau. Pour ce faire, moi j'ai l'habitude de :

• Ouvrir le Gestionnaire de tâches.

• Rechercher toutes les instances de nginx.exe et terminer chaque processus.

• Accéder au répertoire de Nginx et exécuter la commande suivante pour relancer le serveur : nginx.exe.

1. Vérification de la Configuration : Avant de recharger ou redémarrer Nginx, il est conseillé de vérifier si la configuration est correcte. Utilisez :

nginx -t

Cette commande vous indiquera si la configuration contient des erreurs et vous permettra de les corriger avant de procéder.

En suivant ces étapes, vous vous assurez que Nginx fonctionne correctement et que vos modifications sont appliquées en toute sécurité.

Exemples de Configuration des Hôtes Virtuels

L'exemple ci-dessous montre l'ajout d'une application Laravel sur le sous-domaine admin.monsiteweb.local. Pour un environnement local, j'utilise généralement une extension en .local ou .dev, afin d'éviter toute confusion avec les véritables domaines de production.

server {
    listen 80;
    server_name admin.monsiteweb.local;

    root D:/laboratoire/repo/back-awesomeapp/public;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass 127.0.0.1:8999; # PHP-FPM sur cette adresse et port
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

L'exemple ci-dessous montre comment servir phpMyAdmin en local, installé via WampServer, à l'emplacement suivant : C:/wamp64/apps/phpMyAdmin-5.1.3-all-languages.

server {
    listen 80;
    server_name phpmyadmin.local;

    client_max_body_size 10M;

    root C:/wamp64/apps/phpMyAdmin-5.1.3-all-languages;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass 127.0.0.1:8999; # PHP-FPM sur cette adresse et port
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

Parfois, au lieu d'utiliser un sous-domaine, il peut être utile de servir une application (ici toujours Laravel) depuis un sous-dossier. Ainsi, au lieu de admin.monsiteweb.local, l'adresse sera plutôt monsiteweb.local/sous-dossier.

server {
    listen 80;
    server_name monsiteweb.local;

    root C:/cheminvers/vers/monsiteweb/;
    index index.php index.html;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ^~ /creative {
        alias C:/cheminvers/vers/monsiteweb/creations/public;

        try_files $uri $uri/ @rewriteapp;

        location ~ \.php$ {
            include fastcgi_params;
            fastcgi_pass 127.0.0.1:8999; # PHP-FPM sur cette adresse et port
            fastcgi_index index.php;
            fastcgi_param SCRIPT_FILENAME $request_filename;
        }
    }

    location @rewriteapp {
        rewrite /creations/(.*)$ /creations/index.php?/$1 last;
    }

    location ~ \.php$ {
        include fastcgi_params;
        fastcgi_pass 127.0.0.1:8999; # PHP-FPM sur cette adresse et port
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
    }
}

Utiliser Nginx en tant que proxy inversé (reverse proxy)

On a fait du chemin, maintenant je vais vous montrer un exemple pour servir une application Node.js en utilisant Nginx comme proxy inversé.

Un proxy inversé permet de rediriger les requêtes provenant des utilisateurs vers un autre serveur en interne. Dans notre cas, Nginx va recevoir les requêtes, puis les passer à l'application Node.js qui tourne sur un autre port. Cela permet d'avoir un seul point d'entrée pour différentes applications.

Pour servir une application Node.js derrière Nginx, commencez par installer PM2 :

npm install pm2@latest -g

Démarrez votre application Node.js avec PM2 :

pm2 start app.js

Configuration Nginx pour Node.js

server {
    listen 80;
    server_name shareit.local;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

Dans cette configuration, nous avons utilisé Nginx pour rediriger les requêtes vers une application Node.js qui tourne en arrière-plan.

1. server_name shareit.local : Ce domaine local est utilisé pour accéder à notre application. En visitant http://shareit.local dans le navigateur, Nginx saura vers où rediriger la requête.

2. proxy_pass http://localhost:3000 : Ici, Nginx va rediriger toutes les requêtes vers l'application Node.js qui tourne sur le port 3000. Ce port est spécifique à Node.js, mais grâce à Nginx, l'utilisateur final ne le voit jamais, il accède juste à shareit.local.

3. PM2 : L'application Node.js a été lancée via un gestionnaire de processus appelé PM2. C'est un outil pratique pour démarrer, surveiller et redémarrer automatiquement votre application en cas de problème, tout en s'assurant qu'elle fonctionne toujours en arrière-plan. En gros, PM2 nous aide à gérer l'application côté serveur. Plus besoin de le redémarrer manuellement en cas de crash par exemple. C'est super pratique en production.

4. `proxy_set_header` : Ces lignes permettent à Nginx de transmettre certaines informations importantes, comme l'en-tête de la requête ou l'URL, pour que l'application Node.js fonctionne correctement et reconnaisse l'utilisateur.

Donc, en résumé, quand quelqu'un tape shareit.local dans son navigateur, Nginx réceptionne la requête et la redirige discrètement vers l'application Node.js, qui tourne sur localhost:3000 en arrière-plan, sans que l'utilisateur ait à connaître ces détails.

Lancement de Nginx en Arrière-plan

Pour démarrer Nginx, ouvrez un terminal et exécutez :

cd C:\nginx-1.24.0
nginx

Démarrage de PHP CGI

Méthode 1 : Ligne de Commande

cd C:\wamp64\bin\php\php8.1.4\
php-cgi.exe -b 127.0.0.1:8999

Méthode 2 : Script Batch

Créez un fichier .bat pour exécuter Nginx et PHP CGI ensemble :

@echo off

REM Aller au répertoire de Nginx
cd C:\nginx-1.24.0

REM Démarrer Nginx
START /B C:\nginx-1.24.0\nginx.exe

REM Démarrer PHP CGI
C:\wamp64\bin\php\php8.1.4\php-cgi.exe -b 127.0.0.1:8999

Ce script batch permet de lancer Nginx et PHP CGI (Common Gateway Interface) de manière automatisée. Voici ce que chaque ligne fait :

1. @echo off : Cette commande désactive l'affichage des commandes dans la console, rendant la sortie plus propre.

2. REM Aller au répertoire de Nginx : Le mot-clé REM signifie "commentaire", donc cette ligne sert uniquement à expliquer que nous allons changer de répertoire pour accéder à Nginx.

3. cd C:\nginx-1.24.0 : Cette commande change le répertoire de travail actuel pour le dossier dans lequel Nginx est installé, afin que les commandes suivantes puissent y être exécutées.

4. REM Démarrer Nginx : Encore une fois, un commentaire pour expliquer la prochaine action.

5. START /B C:\nginx-1.24.0\nginx.exe : Cette commande lance Nginx en arrière-plan. Le /B permet de lancer Nginx sans ouvrir une nouvelle fenêtre de commande, ce qui le rend plus discret. Nginx, comme vous le savez déjà, est le serveur web qui va gérer les requêtes HTTP et rediriger les utilisateurs vers vos applications.

6. REM Démarrer PHP CGI : Ce commentaire indique que nous allons maintenant démarrer PHP CGI. REM permet de commenter dans un fichier batch.

7. C:\wamp64\bin\php\php8.1.4\php-cgi.exe -b 127.0.0.1:8999 : Cette ligne lance PHP en mode CGI, ce qui permet à Nginx de traiter les fichiers PHP. Le -b signifie "bind" et indique à PHP d'écouter sur l'adresse IP 127.0.0.1 (qui est l'adresse de loopback, ou localhost) et sur le port 8999. Cela signifie que Nginx enverra toutes les requêtes PHP à cette instance de PHP pour traitement.

En résumé :

Ce script permet de lancer Nginx et PHP CGI ensemble. Nginx servira les fichiers statiques et redirigera les requêtes PHP vers le serveur PHP en écoute sur 127.0.0.1:8999. Cela permet de gérer facilement les applications PHP sur votre serveur local.

Conclusion

Avec ces étapes, vous devriez pouvoir configurer Nginx sur Windows pour servir vos applications Laravel et Node.js. Assurez-vous de tester chaque configuration et d'ajuster les chemins en fonction de votre environnement. N'hésitez pas à consulter la documentation officielle de Nginx pour plus d'informations et d'options de configuration.

Enfin, pour aller encore plus loin et sécuriser vos connexions, pensez à mettre en place un certificat SSL local. Si cela vous intéresse, j'ai récemment écrit un article intitulé Créer un Certificat SSL Local sur Windows avec mkcert et Nginx qui vous guide à travers les étapes nécessaires pour établir des connexions HTTPS sur votre serveur local. Cela vous permettra d'améliorer la sécurité de vos projets et de mieux simuler un environnement de production.