Développer un site WordPress en local sur une machine virtuelle

Développer un site WordPress en local sur une machine virtuelle

La machine virtuelle est un outil relativement facile à mettre en œuvre qui va permettre de développer un site en local avant de le mettre en ligne. Par la suite, le site en développement permettra également de tester les mises à jour avant de les appliquer sur le site en ligne. Ceci présente le gros avantage de s’épargner les sueurs froides du plantage. Cet article est rédigé à partir de deux sites qui présentent le sujet de façon claire et complémentaire :
Utiliser Vagrant et VirtualBox pour créer un environnement de développement pour Prestashop
Vidéo de Grafikart sur PuPHPet
Mon apport consiste seulement à les combiner en y ajoutant quelques précisions relatives à WordPress.

Pourquoi une machine virtuelle ?

La machine virtuelle permet de créer un environnement de développement similaire à celui de l’hébergeur.

Avant de commencer ce tutoriel, posons-nous la question suivante : Pourquoi prendre (ou perdre ?) du temps pour installer un site en développement, en local sur son ordinateur ?
Et bien voici une partie de la réponse. C’est d’abord une façon de construire son site sans avoir à payer un hébergement 😉 . Mais surtout, le site en développement est un outil indispensable qui permet de tester sans danger des manipulations telles que des mises à jour, l’installation d’un nouveau plugin, une modification de CSS… avant de les appliquer sur le site en production (celui qui est en ligne).

Pour développer un site en local, il faut « transformer » son ordinateur en serveur web. Pour ce faire, il est possible d’utiliser des plates-formes de développement telles que WampServer ou XAMPP. Toutefois, cette option peut comporter certaines limites, par exemple pour vérifier le bon fonctionnement d’une e-boutique ou pour tester l’envoi d’e-mails. Une autre solution consiste à installer sur son ordinateur une machine virtuelle dont les caractéristiques se rapprochent de celles de la machine de l’hébergeur.

Une machine virtuelle ? Il faut sûrement être calé en informatique pour installer une chose pareille !

En fait c’est à la portée de tout un chacun grâce à 3 outils open-source :
– VirtualBox
– Vagrant
– PuPHPet

Enfin, précisons que bien que le tutoriel soit un peu long la réalisation pratique est plutôt rapide.

Présentation rapide des 3 outils

– VirtualBox est un logiciel qui permet de créer une (ou plusieurs) machine virtuelle « invitée » sur une machine physique « hôte ». La machine virtuelle peut avoir un système d’exploitation différent de celui de la machine hôte. La difficulté réside dans le paramétrage de la machine virtuelle. C’est là que Vagrant intervient.

– Vagrant est un logiciel qui va permettre de configurer et de créer le fichier de paramétrage pour VirtualBox. Mais cette étape reste également compliquée. C’est à ce moment que PuPHPet entre en jeu.

– PuPHPet est une interface disponible en ligne. Vous répondez à quelques questions en langage courant (en anglais toutefois) et c’est PuPHPet qui se charge de créer un fichier de configuration utilisable par Vagrant.

Remarque 1 : nous avons choisi arbitrairement les noms de répertoires pour cette démonstration, à vous de choisir ceux qui vous conviennent le mieux.
Remarque 2 : le tutoriel est réalisé sous le système d’exploitation Windows 7.

Étape 1. Téléchargement et installation des logiciels VirtualBox et Vagrant

Avant toute chose, installez les logiciels VirtualBox et Vagrant.

Voici les liens de téléchargement des deux logiciels :
– VirtualBox. Choisissez le « VirtualBox platform package » adapté à votre système d’exploitation.
– Vagrant


La vidéo « Télécharger et installer VirtualBox et Vagrant » ne s’affiche pas car une erreur est survenue. En remplacement, vous pouvez télécharger le PDF de la vidéo.


Étape 2. Organisation des répertoires de travail

Nous allons créer les répertoires dans lesquels seront déposés les fichiers de la machine virtuelle et ceux du site en développement.

