Configurer un environnement de développement WordPress local avec Vagrant

Si vous développez avec WordPress, il est préférable de configurer un environnement local où vous avez installé un serveur, un outil de base de données et quelques sites WordPress ainsi que d’autres outils dont vous avez besoin. Cela convient si vous ne travaillez que sur quelques projets. Mais quand ils se multiplient, des problèmes surviennent. Et aussi les maux de tête liés à la maintenance de plusieurs environnements, car le client a une configuration différente de la vôtre.

Pour contourner ce problème, nous pouvons utiliser ce que nous appelons Vagrant. Vagrant est un outil pour travailler avec des environnements virtuels. Il fournit un moyen facile de configurer un environnement de développement local avec quelques commandes, et vous pouvez répliquer une configuration complète autant de fois que vous le souhaitez, avec facilité et sans le tracas d’installer tout manuellement. Pour exécuter Vagrant, vous devez définir un ensemble de règles. Vagrant configure votre machine virtuelle en fonction de ces règles. Vagrant a besoin de deux fichiers pour cela : Vagrantfile, qui indique à Vagrant quel type de matériel la machine virtuelle nécessite, et un fichier de déploiement, qui indique à Vagrant quoi faire sur la machine virtuelle.

Parce que Vagrant fonctionne avec des environnements virtuels, vous avez besoin d’un logiciel de machine virtuelle pour exécuter Vagrant. Pour nos besoins, nous utiliserons l’Open Source Virtualbox.

Installer VirtualBox

Rendez-vous sur la page de téléchargement de Virtualbox et téléchargez un fichier binaire correspondant à votre hôte invité. (L’hôte invité est le système d’exploitation à partir duquel vous exécuterez votre environnement de développement.) Installez Virtualbox.

Installer Vagrant

Téléchargez le binaire correspondant à votre système d’exploitation depuis la page de téléchargement de Vagrant et installez-le.

Pour tester s’il est installé avec succès, tapez la commande suivante dans la ligne de commande de votre système d’exploitation.

$ vagrant -v

Installer le plugin Vagrant Hosts Updater

Le plugin vagrant-hostupdater modifiera le fichier hosts de votre système d’exploitation afin que les domaines configurés par Vagrant fonctionnent. Pour l’installer, exécutez la commande suivante

$ vagrant plugin install vagrant-hostsupdater

Redémarrez votre système d’exploitation après avoir installé Vagrant/Virtualbox afin qu’il n’y ait pas de problèmes de réseau.

Installer Git

Linux

Nous aurons également besoin de Git pour ce tutoriel. Si vous ne l’avez pas installé, installez-le en utilisant la commande suivante si vous avez une distribution Debian/Ubuntu

$ sudo apt install git

ou si vous avez Fedora

$ sudo dnf install git

ou si vous avez CentOS/RHEL

$ sudo yum install git

Vérifiez la version de Git installée via la commande suivante

$ git --version

Vous verrez quelque chose comme

$ git version 2.20.1

Vous devez configurer Git via les commandes suivantes.

$ git config --global user.name "Votre Nom"   
$ git config --global user.email "[email protected]"

Windows

Pour installer Git sur Windows, rendez-vous sur la page de téléchargement de Git et installez le binaire.

Mac OS

Si vous avez homebrew installé, vous pouvez installer Git via la commande suivante.

$ brew install git

ou vous pouvez télécharger un paquet binaire depuis la page de téléchargement de Git et l’installer.

Installer Varying Vagrant Vagrants

Au lieu de créer une configuration Vagrant à partir de zéro, nous allons utiliser Varying Vagrants Vagrant (VVV) - une configuration Vagrant open source visant spécifiquement à créer des environnements de développement WordPress. Un VVV standard configurera votre machine virtuelle basée sur Ubuntu 18.04 avec un serveur Nginx, une base de données MariaDB, PHP, WP-CLI, Node.js, MailHog, Composer, memcached, phpMyAdmin, git et divers autres outils. VVV vous donnera plusieurs installations WordPress par défaut, l’une d’elles étant la dernière version en cours de développement pour vous aider à expérimenter.

La première étape consiste à cloner le dépôt Git de VVV dans un répertoire local sur votre système.

$ git clone -b master git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vvv

