Développement web : simuler un site web en local

Serveur

Dans certains cas, il est utile de simuler des conditions réelles. Sur ce tutoriel, nous allons apprendre à utiliser www.votresite.com même en local.


Certains projets nécessitent le fait d’utiliser un nom de domaine réel pour fonctionner correctement. Pourtant, les environnements de développement web, souvent construits en local, fonctionnent avec http://localhost et http://127.0.0.1. Le tutoriel suivant va vous guider pas à pas à la configuration de votre système d’exploitation pour utiliser votre nom de domaine même en local.

Etape 1 : tromper le DNS avec hosts

La toute première étape de notre tutoriel consiste à tromper le DNS (Domain Name Service). En effet, la traduction du nom www.votresite.com en adresse IP est géré par le service DNS. Dans notre environnement, nous allons forcer la résolution de l’adresse vers la boucle locale 127.0.0.1 qui va pointer sur votre machine.

L’astuce consiste à éditer le fichier « hosts » qui, heureusement, existe sur la plupart des systèmes d’exploitation :

  • Sur Windows : C:\Windows\System32\drivers\etc\hosts

  • Sur Linux et Mac : /etc/hosts

N’oubliez pas d’autoriser votre éditeur texte à exécuter des commandes administrateurs. Sous Linux Mint et Ubuntu, voici la commande à faire sur le terminal pour ouvrir le fichier avec nano :

$ sudo nano /etc/hosts

Ensuite, quand votre fichier est ouvert, nous allons ajouter deux nouvelles lignes au bout :

127.0.0.1 www.votresite.com
127.0.0.1 votresite.com

Bien sûr, remplacez votresite.com par le nom de domaine adéquat.

Enregistrez et c’est tout. Pour vérifier que tout fonctionne correctement, faites un ping à l’adresse votresite.com et l’adresse IP 127.0.0.1 devrait être utilisé.

Résultat sous Linux :

moi@machine ~ $ ping www.votresite.com
PING www.votresite.com (127.0.0.1) 56(84) bytes of data.
64 bytes from localhost (127.0.0.1): icmp_seq=1 ttl=64 time=0.064 ms
64 bytes from localhost (127.0.0.1): icmp_seq=2 ttl=64 time=0.098 ms
64 bytes from localhost (127.0.0.1): icmp_seq=3 ttl=64 time=0.099 ms
64 bytes from localhost (127.0.0.1): icmp_seq=4 ttl=64 time=0.100 ms
^C
--- www.votresite.com ping statistics ---
4 packets transmitted, 4 received, 0% packet loss, time 3069ms
rtt min/avg/max/mdev = 0.064/0.090/0.100/0.016 ms

Etape 2 : configurer Apache

L’étape suivante consiste à la configuration d’Apache. Le principe est alors de créer un nouveau site sur Apache et par conséquent un VirtualHost.

Sous Linux, les fichiers de configuration des sites se trouvent dans /etc/apache2/sites-available.

$ cd /etc/apache2/sites-available

Nous allons créer un nouveau fichier que vous allez nommer comme bon vous semble (mais avec l’extension .conf) :

$ sudo nano /etc/apache2/sites-available/monsite.conf

Ensuite, insérez-y les lignes suivantes :

<VirtualHost *:80>
    ServerName www.votresite.com
    ServerAlias votresite.com
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/votresite

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

    <Directory "/var/www/votresite">
        Options FollowSymLinks Indexes ExecCGI
        AllowOverride All
        Order deny,allow
        Allow from 127.0.0.1
        Deny from all
        Require all granted
    </Directory>
</VirtualHost>

Tout en assumant que les fichiers de votre site sont localisés dans /var/www/votresite.

Si votre site fonctionne déjà avec Apache, il n’est plus nécessaire de lui donner les permissions nécessaires. Sinon, un chown peut s’imposer :

$ sudo chown www-data: -R /var/www/votresite

si www-data est l’utilisateur et le groupe qui fonctionne avec Apache.

La dernière étape consiste à l'activation de ce nouveau site. Toujours en terminal :

$ sudo a2ensite monsite
$ sudo systemctl apache2 restart
 

Le tutoriel touche à sa fin. A ce stade, vous devrez surement pouvoir accéder à votre site via www.votresite.com.

Actuellement sur Lean.fr


Tutoriel Wordpress série « Leanéaire » : avoir les bons réflexes en cas de panne !

Un jour, c’est le drame, votre site est hors service. Que faire ? Vous trouverez ici tous les bons réflexes afin de tout remettre en place rapidement.

Tutoriel Wordpress série « Leanéaire » : mettre en avant du contenu multimédia dans son blog !

Le texte c’est bien, l’agrémenter de différents contenus multimédias c’est mieux ! Quelques propositions pour mettre en avant vos documents et autres contenus..

Astuce : ne laissez pas Chrome marquer votre site comme « non sécurisé »

Google Chrome va bientôt marquer des millions de sites web comme non sécurisés. Voici ce qu’il faut faire pour éviter d’être concerné.

Voir plus d'actualités