Dans le répertoire racine (C:), créez les répertoires correspondant à l’arborescence indiquée ci-dessous :

Arborescence pour installer une machine virtuelle - Vagrant et VirtualBox
Arborescence pour installer une machine virtuelle de type serveur web

Au final dans le répertoire racine (C:) nous allons trouver deux nouveaux répertoires nommés « VagrantBox » et « www ».
Le répertoire « VagrantBox » contient à son tour un répertoire « VM » qui contient un répertoire « monsite.dev ». C’est ce dernier qui va recevoir les fichiers de la machine virtuelle.
Le répertoire « www » contient un répertoire « monsite.dev » qui va recevoir les fichiers du site.

Étape 3. Création d’une archive de configuration avec PuPHPet

A partir de quelques questions, PuPHPet se charge de créer un fichier de configuration utilisable par Vagrant.

Voici le lien pour accéder à l’application en ligne PuPHPet.


La vidéo « Créer une archive de configuration avec PuPHPet » ne s’affiche pas car une erreur est survenue. En remplacement, vous pouvez télécharger le PDF de la vidéo.


Pour vous aidez à répondre aux questions de PuPHPet vous trouverez ci-dessous un exemple de paramétrage.

Onglet Deploy target

Locally :

  • deploy to local host
  • Provider : VirtualBox
  • operating system : Debian Wheezy x64 (utilisé par la plupart des hébergeurs)
  • IP Address, Memory, CPUs : laissez les valeurs par défaut
  • hostname : laissez la valeur par défaut sauf en cas de création de plusieurs machines virtuelles sur un même ordinateur. Dans ce cas il faut donner un nom différent à chaque machine.

Forwarded ports : vous pouvez fermer cette boite

Shared Folders :

  • Folder source : c’est le chemin qui permet d’accéder aux fichiers de votre site stockés sur votre machine physique (hôte) soit C:/VagrantBox/www/monsite.dev
  • Folder target : c’est le chemin qui permet d’accéder aux fichiers de votre site depuis la machine virtuelle (invitée) soit /var/www/monsite.dev

Onglet System Packages (bibliothèques et autres outils à installer)

Packages :

Pour l’installation d’un site WordPress, il faut installer au minimum vim et php5-gd.
Vim est un éditeur de texte utilisable sous Linux qui va permettre de modifier les fichiers de configuration du système.
php5-gd est un module utilisé pour manipuler des images à partir de scripts php. Il est nécessaire notamment pour pouvoir charger des médias sur WordPress.

Laissez les autres valeurs par défaut.

Onglet Web Servers

Choisissez le serveur web qui correspond à celui de votre hébergeur, dans notre cas on va installer Apache.

Apache Modules :

Laissez les valeurs par défaut.
On installe le module rewrite qui va permettre la réécriture d’url. C’est nécessaire notamment pour demander à WordPress des url « propres ». Vous pouvez également installer d’autres modules qui seraient présents sur votre serveur d’hébergement.

Virtual Host :

