The Joomla! Community Magazine™

Issue 2014 April > French

Pratique du développement (épisode 2) : l'environnement de travail

Written by | Tuesday, 01 April 2014 00:00 | Published in 2014 April
Deuxième article d’une série sur la pratique du développement, concernant votre environnement de travail dans le développement de Joomla! Consultez l’introduction du mois de mars pour savoir à quoi s’attendre.

Configuration de votre environnement de travail et des outils.

vg swdev 0000 setupDéfinissez l’arborescence avec des "répertoires de projet" ce qui vous permettra d’avoir de multiples projets/sites dans votre flux de travail. Un répertoire de projet sera le lieu central pour toutes les données liées à un projet, le rendant facile à archiver ou à transférer sur un autre système.

Utiliser des liens symboliques (également sous Windows !) pour les fichiers et répertoires rend la création de fichiers à l’extérieur du répertoire "projet" disponible dans celui-ci. Un lien permet à plusieurs endroits d’accéder au même fichier.

À la fin, vous devriez être en mesure de créer une configuration de développement avec une ou plusieurs installations parallèles de XAMPP et plusieurs projets indépendants. Chaque projet sera accessible localement par son nom unique dans le navigateur.

Nous aurons besoin de :

  • configurer le répertoire de projets (structure des dossiers),
  • installer XAMPP pour avoir une pile de serveurs avec Apache, PHP et MySQL
  • configurer le système et le serveur Web Apache pour l’hébergement virtuel basé sur le nom de domaine (vhost)
  • modifier notre configuration à l’aide des "liens"

Répertoire de projet 

L’organisation de nos projets tourne autour du répertoire de projets pour gérer les différents projets. Une structure définie nous permet de garder l’ensemble de nos données de projet en un seul et même endroit avec des conventions de nommage qui font qu’il est facile pour nous (et pour tous nos outils) de trouver leur chemin. En utilisant des références relatives, nous pouvons l’utiliser sur n’importe quel système d’exploitation (Windows, Linux, Mac). De cette façon, vous pouvez "transporter" votre projet entre les systèmes et les archiver en déplaçant le répertoire de base du projet avec toutes ses données pertinentes. 

Pour décrire la structure des répertoires de projets, nous utiliserons des conventions de nommage. Tous les noms entre ## sont des variables que vous pouvez utiliser - ils peuvent être "remplacés" à votre convenance.

La configuration de base proposée est :

##PROJETS##/[apps]
          /[archive]
          /local.##DOMAINE##/www
          |                /logs
          |                /backup
          |                /patches
          /local.##DOMAINE##/www
                           /logs
                           /backup

Et pour XAMPP :

##XAMPP_INSTALL##/apache/conf
                 /php    
                 /mysql

##XAMPP_INSTALL## est le répertoire d’installation de XAMPP.
##PROJETS## est la base ou "racine" de l’arborescence des répertoires de projets utilisée pour stocker l’ensemble de vos projets.

J’ai configuré "d:/virtualhosts/" comme mon répertoire de projets ainsi que vous le verrez dans la suite.
##DOMAINE## est le nom de domaine pour les projets respectifs (expliqué plus en détail plus tard), puis nous avons les répertoires de base du projet nommées #PROJETS##/local.##DOMAINE##.

Nous étofferons cette structure dans cette série d’articles et rajouterons des détails si besoin est. En fin de compte, vous devriez être en mesure de construire une structure qui remplit vos besoins.

XAMPP

XAMPP est l’un des logiciels disponibles permettant de lancer un serveur Web local, MySQL et PHP sur Windows ainsi que sur de nombreux autres OS (Mac, Linux, etc.) Son fonctionnement de base et son installation sont largement décrits dans de nombreux tutoriels sur le net et nous ne nous y attarderons pas ici.

Installations parallèles de XAMPP

En général, il est conseillé d’utiliser la dernière version, mais si vous travaillez avec Joomla! (ou avec n’importe quelle plateforme avec des exigences spécifiques), vous voudrez peut-être définir vous-même la version que vous souhaitez utiliser.

