Accéder à son site local depuis son smartphone ou un autre périphérique sous linux, mac et windows.

Posté le Samedi 2 février 2013 - 10:50
Dernière mise à jour le Mardi 22 novembre 2016 - 11:44

Il est utile quand l'on développe un site de pouvoir le tester depuis différents supports (tablette, téléphone...) pour en vérifier son bon fonctionnement, encore plus quand l'on développe un site mobile ou responsive (private joke : kikou les M1!).

Pour cela il faut être connecté sur le même réseau local, par exemple derrière la box de votre fournisseur d'accès ou un routeur. Peut importe le type de connexion (wifi ou câble réseau RJ45)

Déterminer son adresse ip «Locale»

Première chose à faire récupérer l'IP de la machine qui fait office de serveur local (la machine ou est installé lamp, wamp ou mamp...) pour cela il faut ouvrir un terminal.

  • Sous windows : ouvrez le menu démarrer, cherchez « invite de commande » ou tapez directement cmd.
  • Sous mac : dans Applications/Utilitaires/terminal
  • Sous linux : normalement le raccourci CTRL+ALT+T vous ouvrira un terminal

puis dans la fenêtre qui s'est ouverte tapez

  • sous windows : ipconfig
  • sous mac et linux : ifconfig

Terminal sous linux

ifconfig sous linux

cmd ipconfig windows

Une adresse ip est constituée d'une suite de 4 nombres, pouvant aller jusqu'à 255, séparés par des points .

Généralement l'adresse ip commencera par 192.168....

C'est cette adresse que l'on va taper sur le périphérique sur lequel on veut tester le site, et vous tomberez sur la page d'accueil de votre serveur, comme si vous aviez utilisé l'adresse « localhost » sur votre ordinateur principal.

Exceptions

Sous windows avec wamp : si vous avez un message du type « Forbidden You don't have permission to access / on this server »

modifiez le fichier httpd.conf (ou bien votre virtual host si vous en utilisez un) entre le les balises <directory ...>, remplacez la ligne

Allow from 127.0.0.1

par :

allow from all

Sous mac, il se peut que vous ayez à configurer le firewall intégré pour autoriser les connexion depuis l’extérieur vers apache.

Aussi, si vous utilisez un port non standard (par exemple localhost:8888 depuis votre machine) ajoutez ce port à la fin de l'adresse ip : 192.168.XX.XX:8888

Android serveur local

 

Comments

moimeme

Posté le Vendredi 12 février 2016 - 02:19

Je trouve pas la ligne : Allow from 127.0.0.1

sur mon serveur apache ?? je suis sous Wamp

PIerrest

Posté le Mercredi 6 juillet 2016 - 14:56

Sous OS X, même pas besoin d'ouvrir le terminal, sauf si vous voulez frimer devant vos clients:

Préférences système / réseau, et vous aurez accès votre adresse wi-fi ou Ethernet
puis comme indiqué, ajoutez le port (par défaut :8888 sous Mamp) et voilà...

loic111

Posté le Mercredi 3 août 2016 - 08:54

jai fais un virtual hist comment acceder a ma page?

Posté le Mercredi 22 août 2018 - 02:22

Tutoriel très intéressant, et efficace ! J'ai pu tester mon site en localhost ainsi. Un grand merci

alex

Posté le Mercredi 26 septembre 2018 - 02:28

Bonjour
Alors effectivement, j'arrive à la racine de localhost et je peux naviguer dans les sites qu'il y a dedans. C'est génial !

Mais ...

Je suis en train de tester le contrôle de la camera d'un smartphone ou d'une webcam avec html/js. Concrètement, avec le code suivant :

Capture

const player = document.getElementById('player2');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const captureButton = document.getElementById('capture');

const constraints = {
video: true,
};

captureButton.addEventListener('click', () => {
// Draw the video frame to the canvas.
context.drawImage(player, 0, 0, canvas.width, canvas.height);
});

// Attach the video stream to the video element and autoplay.
navigator.mediaDevices.getUserMedia(constraints)
.then((stream) => {
player.srcObject = stream;
});

Le script de test fonctionne sur l'ordinateur. Il me renvoie l'image de la webcam. En revanche, le smartphone affiche bien la page mais le contrôle vidéo, bien présent, n'affiche rien.

Comment je peux faire pour que ça affiche la même chose que l'ordinateur ?

Posté le Dimanche 18 novembre 2018 - 21:55

Merci pour les conseils si important et interessant. Mias je crois que de nos jours il en existe deja quelque plugins et services permettant de tester son site web en cours de developement sans utiliser un appareils réel. et meme sur plusieurs plateforme et systeme d'operation.

Anonyme

Posté le Mardi 26 mars 2019 - 06:12

j'ai vraiment aimé le tuto,d'autant plus que j'ai essayé et ça marché d'un coup devant mon jury à la soutenance
merci beaucoup;

Ajouter un commentaire

Ne sera pas publié

HTML restreint

  • Balises HTML autorisées : <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et les adresses courriel se transforment en liens automatiquement.
CAPTCHA
Désolé, pour ça, mais c'est le seul moyen pour éviter le spam...