Un site web est visité par beaucoup de configurations différentes. Tester un site dans différentes configurations est une étape obligatoire afin de s'assurer que tout fonctionne correctement. Cet article explique l'installation d'un environnement de test sous Mac OSX avec une machine virtuelle.
Le but final est de pouvoir consulter un site web local dans une machine virtuelle de Windows. Ceci nous permettra de tester un site dans Internet Explorer. Bien que cet article explique les démarches à effectuer sous Mac OSX, celles-ci sont similaires pour d'autres environnements.
Logiciels utilisés
- Mac OSX : L'OS de Apple (http://www.apple.com/befr/macosx).
- MAMP : Un serveur apache pour OSX (http://www.mamp.info/en/index.html).
- VMWare Fusion : Une machine virtuelle (http://www.vmware.com/fr/products/fusion).
- Windows : L'OS de microsoft.
Etape 1 : MAMP (Mac Apache MySQL PHP)
MAMP est très simple à utiliser et contient tout le nécessaire pour développer un site web. Il suffit de le télécharger, l'installer et enfin le démarrer. Modifiez les ports de Apache et MySQL (dans les préférences) pour les régler respectivement à 80 et 3306 (les ports par défaut). Il faut redémarrer Mamp pour que ces changements prennent effet.
Créez un répertoire pour votre site, par exemple "dev.monsite.com" dans le dossier prévu par Mamp (Applications/MAMP/htdocs).
Etape 2 : Le fichier hosts de OSX
MAMP est installé, on peut consulter notre site par l'intermédiaire de l'URL http://localhost/dev.monsite.com. C'est pas génial, on va utiliser un virtual host pour pouvoir consulter notre site directement via http://dev.monsite.com.
Il faut éditer le fichier hosts de Mac OSX pour rajouter un virtual host.
Lancez donc le terminal (il se situe dans Applications/Utilities).
A l'aide de vi on va éditer le fichier dans le terminal. Voici une aide de la commande vi ou encore une cheat sheet.
Entrez la commande suivante :
vi /etc/hosts
Vous devriez avoir quelque chose comme ceci :
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost
N'effacez rien dans le fichier, déplacez-vous tout en bas et ajoutez la ligne suivante :
127.0.0.1 dev.monsite.com
Fermez et enregistrez le fichier, ne quittez pas le terminal nous en aurons besoin à l'étape suivante. Enfin, testez que votre site est accessible par http://dev.monsite.com dans votre navigateur.
Etape 3 : VMWare Fusion
VMWare Fusion utilise une connection réseau virtuelle vers la machine hôte. Cela permet à la machine virtuelle de se connecter à Internet, d'accéder à des fichiers locaux. La machine virtuelle dispose donc d'une adresse IP spécifique. Pour la connaître, dans le terminal, entrez la commande suivante :
ifconfig vmnet1
Cette commande va vous retourner quelque chose comme ceci :
vmnet1: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
ether 00:50:56:c0:00:01
inet 172.16.120.1 netmask 0xffffff00 broadcast 172.16.120.255
Ce qui nous intéresse est la propriété "inet". Dans mon cas sa valeur (une adresse IP) est : 172.16.120.1. Copiez-coller cette valeur ou notez là sur un bout de papier.
Etape 4 : Le fichier hosts de Windows
Une fois la machine virtuelle Windows démarrée...
Il faut éditer le fichier hosts de Windows, rendez-vous dans la répertoire c:/windows/System32/drivers/etc/. On peut éditer ce fichier à l'aide du bloc note. Voici son contenu :
# Copyright (c) 1993-2006 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
# 102.54.94.97 rhino.acme.com # source server
# 38.25.63.10 x.acme.com # x client host127.0.0.1 localhost
#::1 localhost
Il suffit de rajouter à la fin du fichier la ligne suivante :
172.16.120.1 dev.monsite.com
Enregistrez et fermer le fichier.
Pour informer Windows de ce changement, il faut vider le cache DNS. Allez dans Démarrer > Executer. Entrez "cmd".
Nous voilà dans le terminal de Windows, entrez la commande suivante :
ipconfig /flushdns
Le cache DNS est maintenant effacé.
Démarrez Internet Explorer et accédez simplement à votre site via http://dev.monsite.com. Vous pouvez donc maintenant tester votre site dans Internet Explorer !!! Félicitation.
En résumé...
- Installation de MAMP.
- Changement des ports attribués à PHP et MySQL.
- Ajout d'un hôte virtuel dans le fichier hosts de OSX.
- Récupération de l'adresse IP utilisée par VMWare.
- Ajout d'un hôte virtuel dans le fichier hosts de Windows.
Conclusion
Vous pouvez maintenant tester votre site dans Internet Explorer (ho joie). Pour ajouter un autre site, il faut répéter les points 2 et 4.
Il existe des solutions pour tester des sites dans IE6, 7 ou 8 avec une seule application (je pense à IETester), mais cela reste peu fiable.
La solution fiable consiste à tester vos site dans un environnement 100% natif. Donc pour ma part j'ai plusieurs machine virtuelle Windows (une pour chaque version de Internet Explorer).
Il faut également savoir que Internet Explorer n'a pas toujours le même comportement d'une vesion de Windows à une autre, et d'un service pack à un autre (bref c'est vraiment le pied, merci Billou).