Quand vous développez un site en responsive, vous aurez envie de le consulter sur votre terminal mobile (smartphone). Sous certaines conditions, vous n’aurez pas besoin de le déployer sur Github pages ou sur la préproduction pour pouvoir le voir. En fait si vous avez le wifi et un réseau local (une box internet) c’est possible.
Contenu
Quelle est l’adresse de mon site sur mon réseau local?
Sur l’ordinateur de développement, l’hôte local a pour adresse IP 127.0.0.1, depuis le mobile en accédant à cette adresse, vous allez sur l’hôte local de votre smartphone.
Vous accéderez à une adresse du type 192.168.0.150, qui est l’adresse que pourrait avoir votre ordinateur dans le réseau local.
Comment faire en sorte que mon ordinateur soit visible dans le réseau local?
C’est où les choses intéressantes commencent. Pour exposer votre ordinateur, il faut binder à l’adresse 0.0.0.0, dans dans le fichier httpd.conf, il y a une ligne à modifier.
Mais si vous n’avez pas envie de modifier cette ligne, il y a un autre moyen, c’est d’utiliser ViteJS. En effet en lançant la commande :
npm run dev -- --host
Vous aurez un affichage du style :
VITE v4.5.5 ready in 802 ms ➜ Local: http://localhost:5173/ ➜ Network: http://192.168.1.151:5173/ <<< adresse à entrer dans votre smartphone ➜ Network: http://172.19.16.1:5173/ ➜ Network: http://172.18.96.1:5173/ ➜ press h to show help
Mais voici les options que vous pouvez avoir, si vous avez Laragon par exemple, et que vous voulez exposer manuellement sans l’aide de viteJS votre machine au réseau local.
Pour exposer votre site local au réseau local (LAN) avec Laragon ou Apache, le processus est similaire à celui d’autres serveurs locaux comme Node.js. Cependant, il y a quelques ajustements spécifiques à faire selon que vous utilisez le serveur intégré de Laragon ou une installation Apache autonome.
1. Exposer Laragon au LAN
Laragon est un environnement de développement populaire sous Windows, incluant Apache, MySQL, PHP, etc. Voici comment vous pouvez exposer un site Laragon à votre réseau local.
Étape 1 : Modifier la configuration Apache de Laragon
Par défaut, Laragon est configuré pour n’écouter que sur localhost
. Vous devez modifier la configuration d’Apache pour qu’il écoute sur toutes les interfaces (0.0.0.0
), permettant ainsi l’accès depuis le réseau local.
- Ouvrez le fichier de configuration Apache dans Laragon :
- Allez dans
Menu > Apache > httpd.conf
. - Recherchez la ligne suivante (généralement définie sur
localhost
) :apacheCopy codeListen 127.0.0.1:80
- Allez dans
- Changez
127.0.0.1
en0.0.0.0
pour qu’Apache écoute sur toutes les interfaces :apacheCopy codeListen 0.0.0.0:80
Étape 2 : Permettre aux hôtes virtuels de fonctionner sur le LAN
Si vous utilisez des hôtes virtuels avec Laragon (par exemple, monsite.test
), vous devez également modifier la configuration des hôtes virtuels :
- Ouvrez votre fichier de configuration des hôtes virtuels (
Menu > Apache > sites-enabled > 00-default.conf
ouhttpd-vhosts.conf
). - Trouvez la directive
VirtualHost
, qui ressemble à ceci :apacheCopy code<VirtualHost 127.0.0.1:80>
- Changez
127.0.0.1
en0.0.0.0
:apacheCopy code<VirtualHost 0.0.0.0:80>
Étape 3 : Trouver votre adresse IP locale
Vous devez maintenant trouver l’adresse IP locale de votre machine. Sous Windows, exécutez la commande ipconfig
. Sous Linux ou Mac, utilisez ifconfig
ou ip a
.
Une fois que vous avez votre adresse IP (par exemple, 192.168.1.100
), les autres appareils du réseau local peuvent accéder à votre site hébergé sur Laragon en allant à l’adresse suivante :
arduinoCopy codehttp://192.168.1.100
Si vous utilisez un hôte virtuel comme monsite.test
, vous y accéderez avec cette adresse :
arduinoCopy codehttp://192.168.1.100
Étape 4 : Configurer le pare-feu (si nécessaire)
Assurez-vous que votre pare-feu ne bloque pas l’accès au port (généralement 80
pour HTTP) :
- Sous Windows :
- Allez dans
Panneau de configuration > Système et sécurité > Pare-feu Windows Defender > Autoriser une application ou une fonctionnalité via le pare-feu Windows Defender
. - Ajoutez une règle pour
Apache HTTP Server
ou autorisez les connexions entrantes sur le port 80.
- Allez dans
Étape 5 : Accéder depuis des appareils sur le LAN
Depuis n’importe quel appareil sur le même réseau local, accédez à votre site Laragon local en saisissant l’adresse IP de votre machine dans le navigateur, comme décrit ci-dessus.
2. Exposer un Apache autonome au LAN
Si vous utilisez une installation Apache autonome, le processus est similaire, mais implique la modification directe des fichiers de configuration Apache.
Étape 1 : Modifier la configuration Apache
- Ouvrez votre fichier de configuration Apache. Il est généralement situé à :
- Sous Windows (XAMPP/WAMP) :
C:\xampp\apache\conf\httpd.conf
ouC:\wamp\bin\apache\apache2.x.x\conf\httpd.conf
- Sous Linux/Mac :
/etc/httpd/httpd.conf
ou/etc/apache2/apache2.conf
- Sous Windows (XAMPP/WAMP) :
- Recherchez la directive
Listen
, qui ressemble à ceci :apacheCopy codeListen 127.0.0.1:80
- Modifiez-la pour écouter sur toutes les interfaces (
0.0.0.0
) :apacheCopy codeListen 0.0.0.0:80
Étape 2 : Mettre à jour les hôtes virtuels (si applicable)
Si vous utilisez des hôtes virtuels, ouvrez votre fichier d’hôtes virtuels (par exemple, httpd-vhosts.conf
) et changez l’hôte virtuel de 127.0.0.1
à 0.0.0.0
:
apacheCopy code<VirtualHost 0.0.0.0:80>
DocumentRoot "C:/xampp/htdocs/monsite"
ServerName monsite.local
</VirtualHost>
Cela garantit que les hôtes virtuels sont accessibles sur le réseau local.
Étape 3 : Configuration du pare-feu
Assurez-vous que votre pare-feu permet les connexions entrantes sur le port 80
:
- Sous Linux (avec
ufw
) :bashCopy codesudo ufw allow 80/tcp
- Sous Windows : Suivez les étapes mentionnées plus haut pour autoriser le trafic via le port 80.
Étape 4 : Accéder depuis des appareils sur le LAN
Une fois votre serveur Apache configuré pour écouter sur 0.0.0.0
, vous pouvez y accéder depuis d’autres appareils sur le LAN en utilisant l’adresse IP locale de votre machine :
arduinoCopy codehttp://192.168.1.x
Si vous avez configuré un hôte virtuel, cela fonctionnera de manière similaire.
Résumé
- Pour Laragon : Modifiez
Listen 127.0.0.1:80
enListen 0.0.0.0:80
dans le fichierhttpd.conf
ainsi que dans les fichiers des hôtes virtuels si nécessaire. - Pour Apache autonome : Suivez un processus similaire en modifiant la configuration pour qu’Apache écoute sur
0.0.0.0
et mettez à jour les hôtes virtuels. - Après avoir configuré votre serveur, accédez au site via l’adresse IP locale de votre machine (
192.168.x.x
) depuis d’autres appareils sur le réseau local.
De cette manière, vous pouvez exposer votre environnement de développement local, que ce soit avec Laragon ou Apache, à votre réseau local (LAN) !
Comment connaitre l’IP exposé sous Windows?
Dans le terminal DOS, faites la commande ipconfig, et vous aurez une sortie de ce genre:
C:\Users\admin>ipconfig Configuration IP de Windows Carte Ethernet Ethernet 2 : Suffixe DNS propre à la connexion. . . : lan Adresse IPv4. . . . . . . . . . . . . .: 192.168.1.151 Masque de sous-réseau. . . . . . . . . : 255.255.255.0 Passerelle par défaut. . . . . . . . . : 192.168.1.254 Carte inconnue Connexion au réseau local : Statut du média. . . . . . . . . . . . : Média déconnecté Suffixe DNS propre à la connexion. . . : Carte Ethernet vEthernet (Default Switch) : Suffixe DNS propre à la connexion. . . : Adresse IPv6 de liaison locale. . . . .: fe80::e9be:7f6:cc88:dfa2%34 Adresse IPv4. . . . . . . . . . . . . .: 172.19.16.1 Masque de sous-réseau. . . . . . . . . : 255.255.240.0 Passerelle par défaut. . . . . . . . . : Carte Ethernet vEthernet (WSL) : Suffixe DNS propre à la connexion. . . : Adresse IPv6 de liaison locale. . . . .: fe80::aa45:c533:e7ff:dde4%49 Adresse IPv4. . . . . . . . . . . . . .: 172.18.96.1 Masque de sous-réseau. . . . . . . . . : 255.255.240.0 Passerelle par défaut. . . . . . . . . : C:\Users\admin>