Ici, nous clonons la branche master du dépôt sur le système. Si vous voulez des mises à jour plus rapides, vous pouvez utiliser la branche develop.

Démarrer VVV

Changez de répertoire pour celui où vous avez cloné VVV.

$ cd vvv

Lancez l’environnement Vagrant qui installera la machine virtuelle et configurera tout.

$ vagrant up

Ce processus peut prendre un certain temps, alors soyez patient. Vous pourriez être invité à entrer votre mot de passe root pendant le processus, ce qui est nécessaire pour configurer le fichier hosts de votre système.

Remarque pour les utilisateurs de Windows 8/10

Si vous êtes sur Windows, vous pourriez obtenir l’erreur suivante

==> default: Booting VM...   
Il y a eu une erreur lors de l'exécution de `VBoxManage`, un CLI utilisé par Vagrant   
pour contrôler VirtualBox. La commande et stderr sont affichés ci-dessous.   
   
Commande: ["startvm", "1fe83aa1-2f23-4ddd-ad77-b7e7e00aabe6", "--type", "headless"]   
   
Stderr: VBoxManage.exe: erreur: Échec de l'ouverture/création du réseau interne 'HostInterfaceNetworking-VirtualBox Host-Only   
Adaptateur Ethernet #3' (VERR_INTNET_FLT_IF_NOT_FOUND).   
VBoxManage.exe: erreur: Échec de l'attachement du LUN réseau (VERR_INTNET_FLT_IF_NOT_FOUND)   
VBoxManage.exe: erreur: Détails: code E_FAIL (0x80004005), composant ConsoleWrap, interface IConsole

Notez l’adaptateur mentionné ici :

VirtualBox Host-Only Ethernet Adapter #3

Ouvrez le Panneau de configuration >> Centre Réseau et partage. Cliquez maintenant sur Modifier les paramètres de l’adaptateur. Cliquez avec le bouton droit sur l’adaptateur dont le nom ou le nom de l’appareil correspond à VirtualBox Host-Only Ethernet Adapter #3 et cliquez sur Propriétés. Cliquez sur le bouton Configurer.

Cliquez maintenant sur l’onglet Pilote. Cliquez sur Mettre à jour le pilote. Sélectionnez Parcourir mon ordinateur pour les pilotes. Maintenant, choisissez Laissez-moi choisir parmi une liste de pilotes disponibles sur mon ordinateur. Sélectionnez le choix que vous obtenez et cliquez sur Suivant. Cliquez sur Fermer pour terminer la mise à jour. Maintenant, retournez à votre Terminal/Powershell/Fenêtre de commande et répétez la commande vagrant up. Cela devrait fonctionner correctement cette fois.

Une fois cela terminé, vous pouvez visiter votre tableau de bord VVV à l’URL http://vvv.test.

VVV est livré avec deux installations WordPress par défaut - http://one.wordpress.test et http://two.wordpress.test Les deux sites ont les mêmes identifiants de connexion, admin comme nom d’utilisateur et password comme mot de passe. Les identifiants de base de données pour les deux sites sont wp comme nom d’utilisateur et mot de passe. Les identifiants de l’utilisateur root MySQL sont root comme nom d’utilisateur et mot de passe. Et les identifiants de l’utilisateur root de la VM sont root comme nom d’utilisateur et vagrant comme mot de passe.

Il y a une installation de WordPress développeur à http://trunk.wordpress.net mais elle ne fonctionnera pas car elle n’a pas été provisionnée. Cette installation est utile si vous êtes un contributeur WordPress qui travaille avec des tickets Trac et des correctifs. Pour l’activer, ouvrez vvv-custom.yml et changez la valeur de skip_provisioning sous wordpress-trunk à false puis reprovisionnez la VM en utilisant la commande

$ vagrant reload --provision

Il y a une autre installation de WordPress sans URL étiquetée comme wordpress-meta-environment. Cette installation créera un environnement utile pour les contributions à l’équipe WordPress meta par exemple, WordCamps, .org, etc. Pour activer cette installation, ajoutez la ligne suivante sous wordpress-meta-environment dans le fichier vvv-custom.yml.

hosts:  
  - wpmeta.test

Et puis changez la valeur de skip_provisioning à false et reprovisionnez la VM.

$ vagrant reload --provision

