Configurer un environnement local de développement WordPress avec Vagrant

Si tu développes avec WordPress, il est préférable de mettre en place un environnement local où tu as installé un serveur, un outil de base de données et quelques sites WordPress ainsi que d’autres outils dont tu as besoin. C’est très bien si tu ne travailles que sur quelques projets. Mais lorsqu’ils se multiplient, des problèmes apparaissent. Et aussi le casse-tête de maintenir plusieurs environnements, parce que le client a une configuration différente de la tienne.

Pour contourner ce problème, nous pouvons utiliser ce que nous appelons Vagrant. Vagrant est un outil pour travailler avec des environnements virtuels. Il offre un moyen facile de configurer un environnement de développement local à l’aide de quelques commandes, et tu peux reproduire une configuration complète autant de fois que tu le souhaites, avec facilité et sans avoir à tout installer manuellement. Pour exécuter Vagrant, tu dois définir un ensemble de règles. Vagrant configure ta machine virtuelle en fonction de ces règles. Pour cela, Vagrant a besoin de deux fichiers : Vagrantfile, qui indique à Vagrant le type de matériel dont la machine virtuelle a besoin, et un fichier de déploiement, qui indique à Vagrant ce qu’il faut faire sur la machine virtuelle.

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

Installer VirtualBox

Rends-toi sur la page de téléchargement de Virtualbox et télécharge un fichier binaire correspondant à ton hôte invité. (L’hôte invité est le système d’exploitation à partir duquel tu feras fonctionner ton environnement de développement). Installe Virtualbox.

Installer Vagrant

Télécharge le binaire correspondant à ton système d’exploitation sur la page de téléchargement de Vagrant et installe-le.

Pour vérifier si son installation a réussi, tape la commande suivante dans la ligne de commande de ton système d’exploitation.

$ vagrant -v

Installer le plugin Vagrant Hosts Updater

Le plugin vagrant-hostupdater modifiera le fichier hosts de ton OS pour que les domaines mis en place par Vagrant fonctionnent. Pour l’installer, exécute la commande suivante

$ vagrant plugin install vagrant-hostsupdater

Redémarre ton OS après avoir installé Vagrant/Virtualbox pour qu’il n’y ait pas de problèmes de réseau.

Installer Git

Linux

Nous aurons également besoin du contrôle de version Git pour ce tutoriel. Si tu ne l’as pas installé, alors installe-le en utilisant la commande suivante si tu as une distribution Debian/Ubuntu

$ sudo apt install git

ou si tu as Fedora

$ sudo dnf install git

ou si tu as CentOS/RHEL

$ sudo yum install git

Vérifie la version de Git installée à l’aide de la commande suivante

$ git --version

Tu verras quelque chose comme

$ git version 2.20.1

Tu dois configurer Git à l’aide des commandes suivantes.

$ git config --global user.name "Your Name" 
$ git config --global user.email "[email protected]"

Windows

Pour installer Git sur Windows, rends-toi sur la page de téléchargement de Git et installe le binaire.

Mac OS

Si tu as installé homebrew, tu peux installer Git via la commande suivante.

$ brew install git

ou tu peux télécharger un paquet binaire sur la page de téléchargement de Git et l’installer.

Installer des ensembles Vagrant variables

Au lieu de créer une configuration Vagrant à partir de zéro, nous allons utiliser Varying Vagrant(VVV) – une configuration Vagrant open source visant spécifiquement à créer des environnements de développement WordPress. Une VVV standard configurera ta 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 te donnera plusieurs installations WordPress par défaut, l’une d’entre elles étant la dernière version de pointe pour t’aider à expérimenter.

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

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

Ici, nous clonons la branche maître du référentiel sur le système. Si tu veux des mises à jour plus rapides, tu peux utiliser la branche develop.

Démarrer VVV

Passe dans le répertoire où tu as cloné VVV.

$ cd vvv

Lance l’environnement Vagrant qui va installer la machine virtuelle et tout configurer.

$ vagrant up

Ce processus peut prendre un certain temps, alors sois patient. Il se peut que l’on te demande ton mot de passe root pendant le processus, qui est nécessaire pour configurer le fichier hosts de ton système.

Remarque pour les utilisateurs de Windows 8/10

Si tu es sous Windows, il se peut que tu obtiennes l’erreur suivante

