Déployer WordPress avec une Azure Web App et MySQL

Introduction

Qu’est-ce que WordPress ?

WordPress gère environ 40% de tous les sites web sur Internet. WordPress est un système de gestion de contenu open source sous licence GLPv2, ce qui signifie que tout le monde peut utiliser ou modifier le logiciel WordPress.

Avec ce CMS vous allez pouvoir créer des sites d’entreprises, des boutiques, des blogs, portfolios, CV, Forums, et plein d’autres.

Pour créer un site avec WordPress vous avez deux options :

• WordPress.org : Il s’agit du logiciel WordPress open-source que vous pouvez installer sur votre propre hébergement pour créer un site web depuis un serveur dédié ou une VM.
• WordPress.com : A l’inverse, avec WordPress.com, vous ne gérez pas le serveur web mais pouvez directement créer votre site en ligne sans avoir à vous occuper de la technique. 

L’architecture de ce tutoriel

Dans ce tutoriel nous allons installer WordPress en tant que CMS dans une Azure Web App. Pour fonctionner WordPress a besoin d’une base de données, nous allons donc installer une base de données MySQL dans Azure pour créer les tables nécessaires au fonctionnement de WordPress.

Si vous choisissez l’option WebApp + Database, Azure ne vous permet pas d’accéder à la base de données en public. Vous devez vous y connecter via le SSH de la Web App. Même chose, si vous choisissez l’option WordPress on App Service, dans ce cas WordPress est déjà préinstallé par Microsoft.

Dans notre cas, nous allons créer une WebApp et une base de données séparément afin que l’exercice soit plus intéressant.

Installation des ressources Azure

Création de la Web App dans Azure

Pour la configuration de notre Web App il faudra prendre une Web App seulement dans le service App Services d’Azure. La configuration que nous allons choisir est décrite ci-dessous :

• Choisir un ressource group, une région et un nom pour votre Web App

• Prendre PHP comme runtime Stack
• Ne pas cocher la case Create a Database
• Enable public access dans la section networking
• Choisissez la taille de votre instance selon vos besoins 

Vous pourrez ensuite laisser les autres paramètres par défaut.

Création de la base de données MySQL dans Azure

Une fois que vous avez trouvé l’objet Azure Database for MySQL servers, créez une nouvelle ressource en respectant les informations ci-dessous :

• Choisir un Flexible server
• Choisir le même resource group et la même région que votre Web App.
• Donner un nom à votre base de données

• Donner un admin username et un mot de passe (à conserver précieusement)
• Choisissez la taille de votre instance selon vos besoins 

Pour les réglages où je ne vous indique rien, vous pouvez conserver les paramètres proposés par défaut.

Pour la partie Networking, configurez comme suit :

• Connectivity method: Allow Public access.
• Allow public access to Internet through the internet. Les 2 premiers réglages permettent d’accéder à notre base de données depuis Internet (sans restriction – certes pas idéal d’un point sécurité mais c’est pour tester).
• Allow public access from any ressources : permet d’autoriser les autres services Azure comme notre Web App à accéder à notre BDD.
• Ajouter votre Adresse IP dans Firewall rules : vous permet de vous connecter à votre base MySQL depuis votre ordinateur. C’est donc mon IP personnelle que j’ai autorisée.

Pour plus de clarté, voici une capture d’écran des réglages que j’ai choisi :

Ici, notre base de données et notre Web App sont séparés. Pour que nos deux services communiquent entre eux nous devons donc ouvrir les flux entre les deux.

Si nous avions voulu restreindre les flux de notre base de données, il aurait été préférable de sélectionner l’option Web App + Database lors de la création de notre Web App. Cette option déploie une base de données qui communique uniquement avec la Web App.

Installation de WordPress

Maintenant que notre instance MySQL est prête. Nous allons pouvoir créer une base de données et transférer les fichiers WordPress pour démarrer l’installation.

Provisionnement de la Base de données

Pour se connecter à la base de données je vous conseille d’installer MySQL Workbench mais vous pouvez utiliser un autre outil selon que vous utilisez Windows, macOS, etc.

Pour vous connecter à la base de données avec MySQL Workbench, procédez comme suit :

• Cliquer sur le + 
• Donner un nom à votre connexion
• Utilisez la méthode de connexion Standard (TCP/IP)
• Hostname : votre Azure Server Name que vous trouverez dans la partie Overview de votre database dans Azure
• Port 3306 par défaut 
• Username & Password sont les mots de identifiants que vous avez configuré lors de la création de votre Database. 

Vous serez capable de vous connecter car vous avez ajouté votre adresse IP dans les Firewall rules lors de l’installation de votre base de données. Si vous pensez que votre adresse IP a changé entre temps, il vous faudra mettre à jour le réglage dans la partie Networking.

Pour créer votre base de données dans MySQL Workbench veuillez : 

• Faire un clic-droit dans le menu déroulant à gauche Create Schema
• Donnez un nom à votre schéma puis Apply

Bravo, vous avez créé votre base de données.

Installation de WordPress dans la Web App

Nous allons installer WordPress dans la Web App en ligne de commande ssh.

Pour ce faire, cliquez sur SSH dans le menu déroulant gauche de votre WebApp puis appuyez sur Go

Rendez-vous au répertoire wwwroot avec cette commande :

cd site/wwwroot