Ajouter un nouveau site

Si vous souhaitez ajouter un autre site à la VM, vous devrez modifier le fichier vvv-custom.yml que vous pouvez trouver dans le répertoire vvv. S’il n’est pas là, copiez simplement vvv-config.yml et créez-le. C’est un processus unique et vous n’aurez pas besoin de le faire à nouveau. Apportez toujours vos modifications dans vvv-custom.yml car vvv-config.yml est écrasé lorsque vous mettez à jour VVV.

Ajoutez le code suivant sous la section des sites à vvv-custom.yml pour ajouter un nouveau site.

newsite:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "Une installation multisite WordPress en sous-répertoire"  
    vm_dir: /srv/www/newsite  
    local_dir: /home/user/vvv/www/newsite  
    branch: master  
    nginx_upstream: php
    skip_provisioning: false
    hosts:
      - newsite.test
    custom:
      wp_type: subdirectory

Variables

repo variable fait référence à un dépôt Github prédéfini qui contient des informations sur la façon de configurer un nouveau site WordPress sur la VM. Pour l’instant, nous utilisons un dépôt maintenu par VVV.

description variable est explicite.

vm_dir est le répertoire réel à l’intérieur de la VM où votre site résidera.

local_dir est le répertoire sur votre machine hôte où votre site vit.

branch variable indique à Vagrant de vérifier la branche master du dépôt dans l’exemple ici.

nginx_upstream est utilisé pour définir où Nginx passe les requêtes et est généralement utilisé pour changer la version de PHP nécessaire pour votre installation. php ici fait référence à la version PHP par défaut qui est 7.2. Vous pouvez utiliser php71 pour la changer en PHP 7.1 ou php56 pour la changer en PHP 5.6.

skip_provisioning est défini sur false ce qui signifie que nous devons inclure ce site dans la VM.

hosts variable est utilisée pour définir l’URL dont nous aurons besoin pour accéder au site.

custom section est utile si vous avez besoin d’un contrôle supplémentaire sur votre site WordPress. Vous pouvez utiliser cette section pour configurer une installation multisite ou installer une version différente de WordPress et même changer le nom de la base de données ou de votre site qui sera utilisé pour votre installation.

wp_type variable décide si votre installation sera unique, multisite avec des domaines ou multisite avec un sous-répertoire. wp_type prend quatre valeurs : unique, sous-domaine, sous-répertoire et aucun. Avec l’installation sous-domaine, vous pouvez définir plusieurs hôtes pour votre installation multisite dans le format suivant

hosts:
    - multisite.test
    - site1.multisite.test
    - site2.multisite.test
  custom:
    wp_type: subdomain

Vous pouvez ajouter une variable supplémentaire sous la section custom qui est wp_version. Vous pouvez la définir sur nightly si vous souhaitez installer la version Nightly de WordPress. Elle prend trois valeurs : nightly, latest et un numéro de version.

custom: 
     wp_version: nightly

Il y a une autre variable, db_name qui vous permet de définir le nom de la base de données pour votre installation.

custom:
    db_name: super_secet_db_name

Et enfin, site_title variable vous permet de définir le titre de votre site WP.

custom:
    site_title: Mon site de développement génial

Cela devrait couvrir toutes les variables et options dont vous auriez besoin pour ajouter votre propre site dans VVV. Après avoir modifié le fichier vvv-custom.yml, exécutez simplement la commande suivante pour faire fonctionner votre nouveau site.

$ vagrant reload --provision

Ajouter un site existant

Jusqu’à présent, nous avons appris comment ajouter un tout nouveau site à VVV. Mais que faire si vous travaillez déjà sur un site et souhaitez l’ajouter sous VVV. Voyons comment nous pouvons faire cela.

Pour ajouter un site existant, la première étape est la même que précédemment, c’est-à-dire modifier le fichier vvv-custom.yml et ajouter le code suivant.

howtoforge:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "Un site WordPress"  
    vm_dir: /srv/www/newsite  
    local_dir: /home/user/vvv/www/newsite  
    hosts:
      - howtoforge.local

Cela indiquera à VVV de configurer un nouveau site accessible via http://howtoforge.local Mais c’est un tout nouveau site. Ce que nous devons faire, c’est le convertir en notre installation existante. Pour cela, nous devons copier les fichiers de notre installation WordPress existante vers le répertoire local c’est-à-dire /home/user/vvv/www/newsite

