Comment développer un site web Drupal 9 sur votre machine locale en utilisant Docker et DDEV

L’auteur a choisi le Diversity in Tech Fund​​​​​ pour recevoir un don dans le cadre du programme Write for DOnations.

Introduction

DDEV est un outil open-source qui utilise Docker dans le but de construire des environnements de développement locaux pour de nombreux cadres PHP différents. Grâce à la puissance de la conteneurisation, DDEV peut grandement simplifier la façon dont vous travaillez sur des projets multiples qui utilisent plusieurs piles technologiques et plusieurs serveurs cloud. DDEV comprend des modèles pour WordPress, Laravel, Magento, TYPO3, Drupal, et plus encore.

Drupal 9 a été publié le 3 juin 2020 pour le CMS Drupal. Connu pour sa facilité d’utilisation et sa vaste bibliothèque de modules et de thèmes, Drupal est un cadre PHP populaire pour la création et la maintenance de divers sites web et applications de toutes tailles.

Dans ce tutoriel, vous allez commencer à développer un site web Drupal 9 sur votre machine locale en utilisant DDEV. Cela vous permettra de construire votre site web dans un premier temps, puis, lorsque vous serez prêt, de déployer votre projet sur un serveur de production.

Conditions préalables

Pour suivre ce tutoriel, vous aurez besoin de :

• Une machine locale fonctionnant sous Linux ou macOS

• Pour macOS : le gestionnaire de paquets Homebrew, que vous utiliserez pour installer DDEV. Pour installer Homebrew sur votre machine locale, suivez l’étape 3 - Installer et configurer Homebrew dans ce tutoriel Ruby.

• Docker et Docker Compose installés sur votre machine locale.

  • Pour Linux : Vous pouvez installer Docker et Docker Compose en suivant ces deux tutoriels : Comment installer et utiliser Docker et Comment installer Docker Compose Choisissez votre distribution Linux dans la liste et suivez les instructions incluses.
  • Pour macOS : Docker Compose était auparavant disponible dans le cadre de Docker Toolbox, mais Docker Toolbox est maintenant une solution héritée. Aujourd’hui, Docker recommande officiellement d’installer Docker Desktop, qui comprend Docker Compose , Docker Engine, et plus encore. Suivez le guide officiel de Docker pour installer Docker Desktop sur macOS . Pour plus d’informations, vous pouvez lire le guide officiel de démarrage de Docker Desktop . Si vous avez déjà utilisé Docker Toolbox pour installer divers outils Docker, vous pouvez lire cet article officiel sur les différences entre Docker Toolbox et Docker Desktop et comment ceux-ci peuvent coexister .

Étape 1 — Installer DDEV

Au cours de cette étape, vous installerez DDEV sur votre machine locale. L’option 1 comprend des instructions pour macOS, tandis que l’option 2 fournit des instructions pour Linux. Ce tutoriel a été testé sur la version 1.15.0 de DDEV.

Option 1 — Installation de DDEV sur macOS

DDEV conseille aux utilisateurs de macOS d’installer leur outil en utilisant le gestionnaire de paquets Homebrew . Utilisez la commande brew suivante pour installer la dernière version stable :

brew tap drud/ddev && brew install drud/ddev/ddev

Si vous préférez la version la plus récente, vous pouvez utiliser brew pour installer ddev-edge :

brew tap drud/ddev-edge && brew install drud/ddev-edge/ddev

Si vous avez déjà une version de DDEV installée, ou si vous souhaitez mettre à jour votre version, arrêtez DDEV et utilisez brew pour mettre à jour votre installation :

ddev poweroff
brew upgrade ddev

Une fois que vous avez installé ou mis à jour DDEV, exécutez  ddev version pour vérifier votre logiciel :

ddev version

Vous verrez un résultat similaire à ce qui suit :

Output
DDEV-Local version	v1.15.0
commit            	v1.15.0
db                	drud/ddev-dbserver-mariadb-10.2:v1.15.0
dba               	phpmyadmin/phpmyadmin:5
ddev-ssh-agent    	drud/ddev-ssh-agent:v1.15.0
docker            	19.03.8
docker-compose    	1.25.5
os                	darwin
router            	drud/ddev-router:v1.15.0
web               	drud/ddev-webserver:v1.15.0

DDEV comprend un puissant CLI, ou interface de ligne de commande. Lancez ddev pour en savoir plus sur certaines commandes courantes :

ddev

Vous verrez le résultat suivant :