Vous allez maintenant télécharger le fichier tar.gz de WordPress directement dans notre Azure Web App.
Vous pouvez accéder aux dernières versions ici. 

Faites clic-droit sur tar.gz et cliquez sur Save link address.

De retour dans votre commande ssh veuillez taper la commande :

wget [le link tar.gz]

L’archive est téléchargée. Nous pouvons maintenant la décompresser :

 tar -xzvf [your wordpress.tar.gz]

Par défaut, cela va créer un sous-dossier WordPress. Nous devons positionner tous les fichiers à la racine de notre Web App (et donc déplacer tous les fichiers dans le dossier parent). 

cd wordpress

Exécuter la commande ci-dessous :

mv * ../

Retourner dans le dossier de wwwroot. Si vous avez bien suivi toutes les étapes vous devriez avoir toutes ces fichiers en tapant la commande :

Vous allez maintenant pouvoir lancer la WebApp. Allez dans Overview et cliquer sur Browse dans la console azure.

Nous verrons également un peu plus loin comment changer l’URL de notre site afin de ne pas utiliser l’adresse gratuite fournit par Microsoft : [YourWebAppName].azurewebsites.net.

Vous devriez avoir le rendu ci-dessous :

Dans un premier temps, le site est moche parce que nous avons un problème d’affichage lié à la configuration HTTPS. Celle-ci bloque l’accès à nos styles CSS qui ne se chargent pas. Nous corrigerons ce problème un peu plus bas.

Choisissez votre langue puis faites Continue. Sur la page suivante cliquez sur  Let’s go.

Une fois que c’est fait, il nous reste à indiquer à WordPress où se trouve sa base de données MySQL.

Pour vous connecter à votre base de données, renseignez les éléments ci-dessus :

• Database Name est le nom de votre schéma que vous avez créé dans MySQL Workbench.

• Username et le Password que vous avez configuré pour se connecter à votre base de données. 
• Database host : c’est le nom de notre serveur MySQL où se trouve notre base de données.
• Table Prefix : vous pouvez conserver l’option par défaut.

Cliquez ensuite sur Submit puis sur Run the installation.

Notre site WordPress est installé avec un premier article préconfiguré. Mais notre site est toujours moche en termes d’affichage. Nous allons donc corriger le problème de chargement de CSS et de https.

Nous allons donc modifier les informations contenues dans le fichier wp-config.php. Pour ce faire, (re)connectez-vous en SSH.

Mettez-vous au niveau de wwwroot :

cd site/wwwroot

Modifiez le fichier grâce à la commande NANO :

nano wp-config.php

Tout au début, après la ligne : <?php et avant la ligne /** , insérez ces quatres lignes : 

@ini_set('session.cookie_httponly', true);
@ini_set('session.cookie_secure', true);
@ini_set('session.use_only_cookies', true);

$_SERVER["HTTPS"] = "on";

Lorsque c’est bon, sauvegardez votre document en faisant CTRL + X pour fermer votre document, Y pour valider les modifications et enfin Entrer pour sortir de NANO.

Maintenant rafraîchissez votre page web. Votre site devrait être affiché correctement. 😊

Remplissez les informations sur cette page puis cliquez sur Install WordPress.

Bravo, votre site WordPress est installé correctement et la partie graphique se charge convenablement.

Vous pouvez vous connecter sur l’URL https://votre-site/wp-admin afin d’accéder à votre portail d’administration pour créer votre premier article.

Ajouter un nom de domaine personnalisé

Prérequis

Jusqu’à présent, notre site est fonctionnel mais avec une adresse prêtée par Microsoft en azurewebsites.net. Nous allons maintenant voir comment associer notre propre nom de domaine afin d’avoir un site à notre image.

Ajout d’un nom de domaine

Dans le menu à gauche de votre WebApp, cherchez l’option Custom Domains.

Ensuite veuillez remplir les infos comme indiqué sur screenshot ci-dessous.

En bleu, veuillez sélectionner ces deux options qui vous permettront d’ajouter un nom de domaine à votre Web App. Par défaut, Azure nous incite également à ajouter un certificat SSL afin de passer notre site en HTTPS. Pour l’instant, choisissez l’option Add certificate later.

Pour associer notre nom de domaine personnalisé, nous allons devoir créer des entrées DNS dans notre registrar : 1 entrée de type CNAME et 1 entrée de type TXT.

Cliquez sur Validate. L’opération peut nécessiter un peu de temps mais vous devez finir par avoir un status en vert. Ensuite cliquez sur Add.

Notre domaine personnalisé est associé. Il nous reste à le sécuriser afin de pouvoir faire du HTTPS.

Ajout du certificat

Nous allons maintenant ajouter un certificat à notre site web pour qu’il puisse être sécurisé. Dans le menu à gauche, cliquez sur Certificates et créez un nouveau certificat.

Ce service est fourni par Azure et aucun frais supplémentaire ne vous sera facturé en plus. Choisissez votre domaine et donnez un nom à votre certificat.

Une fois votre certificat ajouté, revenez sur custom domains dans le menu déroulant de votre WebApp et cliquez sur Binding pour ajouter votre certificat à votre nom de domaine.

Vous pouvez également choisir d’importer votre propre certificat SSL simplement la configuration sera un peu différente.

Bravo, votre site est sécurisé ! 🛡️

Leo PARENT 😀

Si vous avez d’autres questions n’hésitez pas à me contacter sur Linkedin ou directement via mon site.