Il est, en effet, possible d’exécuter différentes versions de XAMPP sur le même ordinateur. Sélectionnez vos versions de XAMPP avec les versions d’Apache, MySQL et PHP spécifiques ou des versions qui ont un intérêt pour vous et installez-les en parallèle.

Par exemple, si on considère PHP, vous pourriez envisager d'utiliser XAMPP :

v1.7.7 dernière version XAMPP avec PHP 5.3 (5.3.8)
	v1.8.2-1 dernière version XAMPP avec PHP 5.4.x (5.4.16)
	v1.8.3-0 première version XAMPP avec PHP 5.5 (5.5.1)

Ainsi vous pouvez/pourriez installer n’importe quelle combinaison en parallèle, mais une seule sera active à un moment donné !

Dans ma configuration actuelle, j’ai deux installations, l’une avec PHP 5.4 (par défaut) et une version avec PHP dans la dernière version 5.3 pour l’utiliser avec Joomla 1.5. Vous pouvez également utiliser PHP 5.5 pour certains tests et vous assurer que votre développement sera apte aux nouvelles évolutions des hébergeurs.

Emplacements d’installation de XAMPP

Vous êtes libre d’installer XAMPP n’importe où, tant que vous savez où. J’ai installé par exemple PHP 5.4 et 5.3 respectivement dans :

C:\Portable\XAMPP
C:\Portable\XAMPP-php53

Pour des raisons de références ultérieures, je décompresse/installe XAMPP dans C:\Portable\XAMPP ou C:\Portable\XAMPP-php53. Ces répertoires seront identifiés comme ##XAMPP_INSTALL## dans la suite de cet article.

Une configuration basée sur le nom d’hébergement

Nous souhaitons être en mesure de travailler sur plusieurs sites de développement, configurés en parallèle. Ainsi, chacun de ces sites sera exécuté dans son propre hôte virtuel et "se comportera" comme un vrai site avec son propre nom de domaine. Ce n’est pas seulement une approche propre, c’est nécessaire pour le débogage que nous verrons plus tard dans cette série.

Pour ce faire, nous devons mettre en place un hébergement basé sur le nom de domaine et nous avons besoin de mettre en place un fichier host (fichier "hôte"), une configuration d’hôte virtuel pour Apache ("virtualhost") et enfin les fichiers de configuration de vhosts pour chacun de vos projets.

Fichier hosts

Pour comprendre à quoi sert le fichier host, imaginez-le comme un annuaire téléphonique. Lorsque votre navigateur doit se connecter à un site Web, il doit rechercher le "numéro de téléphone" (son adresse IP) du site grâce à son nom dans un annuaire téléphonique.
Sur votre ordinateur et à des fins de test, votre fichier d’hosts local agira comme ce répertoire téléphonique.

Un serveur s’exécutant sur votre ordinateur vous est accessible via l’adresse IP 127.0.0.1 (localhost). Nous pouvons maintenant lier cette adresse IP aux différents noms de sites Web en les ajoutant au fichier hosts. Désormais, le navigateur peut utiliser le nom du site pour s’y connecter, en entrant par exemple http://local.viryagroup.com dans la barre d’adresse.
(Note du traducteur : concrètement, votre navigateur va lire dans le fichier host que cette adresse est associée à l’IP 127.0.0.1 (votre ordinateur) et s’y connectera. XAMPP lui répondra et fournira les pages demandées comme si vous étiez connecté à un vrai serveur sur Internet. Vous pourrez même travailler déconnecté du Web).

Sur les machines Linux, le fichier host est situé dans /etc/hosts. Sur Windows, il est un peu plus caché. (Note du traducteur : il vous faudra aller le trouver dans %SystemRoot%\system32\drivers\etc\). Je vous conseille de lire l’article Host sur Wikipédia pour avoir plus de détails sur l’emplacement du fichier hosts sur chaque OS.
Personnellement, j’utilise un utilitaire simple appelé Windows hosts file editor qui doit être exécuté en tant qu’administrateur pour pouvoir modifier et enregistrer le fichier hosts.

Le nommage du site et l'ajout d’entrées dans le fichier hosts

