Configuration d'IDE et de Linux avec PHP et Drupal
Les projets mis en œuvre par Droptica nécessitent souvent une grande quantité de codage en PHP. Profiter de divers outils et configurations nous permet d'optimiser le processus et de le rendre beaucoup plus pratique et agréable. Dans cet article, nous souhaitions partager nos expériences et décrire une configuration logicielle idéale pour coder en PHP (principalement en Drupal, puisque nous sommes une agence Drupal). Le logiciel de base que nous utilisons inclut Linux (la plupart des gens utilisent Ubuntu) et PHPStorm comme IDE. Nous utilisons également Docker pour configurer et exécuter des services comme Apache, MySQL, Solr, etc.
Docker au lieu d'Apache et PHP installés localement
De nombreux développeurs web préfèrent installer une pile LAMP complète sur leur serveur local, avec Apache/MySQL et PHP installés sur Linux. Ce n'est pas une mauvaise solution, mais une telle installation locale sera toujours différente de l'environnement serveur du client. Et dans ce cas, plus il y a de différences, plus vous ferez face à du travail et des conflits potentiels, avec les réponses « ça fonctionne pour moi » :-)
Docker offre une belle solution à ce problème, car il vous permet d'exécuter des configurations de serveurs identiques dans les environnements de développement et de production. Cependant, l'avantage le plus important de Docker est le fait que le développeur n'a plus besoin de configurer manuellement tous les fichiers .conf et .ini. Grâce à Docker, vous pouvez vous concentrer sur le codage et laisser toutes les questions de serveur aux experts.
Chez Droptica, nous utilisons un logiciel personnalisé appelé docker-console, qui permet à nos développeurs de démarrer rapidement un projet nouveau ou existant en Drupal. Des outils tels que Composer, Drush, Sass/Compass sont dans leurs conteneurs et ils fonctionnent sans besoin de les installer localement sur la machine du développeur. En général, ils ont également à leur disposition une gamme d'outils pour faciliter le débogage. L'un de ces outils est Mailcatcher, qui intercepte tous les e-mails envoyés par Drupal.
Nginx proxy pour Docker
L'image du proxy nginx pour Docker permet d'utiliser des hôtes (domaines locaux) afin d'afficher des sites Web s'exécutant sur Docker dans un navigateur Web. En bref, grâce au proxy nginx, nous pouvons taper http://www.droptica.local au lieu d'une adresse IP (par exemple : "172.17.0.4"). Nginx proxy est très utile lorsque nous exécutons un Drupal multisite et qu'il y a plusieurs domaines sous l'adresse IP d'un seul conteneur (par exemple sites/droptica.com, sites/droptica.pl).
Installation de nginx proxy :
1. Avant l'installation, assurez-vous de supprimer toutes les versions existantes de nginx proxy. En fonction du nom, cela va ressembler plus ou moins à :
docker stop ngnix-proxy && docker rm ngnix-proxy2. Clonez le dépôt : https://github.com/droptica/nginx-proxy
3. Entrez dans le répertoire du dépôt et exécutez-le en utilisant la commande :
docker-compose up -d4. Vérifiez l'IP de nginx, si l'adresse a changé, modifiez-la dans le fichier /etc/hosts :
docker inspect --format "{{ .NetworkSettings.IPAddress }}" nginx-proxy5. Si vous souhaitez ajouter https pour un domaine xxx.local, copiez les fichiers default.crt et default.key vers xxx.local.crt et xxx.local.key. Il est possible que vous ayez à faire chmod 777 dessus, puis redémarrer le conteneur nginx :
sudo chmod 777 -Rf certs && docker-compose restart6. Ajoutez le code responsable du https au fichier de configuration (exemple pour le domaine xxx.local) :
if (strpos($_SERVER['SERVER_NAME'], 'xxx') !== FALSE) {
$base_url = 'https://'.$_SERVER['SERVER_NAME'];
$conf['https'] = TRUE;
}7. Lorsque la machine exécute quelque chose sur le port 80 (apache/nginx), commentez les lignes suivantes dans docker-compose.yml :
ports:
- 80:80
- 443:443 8. Version de Docker compose 2 et supérieure avec nginx-proxy. Sur les versions plus récentes que la 1, docker-compose configure un réseau privé pour les conteneurs, et à cause de cela, nginx-proxy ne peut pas se connecter par défaut. Pour le faire fonctionner, vous devez identifier le réseau et l'ajouter manuellement.
# list networks
docker network ls
# connect you nginx_proxy to your network
docker connect you_network_name nginx_proxyPHP CodeSniffer
PHP CodeSniffer est un outil très utile, qui vous aide à maintenir une base de code claire, conforme aux normes. Comme vous pouvez le lire dans le fichier Readme, CodeSniffer se compose de deux scripts. L'un est utilisé pour détecter les violations d'une norme de codage définie (phpcs), et l'autre est utilisé pour corriger automatiquement les violations de la norme de codage (phpcbf).
PHPStorm, cependant, ne vous permet d'utiliser que le premier (phpcs). Après la configuration, toutes les lignes contenant du code qui viole la norme seront surlignées dans le fichier actuellement édité.
Pour pouvoir utiliser PHP CS, vous devez d'abord l'installer, par exemple en utilisant Composer ou de toute autre manière décrite dans le fichier README du projet.
Par exemple :
composer global require "squizlabs/php_codesniffer=*"Si vous n'avez pas ajouté le chemin $HOME/.composer/vendor/bin à votre variable $PATH, vous devriez le faire maintenant. Pour ce faire, dans le cas de Linux, ajoutez la ligne suivante à la fin du fichier ~/.bashrc :
export PATH="$PATH:$HOME/.composer/vendor/bin"Le chemin Composer peut être légèrement différent pour votre distribution Linux (~/.config/composer pour Ubuntu 18.04). Pour appliquer les modifications, déconnectez-vous et reconnectez-vous ou exécutez la commande suivante :
source ~/.bashrcUne autre chose que vous devez faire est d'ajouter les normes de codage Drupal à PHP CS. Installez tout simplement le module coder.
Le moyen le plus simple de le faire est d'utiliser Composer :
composer global require drupal/coderLes instructions d'installation détaillées peuvent être trouvées ici : https://www.drupal.org/node/1419988
Avant de passer à l'étape suivante, assurez-vous qu'il n'y a pas une deuxième instance de PHP CS installée quelque part dans le système, vous pouvez le faire en exécutant la commande suivante :
whereis phpcsLa commande devrait retourner une sortie similaire à celle ci-dessous :
phpcs: /home/<username>/.composer/vendor/bin/phpcsSi la commande renvoie plusieurs emplacements, vous devriez vous débarrasser des versions inutiles, afin qu'une seule reste sur votre machine.
Ensuite, enregistrez les normes Drupal à partir du module coder :
phpcs --config-set installed_paths ~/.composer/vendor/drupal/coder/coder_snifferAprès avoir installé PHP CS et Coder dans le système, vous pouvez passer à la configuration de PHPStorm :
Paramètres → Langages & Frameworks → PHP → Outils de qualité → Code Sniffer
Dans la section “Environnement de développement”, cliquez sur les trois points à côté de l'option “Configuration”.
Dans la fenêtre Code Sniffer, fournissez le chemin vers le script phpcs (celui retourné par la commande whereis phpcs) dans le champ “PHP Code Sniffer (phpcs) path” pour la configuration “Locale”.
Après avoir saisi le chemin, cliquez sur Valider pour vous assurer que PHP CS fonctionne correctement. Si tout fonctionne, vous devriez voir le message suivant sur un fond vert :
Ensuite, activez l'inspection du code par Code Sniffer. Vous pouvez le faire en allant dans les paramètres :
Paramètres → Éditeur → Inspections
Sélectionnez PHP → Outils de qualité dans la liste des langages, puis activez Validation PHP Code Sniffer. Après avoir coché la case, rafraîchissez la liste des standards de codage disponibles 
et sélectionnez ensuite Standard de codage → Drupal.
Après avoir appliqué les paramètres, vous pouvez ouvrir un fichier PHP et vérifier comment fonctionne Code Sniffer.
Xdebug (fonctionnant sur chaque projet)
XDebug permet de déboguer des applications web développées en PHP dans un style “classique”, en utilisant des points d'arrêt et en exécutant le code ligne par ligne. XDebug est entièrement compatible avec PHPStorm, et la connexion de l'IDE au débogueur est très simple.
Que vous utilisiez docker ou que vous configuriez tout l'environnement par vous-même, XDebug devrait diffuser des informations sur les scripts sur le port 9000. Pour que PHPStorm écoute ce port, cliquez sur “Exécuter → 
Démarrer l'écoute des connexions de débogage PHP”. Après avoir actualisé la page déboguée dans l'éditeur, une fenêtre s'ouvrira, confirmant que la connexion avec XDebug a été établie avec succès. Il peut parfois être nécessaire d'ajuster la correspondance des répertoires entre le webroot du serveur et le répertoire du projet dans PhpStorm.
Si la connexion ne s'est pas correctement établie, assurez-vous d'abord que XDebug fonctionne (en lançant php --version ou phpinfo()). Ensuite, vérifiez si vous avez besoin de bookmarks spécifiques (liens spécialement préparés ajoutés aux favoris) pour activer le débogage. Vous pouvez les trouver sur https://www.jetbrains.com/phpstorm/marklets/
Un très bon manuel approfondi concernant la connexion de XDebug et PHPStorm est disponible ici :
Plug-in XDebug pour Chrome/Firefox
Il y a de nombreux plug-ins disponibles, il suffit de l'installer, de l'activer pour une page donnée et de profiter des possibilités offertes par XDebug.
Quelques exemples :
- Firefox : https://addons.mozilla.org/en-US/firefox/addon/xdebug-helper-for-firefox/
- Chrome : https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc
MySQL Workbench
Un logiciel pour gérer les bases de données MySQL. Il vous permet d'importer et d'exporter des bases de données, de visualiser des tables, ainsi que d'interroger des bases de données, qu'elles soient locales, dans docker ou distantes via ssh. Il n'a aucune limite de taille concernant une base de données importée (comparé à la configuration par défaut de PHPMyAdmin).
Les packages peuvent être téléchargés sur https://dev.mysql.com/downloads/workbench/, après le téléchargement, il suffit de les installer.
Plug-in Chrome pour le débogage JS
L'add-on est disponible uniquement pour Chrome :
https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji
Formatage du code dans PHPStorm :
Drupal a des normes très spécifiques de formatage de code. Certaines des choses les plus importantes à retenir sont l'indentation de deux espaces, ainsi que de mettre else/elseif/catch/while toujours sur une nouvelle ligne. PHPStorm est compatible avec Drupal dès le départ.
Il vous suffit d'aller dans Paramètres → Éditeur → Style de code → PHP et de sélectionner Définir depuis → Style prédéfini → Drupal. N'oubliez pas de vérifier les paramètres de formatage pour CSS, JS, SASS/LESS.
Configuration supplémentaire de PHPStorm
Vous trouverez ci-dessous quelques options de configuration supplémentaires pour PHPStorm, qui facilitent également votre travail en formattant automatiquement votre code selon les normes acceptées :
Ajouter automatiquement une ligne vide à la fin du fichier lors de l'enregistrement :
Paramètres → Éditeur → Général, sélectionnez S'assurer de l'ajout d'une ligne de fin lors de l'enregistrement
Supprimer automatiquement les espaces blancs en fin de ligne lors de l'enregistrement du fichier.
Paramètres → Éditeur → Général, changez Supprimer les espaces en fin de ligne à l'enregistrement, sélectionnez ‘Tous’.
Vous pouvez également choisir ‘Lignes modifiées’ si vous ne voulez pas que les espaces blancs soient supprimés des autres endroits du code, qui n'ont pas été modifiés. Formattez automatiquement le code après avoir tapé la clé fermante.
Paramètres → Éditeur → Général → Touches intelligentes, sélectionnez Reformatter le bloc en tapant ‘}’
Résumé
L'article ci-dessus présente nos recommandations actuelles. Elles sont différentes maintenant de ce que nous recommandions il y a un an ou deux, et elles seront probablement différentes à l'avenir – la configuration s'améliorera encore. :)
Y a-t-il quelque chose que nous devrions améliorer selon vous ? Peut-être avez-vous vos propres méthodes pour configurer votre environnement de développement ? Partagez vos idées et vos réflexions dans les commentaires !