==> default: Booting VM... 
There was an error while executing `VBoxManage`, a CLI used by Vagrant
for controlling VirtualBox. The command and stderr is shown below.

Command: ["startvm", "1fe83aa1-2f23-4ddd-ad77-b7e7e00aabe6", "--type", "headless"]

Stderr: VBoxManage.exe: error: Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only
Ethernet Adapter #3' (VERR_INTNET_FLT_IF_NOT_FOUND).
VBoxManage.exe: error: Failed to attach the network LUN (VERR_INTNET_FLT_IF_NOT_FOUND)
VBoxManage.exe: error: Details: code E_FAIL (0x80004005), component ConsoleWrap, interface IConsole

Note l'adaptateur mentionné ici :

VirtualBox Host-Only Ethernet Adapter #3

Ouvre le Panneau de configuration >> Centre Réseau et Partage. Clique maintenant sur Modifier les paramètres de l'adaptateur. Fais un clic droit sur l'adaptateur dont le Nom ou le Nom du périphérique correspond à VirtualBox Host-Only Ethernet Adapter # 3 et clique sur Propriétés. Clique sur le bouton Configurer.

Clique maintenant sur l'onglet Pilote. Clique sur Mettre à jour le pilote. Sélectionne Parcourir mon ordinateur pour trouver des pilotes. Choisis maintenant Let me pick from a list of available drivers on my computer. Sélectionne le choix que tu obtiens et clique sur Suivant. Clique sur Fermer pour terminer la mise à jour. Retourne maintenant à ta fenêtre Terminal/Powershell/Commande et répète la commande vagrant up. Cela devrait fonctionner correctement cette fois-ci.

Une fois que c'est terminé, tu peux te rendre sur ton tableau de bord VVV à l'adresse http://vvv.test url.

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 informations de connexion, admin comme nom d'utilisateur et password comme mot de passe. Les informations d'identification de la base de données pour les deux sites sont wp comme nom d'utilisateur et mot de passe. Les informations d'identification de l'utilisateur racine de MySQL sont root comme nom d'utilisateur et mot de passe. Et les informations d'identification de l'utilisateur racine de la VM sont root comme nom d'utilisateur et vagrant comme mot de passe.

Il existe une installation wordpress pour développeur sur http://trunk.wordpress.net mais elle ne fonctionnera pas car elle n'a pas été provisionnée. Cette installation est utile si tu es un contributeur WordPress qui travaille avec des tickets et des correctifs Trac. Pour l'activer, ouvre vvv-custom.yml et change la valeur de skip_provisioning sous wordpress-trunk en false, puis reprovisionne la VM en utilisant la commande

$ vagrant reload --provision

Il existe une autre installation de wordpress sans url étiquetée wordpress-meta-environment. Cette installation créera un environnement utile pour les contributions à l'équipe méta de WordPress, par exemple, WordCamps, .org, etc. Pour activer cette installation, ajoute la ligne suivante sous wordpress-meta-environment dans le fichier vvv-custom.yml.

hosts:
- wpmeta.test

Puis change la valeur de skip_provisioning en false et reprovisionne la VM.

$ vagrant reload --provision

Ajouter un nouveau site

Si tu veux ajouter un autre site à la VM, tu devras modifier le fichier vvv-custom.yml que tu trouveras dans le répertoire vvv. S'il n'y est pas, il suffit de copier vvv-config.yml et de le créer. C'est un processus unique et tu n'auras pas besoin de le refaire. Fais toujours tes modifications dans vvv-custom.yml car vvv-config.yml est écrasé lorsque tu mets à jour VVV.

Ajoute le code suivant dans la section sites de vvv-custom.yml pour ajouter un nouveau site.

newsite:
    repo: https://github.com/Varying-Vagrant-Vagrants/custom-site-template
    description: "A WordPress subdir multisite install"
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

Lavariable repo fait référence à un référentiel 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 repo maintenu par VVV.

La variabledescription est auto-explicative.

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

local_dir est le répertoire sur ta machine hôte où se trouve ton site.

La variablebranch indique à Vagrant de vérifier la branche master du repo dans l'exemple ici.

nginx_upstream sert à définir l'endroit où Nginx transmet les demandes et est généralement utilisé pour modifier la version de PHP nécessaire à ton installation. php fait ici référence à la version de PHP par défaut qui est 7.2. Tu peux 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.