Output
Create and maintain a local web development environment.
Docs: https://ddev.readthedocs.io
Support: https://ddev.readthedocs.io/en/stable/#support

Usage:
  ddev [command]

Available Commands:
  auth             A collection of authentication commands
  composer         Executes a composer command within the web container
  config           Create or modify a ddev project configuration in the current directory
  debug            A collection of debugging commands
  delete           Remove all project information (including database) for an existing project
  describe         Get a detailed description of a running ddev project.
  exec             Execute a shell command in the container for a service. Uses the web service by default.
  export-db        Dump a database to a file or to stdout
  help             Help about any command
  hostname         Manage your hostfile entries.
  import-db        Import a sql file into the project.
  import-files     Pull the uploaded files directory of an existing project to the default public upload directory of your project.
  list             List projects
  logs             Get the logs from your running services.
  pause            uses 'docker stop' to pause/stop the containers belonging to a project.
  poweroff         Completely stop all projects and containers
  pull             Pull files and database using a configured provider plugin.
  restart          Restart a project or several projects.
  restore-snapshot Restore a project's database to the provided snapshot version.
  sequelpro        This command is not available since sequel pro.app is not installed
  share            Share project on the internet via ngrok.
  snapshot         Create a database snapshot for one or more projects.
  ssh              Starts a shell session in the container for a service. Uses web service by default.
  start            Start a ddev project.
  stop             Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data.
  version          print ddev version and component versions

Flags:
  -h, --help          help for ddev
  -j, --json-output   If true, user-oriented output will be in JSON format.
  -v, --version       version for ddev

Use "ddev [command] --help" for more information about a command.

Pour plus d’informations sur l’utilisation de la CLI de DDEV, consultez la documentation officielle de DDEV.

DDEV étant installée sur votre machine locale, vous êtes maintenant prêt(e) a installer Drupal 9 et à commencer à développer un site web.

Option 2 — Installer DDEV sur Linux

Sur un système d’exploitation Linux, vous pouvez installer DDEV en utilisant Homebrew pour Linux ou en utilisant le script d’installation officiel. Sur Ubuntu, commencez par mettre à jour votre liste de paquets dans le gestionnaire de paquets apt (vous pouvez utiliser apt dans Debian, sinon utilisez le gestionnaire de paquets équivalent associé à votre distribution Linux) :

sudo apt update

Installez maintenant quelques paquets pré-requis du dépôt officiel d’Ubuntu :

sudo apt install build-essential apt-transport-https ca-certificates software-properties-common curl

Ces paquets vous permettront de télécharger le script d’installation de DDEV à partir de leur dépôt officiel GitHub.

Maintenant, téléchargez le script :

curl -O https://raw.githubusercontent.com/drud/ddev/master/scripts/install_ddev.sh

Avant d’exécuter le script, ouvrez-le dans nano ou votre éditeur de texte préféré et inspectez son contenu :

nano install_ddev.sh

Une fois que vous avez examiné le contenu du script et que vous êtes satisfait(e), enregistrez et fermez le fichier. Vous êtes maintenant prêt à exécuter le script d’installation.

Utilisez la commande chmod pour rendre le script exécutable :

chmod +x install_ddev.sh

Maintenant, lancez le script :

./install_ddev.sh

Le processus d’installation peut vous demander de confirmer certains paramètres ou d’entrer votre mot de passe sudo. Une fois l’installation terminée, DDEV sera disponible sur votre système d’exploitation Linux.

Exécutez la version ddev pour vérifier votre logiciel :

ddev version

Vous verrez un résultat similaire à ce qui suit :

Output
DDEV-Local version	v1.15.0
commit            	v1.15.0
db                	drud/ddev-dbserver-mariadb-10.2:v1.15.0
dba               	phpmyadmin/phpmyadmin:5
ddev-ssh-agent    	drud/ddev-ssh-agent:v1.15.0
docker            	19.03.8
docker-compose    	1.25.5
os                	linux
router            	drud/ddev-router:v1.15.0
web               	drud/ddev-webserver:v1.15.0

DDEV est un puissant CLI, ou interface de ligne de commande. Exécutez ddev sans rien d’autre pour apprendre quelques commandes courantes :

ddev

Vous verrez le résultat suivant :

Output
Create and maintain a local web development environment.
Docs: https://ddev.readthedocs.io
Support: https://ddev.readthedocs.io/en/stable/#support

Usage:
  ddev [command]