Pour vous rendre la vie plus facile à long terme, je vous conseille d’utiliser une convention de nommage pour vos sites de développement, de préférence en rapport avec le site de production. Ainsi, je suggère de prendre le nom de domaine du site en cours de construction (site de production), sans les www. et de l’utiliser comme base de nommage.

Les sites s’exécutant sur votre ordinateur local auront ainsi leur nom commençant par local. (local.viryagroup.com par exemple) et un site de développement externe partagé aura un nom commençant par dev. (dev.viryagroup.com). L’utilisation de cette convention de nommage permet également d’utiliser des outils pour se souvenir des mots de passe tels que KeePass ou LastPass.

Nous ferons référence au nom de domaine de votre site de production par ##DOMAINE## et la version locale ou dev sera ##SUB##.

Par exemple, le site de production viryagroup.com aura sa contrepartie locale local.viryagroup.com (local.##DOMAINE##) et les entrées pour le fichier hôte seront : 

127.0.0.1 local.viryagroup.com
127.0.0.1 www.local.viryagroup.com

Pour un développement collaboratif partagé, nous choisissons dev.viryagroup.com (dev.##DOMAINE##). Ce site sera hébergé sur un serveur externe (et non sur votre propre ordinateur). Pour accéder au "serveur de dev" soit vous l’ajoutez à votre fichier hosts local, soit, de préférence, vous ajoutez au DNS du DOMAINE en ajoutant des enregistrements similaires aux entrées du fichier hosts dans le fichier de zone.
Pour la modification du fichier de zone, il n’y a pas qu’une seule méthode pour le faire, mais la plupart des fournisseurs d’hébergement offrent cPanel ou une autre interface Web qui permet d’ajouter facilement des enregistrements.
Avoir le site "dev" mis en place dans le DNS permet de le partager facilement avec le client. En expérimentation, veillez à régler d’abord la durée de vie (TTL) pour les enregistrements à une valeur basse pour vous assurer que vos modifications soient propagées rapidement.

Configurer Apache

Nous avons désormais le nom de domaine pris en charge par votre ordinateur. Il nous faut encore configurer le serveur Web, Apache dans XAMPP, pour lui dire comment nous voulons que le site soit traité et où trouver son contenu.

L’emplacement
##XAMPP_INSTALL##/apache/conf
contiendra les fichiers de configuration utilisés par Apache. Les fichiers à modifier sont extra/httpd-vhosts.conf et httpd.conf. 

Fichier : extra/httpd-vhosts.conf

##XAMPP_INSTALL##/apache/conf/extra/httpd-vhosts.conf

Nous devons d’abord activer les "noms d’hôtes virtuels basés" dans le serveur Web Apache (XAMPP).
Décommentez (supprimez le premier "#") de la ligne
##NameVirtualHost *:80 

NameVirtualHost *:80

C’est tout ce qu’il y a à faire pour avoir accès à XAMPP, où la racine du document serait ##XAMPP_INSTALL##/htdocs. Vous pouvez éventuellement ajouter la ligne suivante à la fin de httpd-vhosts.conf (en remplaçant ##XAMPP_INSTALL## avec votre emplacement) :

<VirtualHost *:80>
            ServerName XAMPP
            DocumentRoot « ##XAMPP_INSTALL##/htdocs »
</VirtualHost> 

Définir vhosts dans sites-available et sites-enabled

Ensuite, nous allons créer les vhosts réels utilisés dans le serveur Web, où chaque fichier de serveur virtuel/domaine définira la configuration spécifique à ce site. Nous aurions très bien pu ajouter l’ensemble de notre configuration de vhosts dans le fichier httpd-vhosts.conf, mais nous souhaitons une approche plus basée sur la structure (comme dans les serveurs "Debian"), en séparant chaque domaine dans un fichier à part. Cette méthode facilite la gestion des serveurs virtuels. Nous allons donc créer des fichiers ## DOMAINE##.conf pour chaque site Web (vhosts/domaines).

Ces fichiers de configuration seront stockés et contrôlés à partir des dossiers des sites disponibles (sites-available) et des sites actifs (sites-enabled).

sites-available

##XAMPP_INSTALL##/apache/conf/sites-available

Le répertoire "sites-available" contiendra tous les fichiers ##DOMAINE##.conf sur lesquels nous pourrions travailler. Ce répertoire doit être créé en premier lieu. Notez que l’activation réelle des vhosts viendra plus tard.

Comme indiqué dans la section de la structure de travail, nous voulons organiser nos vhosts dans un endroit nommé ##PROJETS##. Donc, pour un seul site, nous aurons :

##PROJETS##/##SUB##.##DOMAINE##

comme base. Par exemple, nous pourrions avoir :

D:\VirtualHost\local.viryagroup.com\www
             |                    \logs
             \local.joomla3\www
                          \logs

 Maintenant les fichiers vhost.conf que nous avons besoin de créer pour chaque projet doivent référencer les répertoires de travail :

<VirtualHost *:80>
    ServerName       ##SUB##.##DOMAINE##
    ServerAlias      www##SUB##.##DOMAINE##
    DocumentRoot     « ##PROJETS##/##SUB##.##DOMAINE##/www »
    ErrorLog         « ##PROJETS##/##SUB##.##DOMAINE##/logs/error.log »
    CustomLog        « ##PROJETS##/##SUB##.##DOMAINE##/logs/access.log » combined
    <Directory       « ##PROJETS##/##SUB##.##DOMAINE##/www »>
        Options Indexes FollowSymLinks Includes ExecCGI
        AllowOverride All
#        Order allow,deny
#        Allow from all
        Require all granted        
    </Directory>
</VirtualHost>

Dans cette configuration les www et les répertoires de logs sont obligatoires. Vous devez les créer comme sous-répertoires à ##PROJETS## / ##DOMAINE##. Leur omission empêchera XAMPP de démarrer.

Lorsque c’est fait, un fichier vhost.conf ressemble à :

<VirtualHost *:80>
	ServerName       local.viryagroup.com
	ServerAlias      www.local.viryagroup.com
	DocumentRoot     "D:\VirtualHost\local.viryagroup.com\www"
	ErrorLog    	 "D:\VirtualHost\local.viryagroup.com\logs\error.log"
	CustomLog    	"D:\VirtualHost\local.viryagroup.com\logs\access.log" combined
    <Directory      "D:\VirtualHost\local.viryagroup.com\www">
   	 Options Indexes FollowSymLinks Includes ExecCGI
   	 AllowOverride All
   	 Require all granted   	 
    </Directory>
</VirtualHost>

Vous pouvez personnaliser n’importe quel fichier vhost.conf pour répondre à vos propres besoins. Le nombre d’options est sans fin, mais ce n’est pas le champ d’application de ces articles. Je vous invite à rechercher toutes les informations nécessaires pour les configurer sur le Net.

Sites-enabled

##XAMPP_INSTALL##/apache/conf/sites-enabled

Maintenant que nous avons nos fichiers vhosts configurés, il nous faut les activer sur notre serveur local. 

Il suffit simplement de copier le fichier vhost du domaine que nous souhaitons rendre actif depuis sites-available/ dans sites-enabled/. Au lieu de s’embêter, le plus simple est de créer un lien relatif entre le fichier original (dans sites-available/) et sa copie dans sites-enabled/. Ainsi, toute modification sur l’un se répercute sur l’autre (qui n’est qu’un raccourci en fait).

Dans Debian, c’est géré par les commandes a2ensite et a2dissite. Sous Windows, nous devons le faire à la main ou avec la souris (voir la section ci-dessous sur la liaison).

Après avoir activé de cette façon un site (en copiant son fichier vhost dans site-enabled), assurez-vous de redémarrer votre serveur Web Apache à l’aide du panneau de contrôle de XAMPP pour qu’Apache le prenne en compte. Lorsque vous n’utilisez pas XAMPP, consultez la documentation sur la façon de le faire.

httpd.conf

##XAMPP_INSTALL##/apache/conf/httpd.conf

Tous les domaines/fichiers vhost.conf à activer sont dans le dossier sites-enabled, cependant nous avons encore besoin de dire à Apache qu’il doit les prendre en compte. Pour ce faire, vous devez modifier le fichier httpd.conf.

Trouvez la section :

# Virtual hosts
Include "conf/extra/httpd-vhosts.conf"

Et ajoutez-y la ligne (si elle n’y est pas déjà) :

Include "conf/sites-enabled/*"

Liaisons (non dangereuses)

Les liens symboliques de fichier et de répertoires sont un concept connu sous Linux. Cette liaison permet le référencement d’un fichier/dossier unique à partir de plusieurs endroits. En utilisant des liens symboliques, vous pouvez accéder aux fichiers et les répertoires depuis des dossiers plus logiques et plus faciles à retenir et surtout, d’éviter la duplication des données.

Contrairement une croyance commune, les liens symboliques sont également disponibles nativement dans les versions récentes de Windows (Vista et ultérieures) via la commande mklink.exe (article Wikipédia). Les différentes formes de liens sont :

  • lien symbolique, référence transparente à un autre fichier, par le biais de son nom
  • lien physique, référence à un autre fichier (référence de son contenu)
  • jonctions, est aux dossiers ce que le lien symbolique est à un fichier.

(Note du traducteur : vous trouverez plus d’informations sur les liens symboliques dans l’article Wikipédia "Liens symboliques").
Pour une discussion plus approfondie, voir http://schinagl.priv.at/nt/hardlinkshellext/linkshellextension_fr.html. Vous pourrez y télécharger hardlinkshellext qui est un outil permettant la création facile de toutes sortes de liens à l’aide de l’explorateur.

Malheureusement, toutes les applications ne sont pas conçues et préparées à gérer des liens symboliques. Dans cette série d’articles, nous allons utiliser des liens symboliques là où cela est possible pour rendre la vie plus facile. Notez donc que des restrictions peuvent s’appliquer en raison du niveau de support des outils appropriés.

Leurrer XAMPP avec les liens symboliques

Pour garder une organisation encore plus propre, nous pouvons, par exemple, déplacer les dossiers "sites-enabled" et "sites-available" dans le dossier ##PROJETS##/[apps] pour les conserver dans le répertoire des projets.

Pour éviter les doubles emplois avec de multiples installations XAMPP, ils devront être dans un répertoire reflétant la version de XAMPP. Par exemple ##PROJETS##/[apps]/xampp173/sites-enabled :

##PROJETS##/[apps]/xampp177/sites-available
                  |         /sites-enabled
                  /xampp183/sites-available
                           /sites-enabled

Une fois fait sur Windows, une jonction peut être utilisée pour "lier" le dossier sites-enabled de nouveau dans le contexte XAMPP.

##PROJETS##/[apps]/xampp177/sites-available
                           /sites-enabled   =J=> ##XAMPP_INSTALL##/apache/conf/sites-enabled

Notez que dans cette configuration (en utilisant des jonctions) sous Windows, vous devez copier les fichiers de vhost.conf ##PROJETS##/[apps]/xampp177/sites-available dans ##PROJETS##/[apps]/xampp177/sites-enabled. Malheureusement, les liens symboliques ne fonctionnent pas dans les jonctions. Nous l’adressons quand nous arrivons à l’article de la compilation.

Une fois réalisés, nous avons nos différents fichiers vhost.conf dans des dossiers plus facilement disponibles pour des tâches automatisées par exemple.

Ici s'achève le deuxième épisode de votre feuilleton de l'année, je vous dis au mois prochain pour la suite.

Traduction libre par Nicolas Ogier de l'article original : Practical Development 2: Working Environment par Marco Dings.
Read 4756 times
Tagged under French
Nicolas OGIER

Nicolas OGIER

Cofondateur et membre du conseil d'administration de l'Association Francophone des Utilisateurs de Joomla (AFUJ), je suis un professeur de Sciences de la Vie et de la Terre et surtout Joomladdict depuis 2005 ! J'organise les Joomladay France depuis 2007, maintient les serveurs, assure les traductions des news, réalise les packs francophones... par amour de Joomla !

Language Switcher

Current Articles