La variablehosts est utilisée pour définir l'url dont nous aurons besoin pour accéder au site.

La sectionCustom est utile si tu as besoin d'un contrôle supplémentaire sur ton site WordPress. Tu peux 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 ton site qui sera utilisé pour ton installation.

La variablewp_type décide si ton installation sera unique, multisite avec domaines ou multisite avec sous-répertoire. wp_type prend quatre valeurs : unique, sous-domaine, sous-répertoire et aucune. Avec l'installation par sous-domaine, tu peux définir plusieurs hôtes pour ton installation multisite au format suivant

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

Tu peux ajouter une autre variable dans la section personnalisée, à savoir wp_version. Tu peux la définir sur nightly si tu veux 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 te permet de définir le nom de la base de données pour ton installation.

custom:
    db_name: super_secet_db_name

Et enfin, la variable site_title te permet de définir le titre de ton site WP.

custom:
    site_title: My Awesome Dev Site

Cela devrait couvrir toutes les variables et options dont tu as besoin pour ajouter ton propre site Web dans VVV. Après avoir modifié le fichier vvv-custom.yml, exécute la commande suivante pour faire fonctionner ton 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 tu travailles déjà sur un site et que tu veux l'ajouter sous VVV. Voyons comment nous pouvons le faire.

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

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

Cela indiquera à VVV de créer un nouveau site accessible via http://howtoforge.local. Mais c'est un site entièrement nouveau. 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 dans le répertoire local, c'est-à-dire /home/user/vvv/www/newsite.

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

Nous devons maintenant copier la base de données. Une façon simple de le faire est d'exporter ta base de données existante sous forme de fichier .sql, de copier ce fichier dans le répertoire de notre blog et de réimporter la base de données en SSHant à notre VM.

Tout d'abord, connecte-toi à mysql dans la ligne de commande de ton système local et utilise 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 à nouveau provisionner la VM.

$ vagrant reload --provision

Connecte-toi à ta VM en SSH.

$ vagrant ssh

Maintenant, réimporte la base de données dans ta VM.

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

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

Ceci termine la configuration d'un site existant dans VVV.

Activer SSL

Les installations sur localhost ne sont généralement pas sécurisées. Et installer ton 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 active par défaut SSL sur toutes tes installations WordPress. Commence simplement à utiliser https avec tes sites. Pour la première fois, ton navigateur se plaindra d'un certificat invalide, mais ajoute-le comme exception et tout devrait bien se passer à partir de maintenant.

Mise à jour de WordPress

Tu peux mettre à jour ton installation WordPress depuis ton tableau de bord. De plus, VVV mettra à jour ton WordPress chaque fois que tu reprovisionneras la VM. Tu peux aussi mettre WordPress à jour manuellement en le téléchargeant sur WordPress.org et en extrayant le fichier zip. Et tu peux aussi utiliser WP CLI qui est fourni avec VVV. Pour mettre à jour ton site avec WP CLI, utilise les commandes suivantes.

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

Mise à jour de VVV

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

$ vagrant halt

Vérifie maintenant que ton vagrant et ta Virtualbox sont à jour. Si ce n'est pas le cas, télécharge-les à nouveau et installe-les.

Exécute la commande suivante pour mettre à jour ta boîte Vagrant. C'est facultatif mais il est préférable que tu le fasses.

$ vagrant box update

Maintenant, tire la dernière version de VVV de Github.

$ git pull

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

$ vagrant up --provision

Outils supplémentaires

VVV est livré avec divers utilitaires que tu peux installer. Tu les trouveras dans la section Utilitaires de ton fichier vvv-custom.yml. Par défaut, tls-ca et phpmyadmin sont activés. Tu peux aussi installer memcached, opcache, webgrind, mongodb, tideways et les versions de php de 5.6 à 7.3 en supprimant le # devant eux dans la section des utilitaires.

Tu peux même ajouter tes propres logiciels que tu veux installer. Tu devras 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

Tu ajouteras une nouvelle section, java ici, par exemple. Le code de l'installation proviendra d'un dépôt git. Ton dépôt git devrait être structuré comme suit

java7/
    provision.sh

Le fichier provision.sh contiendra le code nécessaire pour installer java dans ta VM. Le nom du dossier doit correspondre au nom que tu as 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. Fais-nous savoir si tu as des questions.

Vous aimerez aussi...