Available Commands:
  auth             A collection of authentication commands
  composer         Executes a composer command within the web container
  config           Create or modify a ddev project configuration in the current directory
  debug            A collection of debugging commands
  delete           Remove all project information (including database) for an existing project
  describe         Get a detailed description of a running ddev project.
  exec             Execute a shell command in the container for a service. Uses the web service by default.
  export-db        Dump a database to a file or to stdout
  help             Help about any command
  hostname         Manage your hostfile entries.
  import-db        Import a sql file into the project.
  import-files     Pull the uploaded files directory of an existing project to the default public upload directory of your project.
  list             List projects
  logs             Get the logs from your running services.
  pause            uses 'docker stop' to pause/stop the containers belonging to a project.
  poweroff         Completely stop all projects and containers
  pull             Pull files and database using a configured provider plugin.
  restart          Restart a project or several projects.
  restore-snapshot Restore a project's database to the provided snapshot version.
  sequelpro        This command is not available since sequel pro.app is not installed
  share            Share project on the internet via ngrok.
  snapshot         Create a database snapshot for one or more projects.
  ssh              Starts a shell session in the container for a service. Uses web service by default.
  start            Start a ddev project.
  stop             Stop and remove the containers of a project. Does not lose or harm anything unless you add --remove-data.
  version          print ddev version and component versions

Flags:
  -h, --help          help for ddev
  -j, --json-output   If true, user-oriented output will be in JSON format.
  -v, --version       version for ddev

Use "ddev [command] --help" for more information about a command.

Pour plus d’informations sur l’utilisation du CLI de DDEV, vous pouvez consulter la documentation officielle de DDEV.

DDEV étant installé sur votre machine locale, vous êtes maintenant prêt à déployer Drupal 9 et à commencer à développer un site web.

Étape 2 — Déployer un nouveau site Drupal 9 en utilisant DDEV

Avec l’exécution de DDEV, vous allez maintenant l’utiliser pour créer un système de fichiers spécifique à Drupal, installer Drupal 9, et ensuite lancer un projet de site web standard.

Tout d’abord, vous allez créer un répertoire root du projet et ensuite vous déplacer à l’intérieur de celui-ci. Vous exécuterez toutes les commandes restantes à partir de cet emplacement. Ce tutoriel utilisera d9test , mais vous êtes libre de donner un autre nom à votre répertoire. Notez cependant que DDEV ne gère pas bien les noms avec trait d’union. Il est considéré comme une bonne pratique d’éviter les noms de répertoire comme my-project ou drupal-site-1.

Créez le répertoire root de votre projet et naviguez à l’intérieur :

mkdir d9test
cd d9test

DDEV excelle dans la création d’arborescences de répertoires qui correspondent à des plateformes CMS spécifiques. Utilisez la commande ddev config pour créer une structure de répertoire spécifique à Drupal 9 :

ddev config --project-type=drupal9 --docroot=web --create-docroot

Vous verrez un résultat similaire à ce qui suit :

Output
Creating a new ddev project config in the current directory (/Users/sammy/d9test)
Once completed, your configuration will be written to /Users/sammy/d9test/.ddev/config.yaml

Created docroot at /Users/sammy/d9test/web
You have specified a project type of drupal9 but no project of that type is found in /Users/sammy/d9test/web
Ensuring write permissions for d9new
No settings.php file exists, creating one
Existing settings.php file includes settings.ddev.php
Configuration complete. You may now run 'ddev start'.

Parce que vous avez passé --project-type=drupal9 à votre commande ddev config, DDEV a créé plusieurs sous-répertoires et fichiers qui représentent l’organisation par défaut pour un site Drupal. L’arborescence de votre répertoire de projets ressemblera désormais à ceci :

.
├── .ddev
│   ├── .gitignore
│   ├── config.yaml
│   ├── db-build
│   │   └── Dockerfile.example
│   └── web-build
│       └── Dockerfile.example
└── web
    └── sites
        └── default
            ├── .gitignore
            ├── settings.ddev.php
            └── settings.php

6 directories, 7 files

ddev/ sera le dossier principal pour la configuration de ddev. web/ sera le root documentaire de votre nouveau projet ; il contiendra plusieurs fichiers settings. spécifiques. Vous disposez maintenant de la structure initiale pour votre nouveau projet Drupal.

Votrte prochaine étape consiste à initialiser votre plate-forme, qui permettra de construire les conteneurs et les configurations de réseau nécessaires.  DDEV se lie aux ports 80 et 443, donc si vous utilisez un serveur web comme Apache sur votre machine, ou tout autre chose qui utilise ces ports, arrêtez ces services avant de continuer.

