Comment créer un site en local et le rendre accessible en ligne avec Mamp Pro

Vous souhaitez créer un site en local sur votre Mac, comme par exemple un blog wordpress et le rendre accessible sur internet en utilisant Mamp Po ? Ce tutoriel est fait pour vous.

Liste des pré-requis :

• Logiciel Mamp Pro
• Une IP fixe, sinon il vous faudra paramétrer des DynDns pour faire pointer automatiquement votre Ip dynamique vers votre nom de domaine
• Un nom de domaine .com ou .fr par exemple que vous pouvez éventuellement acheter sur un site comme https://www.ionos.fr/

Installer Mamp Pro

Dans un premier temps, il faut installer Mamp Pro pour mac. 

Une fois installé, l’interface de la version 6.8 de Mamp Pro ressemble à ceci :

Installer un site wordpress en local

On va donc installer un site wordpress en local et ca tombe plutôt bien, Mamp Pro a déjà cela de pré-paramétré.

• En dessous de la colonne du milieu, vous avez un bouton + cliquez dessus et cette fenêtre devrait apparaitre :

• Choisissez bien évidemment WordPress et appuyez sur « continuer ».

• Dans le champ name, mettez le nom de votre site internet par exemple : leturfu.com
• Cliquez ensuite sur le bouton « choose », pour choisir le répertoire où va s’installer votre site. Pour ma part, je l’ai installé dans mon disque dur à l’emplacement /Users/ItaliaStylz/Sites/Leturfu (si vous n’avez pas prévu d’emplacement, vous avez le bouton « New Folder » pour créer le répertoire de destination).
• Laissez ensuite coché la case « Generate certificate for https access (SSL) » et cliquez sur le bouton « continue »

• Rentrez ensuite les cases Admin name, Admin Password, et votre email qui seront vos identifiants de connexion à votre back office Worpress après l’installation.
• Pour les trois cases en dessous, vous pouvez laisser par défaut.

---

Impossible de créer la nouvelle base de donnée ?

Attention à cette étape si les champs ne peuvent pas être validés, c’est que vous avez déjà peut être créer précédemment dans un autre test, une base de donnée comportant les mêmes nom.
Dans ce cas là, il faut vider la base de donnée.

• Appuyez si ce n’est pas déjà le cas sur le bouton « Start » en haut a droite puis allez dans la colonne de gauche sur « MySql » puis cliquez sur l’icône « phpMyAdmin ».

• Cliquez à gauche sur la table que vous avez créée avec un autre test, dans mon cas « ZjdjirE_leturfu.db » puis dans la partie haute de droite, cliquez sur l’onglet « Opérations » puis sur le lien « Drop the database (DROP) »

En faisant cela, vous allez supprimer l’ancienne base de donnée qui posait problème.

---

Si tout va bien, vous avez le bouton « Create Host » qui s’active, appuyez donc dessus. Mamp Pro va procéder à l’installation de votre site WordPress en créant la base de donnée et en mettant les fichiers d’installation de wordpress dans le répertoire que vous avez choisit précédemment.

Dans le cas où après l’installation vous avez cette fenêtre d’erreur, ne vous inquiétez pas, nous allons paramétrer cela correctement. Cliquez pour le moment sur « Ignore and Restart Servers ».

Il vous faut paramétrer les ports utilisés par Mamp.

• Cliquez dans le volet de gauche, sur le menu « Ports & User »
• Appuyez sur le bouton « Set ports to 80, 81, 443, 7443, 3306 & 11211 » puis cliquez sur « Save »

Le bouton « Stop » en haut a droite de la fenêtre de Mamp Pro devrait passer en vert. Vous pouvez accéder à votre site local en cliquant sur le bouton « open » qui est situé a droite du champ Name.

• Si vous souhaitez vous connecter à votre back office de votre site wordpress, rentrez après l’adresse de votre site /wp-admin ca devrait donner quelque chose comme https://leturfu.com/wp-admin

• Rentrez ici le login et le mot de passe que vous avez configuré dans les étapes précédentes et cliquez sur « Log in ».

Si vous souhaitez mettre votre site en français, rendez dans le menu de gauche Réglage > Langue du site : Français et validez en appuyant tou en bas sur le bouton « Save changes ».

A cette étape là, votre site est bien créé mais uniquement en local. Il n’y a que vous qui puissiez y accéder. Voyons maintenant comment le rendre accessible à tout le monde.

---

Vous avez un problème de certificat pour voir votre site en local ?

Vous avez ce type de message lorsque vous essayez de vous connecter à votre site local ? Suivez ces quelques étapes :

• Allez dans l’onglet « SSL » et vérifiez que « Enable SSL » soit bien coché. Une fois activé, cliquez sur le bouton « Create a new self-signed certificat… » ce qui va créer un certificat SSL auto signé.
• Regardez où est localisé le fichier « Certificate file » qui pour ma part est dans Applications > MAMP > Library > OpenSSL > certs > leturfu.com.crt et ouvrez ce répertoire dans une fenêtre Finder du mac.
• Ouvrez en parallèle l’application trousseaux d’accès de votre mac en vous rendant dans Applications > Utilitaires  > Trousseaux d’accès

• Mettez vous sur l’onglet Système de la fenêtre Trousseaux d’accès et glissez le fichier .crt de votre site à l’intérieur (pour ma part c’est le fichier leturfu.com.crt) et validez rentrant le mot de passe du mac.

.

• Une fois déposé, double cliquez sur ce votre nom de site dans la liste du trousseaux d’accès
• Déployez la petite flèche à côté de « Se fier »
• Dans la case « Lors de l’utilisation de ce certificat » choisissez « Toujours approuver » et fermer la fenêtre en validant les modifications avec votre mot de passe du mac.

Vous avez maintenant accès à votre site local.

---

Paramétrer son rooteur

Il est possible d’avoir une IP statique en utilisant le fournisseur d’accès à internet Free ou Orange Pro. Il faut paramétrer votre rooteur de la box internet pour rendre accessible votre site local du Mac en ouvrant le port 80. Pour ma part, j’utilise Orange mais la configuration reste quasi identique chez Free.

• Rendez-vous sur l’interface du rooteur en vous rendant sur cette adresse : http://192.168.1.1/
• Rentrez votre login et mot de passe

• Cliquez sur la roulette crantée en bas de la page et sélectionnez l’icône « Réseau » puis l’onglet DHCP.

Paramétrer son Ip statique de son appareil Mac

Maintenant le but est de rendre l’ip local de son Mac fixe en affectant une ip local de son choix qui rentre dans la tranche de début et fin d’adresses Ip Lan.

• Descendez jusqu’à Baux DHCP statiques et choisissez le nom de votre Mac dans le listing (pour moi c’est iMac-Pro-1).
• Déterminez l’ip local de votre choix (192.168.1.20 dans mon cas) et cliquez sur « Ajouter ».

Ouvrir le port 80 et 443 de son rooteur

• Dirigez vous sur l’onglet Nat/Pat pour ouvrir le port 80 et 443 de votre rooteur.
• Configurez comme sur l’image ci-dessus le port 80 et 443 en TCP sur votre équipement Mac et en laissant que Ip externe : toutes.

Paramétrer son nom de domaine sur son Ip

Bon notre site local est installé, notre mac est accessible de l’extérieur, maintenant il faut que notre nom de domaine pointe sur notre adresse Ip pour que les personnes puissent y accéder.

• Il faut se rendre sur le site où vous avez réserver votre nom de domaine, pour moi c’est ionos donc je me connecte à mon compte client puis je clique sur gérer un nom de domaine qui sera leturfu.com
• Cliquez sur « Ajuster les paramètres DNS »
• Enregistrez deux paramètres de type A (pout assigner l’adresse IPv4 pour votre domaine ou sous-domaine) avec un contenant le Nom d’hôte @ et un autre avec * en mettant le TTL à 1 minute pour accélérer au maximum la prise en compte de vos nouveaux paramètres DNS.

Les deux enregistrements doivent pointer vers votre Ip internet et non votre Ip locale. Pour connaitre l’Ip a renseigner, allez sur le site https://mon-ip.io/

Une fois ces deux enregistrement faits, il faut parfois attendre plusieurs minutes, voir des fois plusieurs heures pour que le changement soit effectif.

Renseignez son Ip locale sur Mamp Pro

Désormais votre nom de domaine pointe vers votre Ip internet et votre Ip internet vers votre Mac. Paramétrons Mamp Pro pour lui dire qu’elle est l’adresse IP de notre mac.

• Dans l’onglet « General », sélectionnez l’ip locale de votre Mac (192.167.1.20 dans mon cas).
• Cliquez en haut sur le bouton « Stop’ puis a nouveau sur le bouton « Start » pour que tous les changements soient pris en compte.

Créer un certificat SSL Let’s encrypt pour Mamp Pro

Dernière étape, votre site a besoin d’un certificat SSL validé par une autorité et non un auto-signé par vous même (ou plutôt par Mamp lui même) pour assurer aux navigateurs internet que votre site est fiable.

• Ouvrez un terminal Mac en vous rendant dans Applications > Utilitaires > Terminal et tapez la commande suivante pour installer Homebrew (qui est le gestionnaire de paquets pour macOS)

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

• Ensuite, nous allons installer certbot, qui gérera le processus d’émission et de renouvellement de notre certificat SSL Let’s Encrypt en tappant dans le terminal la commande suivante :

brew install certbot

Paramétrer le httpd et le virtualHost de Mamp