il s’agit d’associer les url du site aux répertoires existants sur votre ordinateur.

  • Server Name : monsite.dev /!\ Il faudra penser à modifier le fichier .hosts de votre ordinateur
  • Server Aliases : monsite.dev . Mais s’il s’agit d’une installation en multisite il faut indiquer :
    monsite.dev/* (installation dans une configuration « sous-dossier »)
    *.monsite.dev (installation dans une configuration « sous-domaine »)
  • Document root : /var/www/monsite.dev (c’est l’emplacement du fichier index.php de votre site)

Directory Block :

Path : /var/www/monsite.dev (ce devrait être le même que celui du vhost Document root ci-dessus, ou être un sous-dossier de ce dernier).

Laissez les autres informations par défaut.

Languages

Choisissez le langage PHP ainsi que la version qui doit être la même que celle de votre serveur d’hébergement.

Laissez les autres paramètres par défaut, sauf le data.timezone dont on change la valeur « UTC » pour une zone plus appropriée à la France (data.timezone=Europe/Paris).
Vous pouvez installer Xdebug si vous le souhaitez. C’est un débogueur de script php.

Databases

Installez MySQL dans la version adéquate.
Root Password : root

Mail Tools

Installez MailCatcher. Cet outil capture les envois d’e-mails depuis le site en développement. C’est très utile pour tester un formulaire de contact sans risquer d’avoir des e-mails qui partent réellement.

  • HTTP Port : laissez la valeur par défaut
  • From Address Method : Inline

Remarque : pour accéder à l’interface de MailCatcher il faudra indiquer l’url suivante dans la barre d’adresse du navigateur : monsite.dev:1080

Create Archive

Ça y est, vous pouvez maintenant télécharger votre archive de configuration : puphpet.zip. Le fichier de configuration à proprement parler s’appelle config.yalm. Il se trouve dans le répertoire nommé puphpet.

Remarque 1 : il est possible de modifier la configuration du serveur en modifiant directement le fichier config.yaml.
Remarque 2 : vous pouvez télécharger le fichier config.yalm qui correspond aux paramétrages proposés dans ce tutoriel. Il vous suffit simplement de le glisser dans la fenêtre de PuPHPet pour y importer directement les paramétrages ! Ensuite, il vous reste quand même un peu de travail 😉 . En effet, n’oubliez pas de modifier les différents chemins d’accès pour qu’ils correspondent à la structure et aux noms de dossiers que vous avez choisis.

Étape 4. Installation de la machine virtuelle

Maintenant que les logiciels, le fichier de configuration et les répertoires sont prêts, installons concrètement la machine virtuelle

L’archive puphpet.zip contient un dossier nommé aléatoirement. Il faut décompresser le contenu de ce dossier dans le répertoire « C:/VagrantBox/VM/monsite.dev ». Ce répertoire « monsite.dev » comporte désormais un répertoire « puphpet » et un fichier « Vagrantfile ».
Le fichier de configuration config.yaml se trouve dans le répertoire « puphpet ».

Les fichiers de l'archive PuPHPet pour installer une machine virtuelle
Les fichiers de l’archive PuPHPet pour installer une machine virtuelle

Maintenant que tout est en place, nous allons lancer Vagrant à partir de la fenêtre « Invite de commandes » de Windows. Pour faire apparaître l’Invite de commandes, cliquez sur Démarrer puis Tous les programmes puis Accessoires et enfin Invite de commandes.


La vidéo « Installation de la machine virtuelle » ne s’affiche pas car une erreur est survenue. En remplacement, vous pouvez télécharger le PDF de la vidéo.


Dans l’Invite de commandes, tapez les instructions suivantes :
cd C:/VagrantBox/VM/monsite.dev
vagrant up

cd : indique le dossier dans lequel on va travailler
vagrant up : lance le logiciel Vagrant qui va installer et configurer la machine virtuelle en utilisant le fichier config.yalm obtenu avec PuPHPet.

Remarque 1 : quelques commandes utiles pour Vagrant :

  • vagrant halt : arrêt de la machine virtuelle
  • vagrant up : lancement de la machine virtuelle
  • vagrant reload : redémarrage de la machine virtuelle
  • vagrant provision : pour mettre à jour la machine virtuelle en cas d’ajout de nouveaux paquets ou toute autre modification du fichier config.yaml
  • vagrant destroy : suppression de la machine virtuelle

Remarque 2 : quand vous avez fini de travailler sur votre site en développement, il vaut mieux arrêter la machine virtuelle car elle utilise les ressources de votre ordinateur. Pour cela, toujours dans l’Invite de commandes, tapez :
vagrant halt
puis
exit (pour sortir de l’Invite de commandes).

Les blocages possibles

Bon, il s’agit de ceux que j’ai moi-même rencontrés 😉 .

> Le nom de la session sous laquelle vous travaillez ne doit pas contenir d’accent.
Si votre nom de session comporte des accents, le texte affiché dans l’Invite de commandes indique l’erreur suivante : « incompatible character encodings ».

Erreur "incompatible character encodings" lors de l'installation d'une machine virtuelle avec VirtualBox et Vagrant
Erreur « incompatible character encodings » lors de l’installation d’une machine virtuelle avec VirtualBox et Vagrant

Si vous êtes dans ce cas, il faut créer une nouvelle session avec un nom sans accent. C’est seulement dans cette session que la nouvelle machine virtuelle pourra être installée.

> Il faut activer la virtualisation dans le BIOS.
BIOS : Basic Input/Output System. Le BIOS est un petit programme. Il est situé sur la carte mère de l’ordinateur. On y accède au démarrage de l’ordinateur en pressant Echap, F2, F10 ou ESPACE (la touche à utiliser dépend du type de carte mère. Cette touche est indiquée en bas de l’écran au démarrage).

Si la virtualisation n’est pas activée, Vagrant ne parvient pas à se connecter à la machine virtuelle.

Erreur "connection timeout" lors de l'installation d'une machine virtuelle avec VirtualBox et Vagrant
Erreur « connection timeout » lors de l’installation d’une machine virtuelle avec VirtualBox et Vagrant
Au terme de la tentative de connexion, le message suivant est affiché :
« Timed out while waiting for the machine to boot. This means that Vagrant was unable to communicate with the guest machine within the configured (« config.vm.boot_timeout » value) time period. »

Une fois dans le BIOS, le chemin pour accéder à la fonction « Virtualization Technology » afin de l’activer dépend du type de la carte mère. A vous de voir comment procéder avec la vôtre.

Étape 5. Modification du fichier hosts

Nous avons déjà parlé de ce fichier hosts. Il faut le modifier pour indiquer au navigateur que l’url « http://monsite.dev » doit pointer vers notre serveur local.

Le fichier hosts est un fichier utilisé par le système d’exploitation d’un ordinateur lors de l’accès à Internet. Son rôle est d’associer des noms de domaines à des adresses IP. Si un serveur existe en local sur la machine, on accède alors au serveur interne. Vous allez donc inscrire sur ce fichier hosts l’association entre l’IP de votre machine virtuelle « 192.168.56.101 » et l’url « monsite.dev » afin que le navigateur puisse afficher le site.

Le chemin pour accéder au fichier hosts sous Windows est le suivant : C:\Windows\System32\drivers\etc\hosts


La vidéo « Modification du fichier hosts » ne s’affiche pas car une erreur est survenue. En remplacement, vous pouvez télécharger le PDF de la vidéo.


Ouvrez le fichier avec un éditeur de code, par exemple Notepad++ et ajoutez le code suivant :
#Machines Virtuelles VagrantBox
192.168.56.101 monsite.dev

Notez l’espace d’une tabulation (touche Tab) entre « 192.168.56.101 » et « monsite.dev ». Le symbole dièse # indique une ligne de commentaire.

Étape 6. Vérification du bon fonctionnement du serveur

Nous allons tester le fonctionnement du serveur avec un petit fichier index.php.


La vidéo « Modification du fichier hosts » ne s’affiche pas car une erreur est survenue. En remplacement, vous pouvez télécharger le PDF de la vidéo.


Dans votre éditeur de code, créez un nouveau fichier appelé « index.php » contenant le code suivant :


<html>
test
</html>

Dans la barre d’adresse de votre navigateur, indiquez l’url « monsite.dev ». Si tout fonctionne, une page s’affiche avec le mot « test ».

Nous venons d’installer en local une machine virtuelle qui remplit le rôle de serveur web. Mais il reste encore à installer WordPress sur ce serveur. Deux articles à venir traiteront les étapes suivantes :
> Corriger un bug de MailCatcher
> Installer un site en développement avec WordPress sur la machine virtuelle

Vous pouvez laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *