Pourquoi héberger son site statique sur netlify?

Depuis quelque temps, les sites statiques deviennent de plus en plus répandus, comme le témoigne l'apparition de frameworks dédiés a ça tel que Gatsby ou encore Jekyll ou Hugo.

En effet, comme la génération ne se produit plus à chaque chargement de page mais plutôt au moment de la mise en production, ces sites sont souvent bien plus rapides du point de vue utilisateur. Ils sont aussi bien moins couteux à mettre en place et à héberger: le serveur n'a pour deux seules missions que d'héberger des fichiers et les envoyer aux clients. Plus besoin de lancer un interpréteur ni d'exécuter autre chose que des accès disque. Ce côté statique a aussi un avantage important coté sécurité. N'ayant pas de code dynamique, la surface d'attaque est extrêmement réduite.

Netlify est un des leaders de l'hébergement de sites statiques, voila une petite présentation des features de cet hébergeur à la pointe.

Déploiements atomiques et rollbacks instantanés

C'est le premier point mais aussi le plus important si vous avez déjà travaillé sur des sites à gros volumes.

À chaque déploiement réussi, Netlify crée une nouvelle instance de votre site sur leurs serveurs, mais l'ancienne version n'est pas remplacée et existe toujours. Netlify se charge de la publication, de l'invalidation de cache et de la mise à jour de leur infrastructure de manière transparente.

Une fois crée, chaque instance est impossible à modifier (immutable). On peut donc, instantanément, revenir à une ancienne version, et avoir la garantie absolue que cette ancienne instance fonctionnera identiquement à la première fois ou elle a été publiée.

Une api complète

Netlify expose son API au public. Tout ce qui est possible dans l'interface administrateur est aussi possible via leur api, simplement car l'interface est en fait une application statique qui fait des appels a cette API. Typiquement l'app netlify est faite exclusivement avec les technologies offertes par leur stack.

Petit bonus, la documentation API de Netlify est d'une clarté exemplaire.

Déploiements automatiques

Par défaut, Netlify buildera et publiera la branche master de votre projet. Mais la plateforme permet aussi de builder et de publier en tant que preview les autres branches de votre projet.

C'est un peu comme si, a chaque push sur n'importe quelle branche de votre projet, un nouvel environnement de préproduction était à la volée créé et mis en ligne en quelques secondes ! Plus besoin de manipulation manuelle pour que votre équipe QA puisse commencer son travail. Cette feature est incroyablement puissante !

Une fois déployée, chaque branche aura son propre sous domaine sous la forme my-branch-name--my-site-name.netlify.com. Il est aussi possible de le coupler avec votre propre DNS pour personnaliser tout ça !

A/B testing ou test de variances

L'AB testing consiste à tester deux variations d'un même produit entre les utilisateurs. Netlify propose, via une simple option à activer, de mettre en productions deux (ou plus) versions de votre site en même temps. Chaque version sera ensuite distribuée a la moitié de vos utilisateurs.

Cette feature est géniale, car elle permet d'effectuer des tests AB ultra rapidement. Netlify gère de son côté la mise en ligne et la distribution des versions, mais aussi le choix des versions persistant suivant les machines. C'est une vraie avancée par rapport à d'autres solutions qui sont soit complexes à mettre en place, soit ralentissent l'utilisateur.

Redirections, rewrites and proxying

Votre site a beau être statique, mais tôt ou tard les pages vont changer d'url, le contenu être déplacé, et il va falloir offrir une redirection de l'ancienne url au nouveau contenu. Netlify offre ça ! Via un format de fichier simple, leurs serveurs proposent de fournir la liste des urls à rediriger avec leurs destinations respectives.

Via ce même fichier, il est aussi possible de réécrire les URLs, c'est à dire servir une url à partir d'une autre, mais aussi de proxifier une url!

On peut donc simplement exposer notre api, hébergée sur un serveur dynamique, directement depuis le domaine hébergé sur Netlify!

# Redirect with a 301
/home         /                            301
# Redirect with a 302
/my-redirect  /                            302
# Rewrite a path
/pass-through /index.html                  200
# Invisbily proxy
/api/*  https://api.example.com/:splat     200
# Show a custom 404 for a path
/special-offer    /too-late-its-over       404

Netlify propose encore plus de fonctionnalités dans leur doc. Besoins de redirections conditionnelles? De détection de langue? Rendez-vous la-bas!

Mise en ligne par drag and drop

Si comme moi, vous faites 5 ou 10 POCs (proof of concept) dans la semaine pour tester une idée, et souvent vous avez besoin de montrer le résultat a un collègue. Et qui n'a jamais connu les soucis pour partager son apache local? Ou encore les Ngrok qui ne passent pas le firewall de la boite?

Tout ça c'est fini! Un simple drag and drop du dossier dans netlify, et 50 secondes plus tard c'est en ligne!

Une petite vidéo de démo vaut mieux qu'un long discours.

Et voila un moyen simple, sans friction, de mettre en ligne un site statique semblable a celui que vous êtes en train de lire. A voir maintenant comment cette tendance va évoluer. En tout cas, chez attineos, on a déjà sauté le pas pour certains de nos projets.

Qu'avez vous pensé de cet article?