Développement WordPress

WordPress : Choisir son hébergement et procéder à l’installation d’un espace de développement

La semaine dernière, nous avons vu comment choisir son thème, aujourd’hui il est temps de choisir son hébergement web et de procéder à l’installation d’un espace de développement ! Dans cet article je vous expliquerai deux façons de faire :

  • Héberger son site et son espace de développement sur un seul et même hébergement web et configurer son espace de développement sur un sous-domaine
  • Héberger son site sur son hébergement web et configurer son espace de développement local avec XAMPP (compatible Windows / Linux / OS X)

Concernant l’hébergement, j’ai choisi un serveur VPS SSD de chez OVH. Pourquoi un serveur VPS ? Simplement car c’est plus flexible qu’un simple hébergement mutualisé, que je connais la puissance qui est allouée à mon instance et que j’aime avoir la main sur ce qui est installé (OS, version de PHP…). Si vous n’êtes pas du tout technique et que vous avez un peu peur de devoir tout configurer, vous pouvez opter pour un hébergement mutualisé. Pour la suite de cet article, survolez la partie « Achat et configuration du serveur VPS et de votre domaine ». Attention cependant si vous ne prenez pas un pack domaine + hébergement mutualisé, il faudra pointer le domaine vers l’hébergement mutualisé (sur ce point je vous laisse passer par Google, il y a beaucoup de tutoriaux selon votre hébergeur / registrar).

Achat et configuration du serveur VPS et de votre domaine

Les offres VPS SSD sont visualisables sur cette page. A noter que pour commencer vous pouvez partir sur un VPS SSD 1, si vous ressentez le besoin de monter en puissance par la suite, vous pourrez le faire simplement via l’interface de gestion OVH.

Une fois l’offre sélectionnée, choisissez la location du serveur que vous souhaitez (personnellement j’ai choisi Strasbourg) et dans la section « Mon système d’exploitation », choisissez CentOS 6 64bits puis cliquez sur continuer.

Allez jusqu’à la fin de la procédure de paiement et attendez de recevoir le mail de confirmation.

Pour le nom de domaine, je vous laisse libre de le prendre chez le registrar que vous souhaitez. Pour des raisons pratiques, j’ai personnellement tout pris chez OVH (attention cependant à ne bien prendre aucun hébergement lors de l’achat du domaine).

Connexion au serveur via SSH

Vérifiez votre boite mail, vous devriez avoir reçu un mail avec l’adresse IP de votre serveur et vos accès root. Pour se connecter en SSH, sur Windows vous aurez besoin de télécharger Putty. Sur OS X ou Linux, ouvrez simplement votre terminal.

Sous Windows avec Putty
Lancez putty et dans « Host name », entrez l’adresse de votre serveur VPS et cliquez sur « Open ». Une fenêtre vous indiquera peut-être une erreur de sécurité, ce n’est rien de bien grave. Cliquez simplement sur « Oui » (c’est une simple erreur vous indiquant que la clé de sécurité du serveur est inconnue du cache de Putty). Entrez votre login (qui devrait être « root ») et votre mot de passe reçu par mail. Vous voilà maintenant connecté à votre serveur via SSH.

ssh

Sous OS X ou Linux avec le terminal
Ouvrez votre terminal et tapez la ligne suivante en prenant bien soin de remplacer l’ip de votre serveur :

root@l'ip de votre serveur

Le terminal devrait vous demander votre mot de passe, récupérez-le dans le mail envoyé par OVH et renseignez-le dans le terminal. Vous devriez à présent être connecté en SSH à votre serveur.

Installation de VestaCP

Je vous en parlais il y a peu, nous allons utiliser VestaCP pour administrer notre serveur. Si vous souhaitez en savoir un peu plus sur VestaCP avant de procéder à son installation, je vous invite à lire l’article traitant de mes premiers pas sur VestaCP rédigé il y à deux semaines.

Deux lignes de commandes suffisent à lancer l’installation :

On télécharge le script d’installation :

curl -O http://vestacp.com/pub/vst-install.sh

On le lance :

bash vst-install.sh

Un jeu d’enfant ;). Si l’installer ne se lance pas vous indiquant que le paquet bind-9 est déjà installé, tapez simplement

yum remove bind

Pour désinstaller ce paquet, puis relancez l’installation.

Vous devriez arriver sur ceci :

Installation de VestaCP