$ cp /var/www/howtoforge/ /home/user/vvv/www/newsite/

Maintenant, nous devons copier la base de données. Un moyen simple de le faire est d’exporter votre base de données existante en tant que fichier .sql, de copier ce fichier dans le répertoire de notre blog et d’importer à nouveau la base de données en SSH dans notre VM.

Tout d’abord, connectez-vous à mysql dans la ligne de commande de votre système local et utilisez la commande suivante pour exporter la base de données.

$ cd /home/user/vvv/www/newsite
$ mysqldump -u username -p database_name > data-dump.sql

Maintenant, nous pouvons reprovisionner la VM à nouveau.

$ vagrant reload --provision

SSH dans votre VM.

$ vagrant ssh

Maintenant, importez la base de données dans votre VM.

$ cd /srv/www/newsite 
$ mysql -u root -p newsite < data-dump.sql

VVV a déjà créé une nouvelle base de données lors du provisionnement pour notre blog nommé newsite. Le mot de passe pour l’utilisateur root est root ici. La commande ci-dessus importera notre base de données existante dans la nouvelle.

Cela complète la configuration d’un site existant dans VVV.

Activer SSL

Les installations localhost ne sont généralement pas sécurisées. Et installer votre propre certificat sur localhost peut être un processus long et fastidieux, même avec Let’s Encrypt. Mais VVV rend ce processus assez facile et par défaut, SSL est activé sur toutes vos installations WordPress. Il suffit de commencer à utiliser https avec vos sites. Pour la première fois, votre navigateur se plaindra d’un certificat invalide mais ajoutez-le comme exception et cela devrait aller bien à partir de maintenant.

Mettre à jour WordPress

Vous pouvez mettre à jour votre installation WordPress depuis votre tableau de bord. De plus, VVV mettra à jour votre WordPress chaque fois que vous reprovisionnez la VM. Vous pouvez également mettre à jour WordPress manuellement en le téléchargeant depuis WordPress.org et en extrayant le fichier zip. Et vous pouvez également utiliser WP CLI qui est inclus avec VVV. Pour mettre à jour votre site avec WP CLI, utilisez les commandes suivantes.

$ cd /srv/www/newsite
$ wp core update

Mettre à jour VVV

La première étape consiste à arrêter la machine Vagrant.

$ vagrant halt

Maintenant, assurez-vous que votre vagrant et Virtualbox sont à jour. Sinon, téléchargez-les à nouveau et installez-les.

Exécutez la commande suivante pour mettre à jour votre boîte Vagrant. C’est optionnel mais il est préférable de le faire.

$ vagrant box update

Maintenant, tirez la dernière version de VVV depuis Github.

$ git pull

Reprovisionnez la boîte à nouveau pour terminer la mise à jour.

$ vagrant up --provision

Outils supplémentaires

VVV est livré avec divers utilitaires que vous pouvez installer. Vous les trouverez listés sous la section utilitaires dans votre fichier vvv-custom.yml. Par défaut, tls-ca et phpmyadmin sont activés. Vous pouvez également installer memcached, opcache, webgrind, mongodb, tideways et des versions de php de 5.6 à 7.3 en supprimant le # devant eux dans la section utilitaires.

Vous pouvez même ajouter votre propre logiciel que vous souhaitez installer. Vous devrez modifier le fichier vvv-custom.yml avec quelque chose comme

utilities:
  core:
    - tls-ca  
    - phpmyadmin
  java:
    - java7
utility-sources:
  java:
    repo: https://github.com/example/java-utilities.git
    branch: master

Vous ajouterez une nouvelle section, java ici, par exemple. Le code pour l’installation proviendra d’un dépôt git. Votre dépôt git doit être structuré comme

java7/
    provision.sh

Le fichier provision.sh contiendra le code nécessaire pour installer java dans votre VM. Le nom du dossier doit correspondre au nom que vous avez utilisé ci-dessus dans le fichier vvv-custom.yml.

Conclusion

Cela conclut notre tutoriel sur la façon de configurer un environnement de développement WordPress local avec Vagrant. Faites-nous savoir si vous avez des questions.