Utilisez la commande ddev start pour initialiser votre plate-forme :

ddev start

Cela permettra de construire tous les conteneurs basés sur Docker pour votre projet, qui comprennent un conteneur web, un conteneur de base de données et phpmyadmin. Une fois l’initialisation terminée, vous verrez un résultat comme celui-ci (votre numéro de port peut être différent) :

...
[secondary_label Output]
Successfully started d9test
Project can be reached at http://d9test.ddev.site http://127.0.0.1:32773

docker ps

ddev start a réussi à construire vos conteneurs et vous a donné une sortie avec deux URL. Bien que cette sortie indique que votre projet « can be reached at http://d9test.ddev.site and http://127.0.0.1:32773 », le fait de visiter ces URL maintenant entraînera une erreur. À partir de Drupal 8, le noyau de Drupal et les modules contrib fonctionnent comme des dépendances. Par conséquent, vous devez d’abord terminer l’installation de Drupal à l’aide de Composer, le gestionnaire de paquets pour les projets PHP, avant que tout ne se charge dans votre navigateur web.

L’une des caractéristiques les plus utiles et les plus élégantes de DDEV est que vous pouvez passer les commandes de Composer par le CLI de DDEV et dans votre environnement conteneurisé. Cela signifie que vous pouvez séparer la configuration spécifique de votre machine de votre environnement de développement. Vous n’avez plus à gérer les différents problèmes de chemin de fichier, de dépendance et de version qui accompagnent généralement le développement local de PHP. De plus, vous pouvez rapidement changer de contexte entre plusieurs projets utilisant différents cadres et piles techniques avec un minimum d’effort.

Utilisez la commande ddev composer pour télécharger drupal/recommended-project. Cela permettra de télécharger le noyau de Drupal, ses bibliothèques et d’autres ressources connexes, puis de créer un projet par défaut :

ddev composer create "drupal/recommended-project"

Téléchargez maintenant un dernier composant appelé Drush, ou Drupal Shell. Ce tutoriel n’utilisera qu’une seule commande drush, et ce tutoriel fournit une alternative, mais drush est un CLI puissant pour le développement de Drupal qui peut améliorer votre efficacité.

Utilisez ddev composer pour installer drush :

ddev composer require "drush/drush"

Vous avez maintenant construit un projet Drupal 9 par défaut et installé drush. Vous allez maintenant visualiser votre projet dans un navigateur et configurer les paramètres de votre site web.

Étape 3 — Configuration de votre projet Drupal 9

Maintenant que vous avez installé Drupal 9, vous pouvez visiter votre nouveau projet dans votre navigateur. Pour ce faire, vous pouvez relancer ddev start et copier l’une des deux URL qu’il produit, ou vous pouvez utiliser la commande suivante, qui lancera automatiquement votre site dans une nouvelle fenêtre de navigateur :

ddev launch

Vous y trouverez l’assistant d’installation standard de Drupal.

Vous avez ici deux possibilités. Vous pouvez utiliser cette interface utilisateur et suivre l’assistant tout au long de l’installation, ou vous pouvez retourner à votre terminal et passer une commande drush via ddev. Cette dernière option automatisera le processus d’installation et définira admin comme votre nom d’utilisateur et votre mot de passe.

Option 1 — Utiliser l’assistant

Retournez à l’assistant dans votre navigateur. Sous Choose language, sélectionnez une langue dans le menu déroulant et cliquez sur Save and continue. Sélectionnez maintenant un profil d’installation. Vous pouvez choisir entre Standard , Minimal , et Demo. Faites votre choix, puis cliquez sur Save and continue.  Drupal vérifiera automatiquement vos besoins, mettra en place une base de données et installera votre site. La dernière étape consiste à personnaliser quelques configurations. Ajoutez un nom de site et une adresse électronique de site qui se termine par votre domaine. Choisissez ensuite un nom d’utilisateur et un mot de passe. Choisissez un mot de passe fort et conservez vos informations d’identification dans un endroit sûr. Enfin, ajoutez une adresse électronique privée que vous vérifiez régulièrement, remplissez les paramètres régionaux, puis appuyez sur Save and continue.

Votre nouveau site sera chargé avec un message de bienvenue.

Option 2 — Utilisation de la ligne de commande

Depuis le répertoire root de votre projet, lancez la commande ddev exec pour installer un site Drupal par défaut en utilisant drush :