Installation de VestaCP

Il ne vous reste plus qu’à suivre la procédure d’installation. Voici les différents points que vous allez rencontrer et ce qu’il faut renseigner (c’est assez captain Obvious mais bon on sait jamais) :

  • Please enter valid email address : Entrez une adresse e-mail valide
  • Please enter hostname : Entrez l’adresse de votre serveur VPS, elle devrait être du type : vpsXXXXXXX.ovh.net
  • Et… C’est tout !

Logiquement l’installation devrait suivre sans soucis. Une fois terminé, vérifiez vos mails (à l’adresse indiquée). Vous devriez avoir reçu un mail avec l’adresse du panneau d’administration, votre login et votre mot de passe ! Ces infos sont également disponibles en ligne de commande à la fin de l’installation.

Configuration de votre domaine

Avant d’aller plus loin, nous allons avoir besoin de pointer notre nom de domaine (et un sous domaine pour l’url de développement si vous souhaitez utiliser la version « en ligne » de l’espace de développement). Rendez-vous sur l’interface de gestion « Zone DNS » de votre domaine, chez OVH, ça se présente sous cette forme :

Interface de configuration Zone DNS OVH.

Interface de configuration Zone DNS OVH

Éditez l’enregistrement « votrenomdedomaine » Type A, et faites-le pointer vers l’IP de votre serveur VPS. Éditez également les enregistrement relatifs aux mails (MX, POP3, SMTP, IMAP…) et pointez les vers « votrenomdedomaine » en Type CNAME. Vous trouverez ci-dessous un tableau simplifié avec les enregistrements à éditer si vous êtes perdu :

Tableau récapitulatif des enregistrements DNS

Tableau récapitulatif des enregistrements DNS

Si vous souhaitez avoir un espace de développement en ligne, ajoutez également l’enregistrement suivant :

dev.votrenomdedomaine.   CNAME votrenomdedomaine.

Votre domaine devrait maintenant pointer vers votre serveur, on peut passer à la suite !

Création d’un hébergement et d’une base de données sur VestaCP

L’hébergement

Nous allons procéder à la création de l’hébergement sur VestaCP (ou deux, pour l’espace de développement en ligne). Rendez-vous sur votre interface d’administration VestaCP (l’url reçue par mail) et connectez-vous. Pour plus de confort, n’hésitez pas à changer votre mot de passe et à passer l’interface en français. Une fois connecté, passez la souris sur le compte admin, cliquez sur edit, changez votre mot de passe et dans « Language » indiquez « FR » puis validez.

Dans la barre supérieure, cliquez sur « WEB », et cliquez sur le gros bouton vert « + » intitulé « ajoutez un domaine ». Voici comment renseigner les champs :

  • Domaine : Entrez votre nom de domaine (sans le www.)
  • Décochez support DNS
  • Laissez support Email coché
  • Cliquez sur Options avancées et tout en bas cliquez sur FTP Additionnel
    • Entrez un login (attention, un préfixe avec votre login sera automatiquement ajouté devant le nom d’utilisateur)
    • Entrez un mot de passe (ou générez en un)
    • N’entrez rien dans le path
    • Vous pouvez entrer votre email pour que ces informations vous soient envoyés

Votre premier nom de domaine est prêt !

Renouvelez l’opération pour un éventuel espace de développement en ajoutant bien entendu « dev. » votre nom de domaine (et pensez à supprimer l’alias).

La base de données

Pour la base de données, rendez-vous dans « DB », cliquez sur le bouton vert « + » intitulé. Comme pour l’hébergement, voici comment renseigner les champs :

  • Base de données : Entrez le nom de votre base de données (attention, un préfixe avec votre login sera automatiquement ajouté devant le nom de la base de données)
  • Utilisateur : Entrez le nom d’utilisateur que vous souhaitez pour vous connecter à la BDD (attention, ici aussi un préfixe sera automatiquement ajouté)
  • Mot de passe : Entrez ou générez un mot de passe
  • Laissez tout le reste par défaut, vous pouvez cependant entrer votre email pour recevoir ces informations par mail

Renouvelez l’opération pour un éventuel espace de développement.

Installation de WordPress

Nous y voilà enfin ! L’installation de WordPress. C’est la partie qui nous intéresse le plus et le mieux dans tout ça, c’est que ça sera la partie la plus rapide.

Commencez par télécharger la dernière version de WordPress sur fr.wordpress.org. Une fois téléchargée, dé-zippez le tout.

Téléchargez Filezilla Client et installez-le. Une fois installé, lancez le simplement.

Vous devriez arriver sur une interface similaire à celle-ci :

filezilla

Interface de Filezilla

Cliquez sur le bouton « Gestionnaire de sites » en haut à gauche en dessous de « Fichier » et cliquez sur « Nouveau site ».

Renseignez la colonne de droite de la manière suivante :

  • Hôte : Entrez le nom de domaine de votre site ou l’IP de votre serveur
  • Type d’authentification : Normale
  • Identifiant : Entrez l’identifiant de connexion FTP que vous avez crée précédemment (n’oubliez pas le préfixe)
  • Mot de passe : Entrez le mot de passe de votre compte FTP

Cliquez sur Connexion, vous voilà connecté à votre espace d’hébergement !

Vous voilà connecté à votre espace d'hébergement

Vous voilà connecté à votre espace d’hébergement

Pour faire simple, tout ce qui est à gauche est votre PC (ou MAC) et tout ce qui est à droite est le serveur distant. Commencez par aller dans le dossier intitulé « public_html », sélectionnez tout le contenu et supprimez le.

Sur l’interface de gauche, naviguez jusqu’à l’endroit ou vous avez dé-zippé votre installation WordPress, sélectionnez le contenu du répertoire puis clic-droit et « Envoyer » (vérifiez bien que sur la droite votre navigateur est bien dans le dossier public_html). Filezilla devrait transférer les fichiers vers le serveur.

Une fois le transfert terminé, ouvrez votre navigateur internet et rendez-vous sur votre nom de domaine, cette page devrait se présenter à vous :

Installation de WordPress

Installation de WordPress

L’installation va ensuite vous demander plusieurs informations relatives à la base de données :

  • Nom de la base de données : Entrez le nom de la base de données défini précédemment (n’oubliez pas le préfixe)
  • Identifiant : Entrez l’identifiant (pareil, n’oubliez pas le préfixe)
  • Mot de passe : Entrez le mot de passe
  • Adresse de la base de données : Laissez localhost
  • Préfixe des tables : Entrez un truc barbare du genre wp_343492_ par exemple, si un jour votre site se fait pirater le pirate aura un peu plus de mal à taper dans votre base de données sans connaitre le nom exact des tables

Si tout s’est bien déroulé, WordPress devrait vous indiquer que tout est ok et vous pourrez procéder à la suite de l’installation en cliquant sur le bouton « Lancer l’installation ».

WordPress vous demande à présent des informations relatives à votre site :

  • Titre du site : Entrez le titre de votre site, son nom
  • Identifiant : Entrez l’identifiant administrateur. Évitez le classique « admin », ça protégera un minimum votre installation des attaques bruteforce
  • Mot de passe : Entrez deux fois votre mot de passe, essayez de respecter l’astuce présente en dessous des champs
  • Votre adresse de messagerie : Entrez votre adresse de messagerie
  • Vie privée : En décochant la case, WordPress indique aux moteurs de recherche que vous ne souhaitez pas que votre site soit référencé. Utile pour les espaces de développement cependant laissez la coché on va protéger l’espace avec un verrou supplémentaire dans tous les cas

Votre WordPress est maintenant installé, vous devriez avoir accès au panel d’administration avec vos identifiants !

Répétez l’opération pour votre éventuel espace de développement en ligne.

Espace de développement

Si vous avez choisi l’espace de développement en ligne, celui-ci devrait déjà être en place si vous avez suivi cet article. Je vais simplement vous aider à ajouter un petit verrou supplémentaire pour que n’importe qui n’y ait pas accès. Pour l’espace de développement en local, suivez la procédure ci-dessous !

Verrouiller l’accès à mon espace de développement en ligne avec un fichier .htaccess et .htpasswd

Pour éviter que n’importe quel Jean-mi puisse se connecter à votre espace de développement, on va y ajouter un fichier htaccess (ou éditer celui de WordPress) et un fichier htpasswd pour sécuriser tout ça. En gros, à chaque nouvelle connexion sur votre espace de développement, cette fenêtre s’affichera :

Protection par htpasswd

Protection par htpasswd

Et si l’utilisateur ne connait pas le login/password, il se fera insulter de la manière suivante :

Authorization Required

This server could not verify that you are authorized to access the document requested. Either you supplied the wrong credentials (e.g., bad password), or your browser doesn’t understand how to supply the credentials required.

Ainsi, vous empêchez tous les accès à votre espace.

Il vous faudra créer un fichier .htaccess et un fichier .htpasswd.

Pour le fichier .htaccess il faudra y insérer ces lignes et le placer dans votre dossier public_html :

AuthUserFile /chemin/vers/htpasswd
AuthName "L'accès à ce répertoire est sécurisé."
AuthType Basic
Require valid-user

Pensez à bien modifier le chemin vers le fichier htpasswd, sous VestaCP le chemin est le suivant par défaut (attention, je ne place pas mon fichier .htpasswd dans le dossier public_html afin qu’il ne soit pas récupérable par un client) :

AuthUserFile /home/admin/web/VOTRENOMDEDOMAINE/.htpasswd

 

Pour le fichier .htpasswd, comme indiqué précédemment je le crée à la racine de mon FTP :

login:motdepasse
login2:motdepasse2

Vous pouvez créer plusieurs login/password, un par ligne. Il est également possible d’encrypter les mots de passe, vous trouverez un très bon générateur à cette adresse.

Votre espace de développement en ligne devrait maintenant être protégé de toute visite non voulue ;).

Créer un espace de développement en local avec XAMPP

XAMPP est un environnement de développement entièrement gratuit qui vous permet de facilement installer un serveur Apache avec PHP et un serveur de base de données MySQL sur votre machine. C’est compatible toute plateforme et je vous laisse procéder au téléchargement de XAMPP sur le site officiel.

Une fois installé vous devriez avoir accès à ce panel d’administration :

XAMPP Control panel

XAMPP Control panel

Il vous suffit de lancer Apache et MySQL (en cliquant sur les deux boutons start) et si vous ouvrez votre navigateur à l’adresse : http://127.0.0.1 vous devriez voir une jolie page d’accueil XAMPP !

Ouvrez votre explorateur de fichiers et naviguez jusqu’à l’endroit ou XAMPP a été installé. Vous devriez avoir un dossier nommé « htdocs », c’est ce dernier qui contient vos pages web. Ouvrez ce dossier, créez à l’intérieur de ce dernier un dossier nommé « devwordpress » (par exemple) et copiez-y les fichiers d’installation WordPress.

Avant de procéder à l’installation du gestionnaire de contenus, il va falloir créer une base de données, nous allons utiliser PhpMyAdmin pour y arriver. Ouvrez votre navigateur internet et naviguez à l’adresse : http://127.0.0.1/phpmyadmin

Vous devriez avoir une interface similaire à celle-ci :

Interface PhpMyAdmin

Interface PhpMyAdmin

Sur la gauche, cliquez sur « Nouvelle base de données », nommez la et cliquez sur « Créer ». Votre base de données devrait apparaître dans le menu de gauche.

Vous pouvez maintenant procéder à l’installation de WordPress (suivre le tuto un peu plus haut) normalement, simplement lorsque l’on vous demandera les informations de la base de données, renseignez-y les données suivantes :

  • Nom de la base de données : Entrez le nom de la base de données que vous avez défini
  • Identifiant : root
  • Mot de passe : laissez vide
  • Adresse de la base de données : Laissez localhost
  • Préfixe des tables : Entrez un truc barbare du genre wp_343492_ par exemple, si un jour votre site se fait pirater, le pirate aura un peu plus de mal à taper dans votre base de données sans connaitre le nom exact des tables

Votre espace de développement local est maintenant prêt !

On en a terminé pour la partie « choisir son hébergement et procéder à l’installation d’un espace de développement », la semaine prochaine on verra comment créer une belle landing page sur son domaine principal en attendant que le site soit terminé ! Pour cela, on verra les bases de la création d’un template WordPress. Il est vrai qu’on aurait pu faire ça simplement via une simple page HTML, cependant c’est un peu plus marrant si on passe par WordPress, ça vous permettra d’apprendre quelque chose parce-que c’est un peu le but de ces articles ;).

A propos de l'auteur

Jordan

Développeur web et mobile freelance spécialisé dans le déploiement de solutions WordPress, Meteor et react, à coté de ça je joue, je regarde des trucs ou je bosse sur des projets persos "to make the world a better place" :).

Laissez un commentaire