Il faut maintenant configurer le virtualHost pour que la demande de création du certificat SSL puisse se faire.

• Ouvrez le finder du mac et rendez vous dans le dossier Applications > MAMP > conf > apache et éditez avec Textedit ou Sublim Text si vous avez, le fichier httpd.conf
• Décommentez dans le fichier httpd.conf la ligne Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf en retirant tout simplement le # au début de cette même ligne et enregistrez. Cette étape permet de dire à Mamp que l’on veut utiliser un Host virtuel pour notre site local et que l’on veut le configurer nous même.
• Allez dans le dossier Applications > MAMP > conf > apache et éditez de la même manière le fichier httpd-vhosts.conf

Ajoutez et adaptez ensuite ce paramétrage au votre puis enregistrez :

<VirtualHost *:80>
ServerAdmin thomas@leturfu.com
DocumentRoot "/Users/ItaliaStylz/Sites/leturfu"
ServerName leturfu.com
ServerAlias www.leturfu.com
ErrorLog "logs/leturfu.com-error_log"
CustomLog "logs/leturfu.com-access_log" common
</VirtualHost>

ServerAdmin = email du propriétaire
DocumentRoot = chemin d’accès de votre site
ServerName = url de votre site
ServerAlias = alias de votre site (www par exemple)

Lancer la création du certificat SSL

Lancez la création du certificat en utilisant l’autorité Let’s Encrypt qui va créer un certificat provisoire de 3 mois.

Ouvrez à nouveau le terminal et tapez cette ligne de commande en l’adaptant à votre nom de site :

sudo certbot certonly --webroot -w /Users/ItaliaStylz/Sites/leturfu/ -d leturfu.com -d www.leturfu.com

Vous devriez avoir quelque chose comme cela si tout s’est bien passé :

IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/leturfu.com/fullchain.pem
 Your key file has been saved at:
 /etc/letsencrypt/live/leturfu.com/privkey.pem
 Your cert will expire on XXXX-XX-XX. To obtain a new or tweaked
 version of this certificate in the future, simply run certbot
 again. To non-interactively renew *all* of your certificates, run"certbot renew"

Attention : vous ne pouvez que faire 5 demandes de certificats toutes les 168 heures. Dépassé ce quota là, let’s encrypt vous bloque en vous indiquant la date à laquelle vous pourrez refaire une nouvelle demande.

Tâche cron pour automatiser le renouvellement du certificat SSL

Renouvelez automatiquement le certificat provisoire en faisant appel à la fonction Cron.

sudo crontab -e

Appuyez sur la touche « i » de votre clavier pour éditer le fichier crontab. Inscrivez ensuite la ligne suivante :

47 2 * * * /usr/local/bin/certbot renew --quiet

Pour enregistrer et quitter l’éditeur, écrivez :

:wq

Installer le certificat SSL dans Mamp Pro

Dernière étape, on installe les certificats dans le programme Mamp Pro.

Nous devons maintenant nous accorder l’accès aux fichiers de certificat afin que MAMP puisse y accéder.

• Ouvrez Finder, dans la barre du menu Mac, cliquez sur Aller -> Aller au dossier… et tapez /etc/letsencrypt et appuyez sur entrée. Cela ouvrira le dossier Letsencrypt où se trouvent nos certificats.

Nous allons modifier les autorisations des dossiers archive et live. Suivez ces instructions pour chacun des dossiers :

• Faites un clique droit sur le dossier « archive » et choisissez « Lire des informations »
• Cliquez en bas sur le logo du cadena et identifiez votre mot de passe du mac
• Cliquez sur + et ajoutez votre nom d’utilisateur et accordez-lui les autorisations de lecture et d’écriture
• Cliquez sur l’icône « … » et choisissez « Appliquer aux éléments inclus… »
• Cliquez sur l’icône de verrouillage et fermez la page d’informations
• Répétez les étapes pour le dossier live

Etant donné que Mamp Pro n’a pas accès aux dossiers et fichiers cachés, on va devoir faire un raccourci du dossier live.

• Faites un clic droit sur le dossier live et choisissez « Créer un alias » et faites glisser l’alias du dossier live sur votre bureau.

• Dans MAMP Pro, cliquez sur l’onglet SSL. Cochez la case à côté de SSL si ce n’est pas déjà fait puis cliquez sur les différents boutons « choose » en utilisant dans la recherche l’alias du dossier « live » que vous avons précédemment fait. Oubliez pas de compléter aussi le certificat chain en cliquant sur le bouton « Advanced option ».

Certificat file = cert1.pem
Certificat key file = privkey1.pem
Certificat chain file (Apache only) = chain1.pem

Redémarrez à nouveau le serveur en cliquant sur « Stop » puis sur « Start » pour valider les modifications.

Voilà votre site est maintenant disponible en ligne 🙂