ddev exec drush site:install --account-name=admin --account-pass=admin

Votre site sera créé de la même manière que l’assistant, mais avec quelques configurations standard. Votre nom d’utilisateur et votre mot de passe seront admin.

Lancez maintenant le site pour le visualiser dans votre navigateur :

ddev launch

Vous êtes maintenant prêt à commencer à construire votre site web, mais il est considéré comme une bonne pratique de vérifier que vos autorisations sont correctes pour le répertoire /sites/web/default. Lorsque vous travaillez localement, ce n’est pas une préoccupation importante, mais si vous transférez ces autorisations à un serveur de production, elles poseront un risque de sécurité.

Étape 4 — Vérifier vos autorisations

Pendant l’installation de l’assistant, ou lors du premier chargement de votre page d’accueil, vous pouvez voir un avertissement concernant les paramètres des permissions dans votre répertoire /sites/web/default et un fichier à l’intérieur de ce répertoire : settings.php.

Après l’exécution du script d’installation, Drupal essaiera de définir les permissions read et execute pour le répertoire web/sites/default, pour tous les groupes : il s’agit d’un paramètre de permissions 555. read only, ou 444. Si vous rencontrez cet avertissement, exécutez ces deux commandes `chmod` du répertoire root de votre projet. Tout manquement à cette obligation constitue un risque pour la sécurité :

chmod 555 web/sites/default
chmod 444 web/sites/default/settings.php

Pour vérifier que vous avez les bonnes autorisations, exécutez la commande ls avec les boutons a , l , h et d :

ls -alhd web/sites/default web/sites/default/settings.php

Vérifiez que vos autorisations correspondent à la sortie suivante :

Output
dr-xr-xr-x 8 sammy staff 256 Jul 21 12:56 web/sites/default
-r--r--r-- 1 sammy staff 249 Jul 21 12:12 web/sites/default/settings.php

Vous êtes maintenant prêt(e) à développer un site web Drupal 9 sur votre machine locale.

Étape 5 — Créer votre premier article dans Drupal

Pour tester certaines des fonctionnalités de Drupal, vous allez maintenant créer un message en utilisant l’interface utilisateur du web.

Depuis la page initiale de votre site, cliquez sur le bouton Content dans le menu supérieur à gauche. Cliquez maintenant sur le bouton bleu add content. Une nouvelle page apparaîtra. Cliquez sur Article, et une autre page apparaîtra.

Ajoutez le titre et le contenu que vous souhaitez. Vous pouvez également ajouter une image, comme l’un des fonds d’écran de DigitalOcean . Lorsque vous êtes prêt, cliquez sur le bouton bleu save.

Votre premier article apparaîtra sur votre site web.

Vous développez maintenant un site web Drupal 9 sur votre machine locale sans jamais interagir avec un serveur grâce à Docker et DDEV. Dans l’étape suivante, vous gérerez le conteneur DDEV afin d’adapter votre flux de travail.

Étape 6 — Gérer le conteneur DDEV

Lorsque vous avez terminé le développement de votre projet, ou lorsque vous souhaitez faire une pause, vous pouvez arrêter votre conteneur DDEV sans vous soucier de la perte de données. DDEV peut gérer un changement rapide de contexte parmi de nombreux projets ; c’est l’une de ses caractéristiques les plus utiles. Votre code et vos données sont toujours conservés dans le répertoire de votre projet, même après que vous ayez arrêté ou supprimé le conteneur DDEV.

Pour libérer des ressources, vous pouvez arrêter DDEV à tout moment. Depuis le répertoire root de votre projet, exécutez la commande suivante :

ddev stop

DDEV est disponible dans le monde entier, vous pouvez donc exécuter des commandes ddev depuis n’importe quel endroit, à condition de spécifier le projet DDEV :

ddev stop d9test

Vous pouvez également consulter tous vos projets en même temps en utilisant ddev list :

ddev list

DDEV comprend de nombreuses autres commandes utiles.

Vous pouvez à tout moment relancer DDEV et continuer à vous développer localement.

Conclusion

Dans ce tutoriel, vous avez utilisé Docker et la puissance de la conteneurisation pour développer un site Drupal localement, avec l’aide de DDEV. DDEV s’intègre également bien avec de nombreux EDI et fournit un débogage PHP intégré pour Atom, PHPStorm et Visual Studio Code (vscode). Vous pouvez également en apprendre davantage sur la création d’environnements de développement pour Drupal avec DDEV ou sur le développement d’autres cadres PHP comme Wordpress .