Héberger le front-end d'une application web avec Netlify

Lorsqu'il s'agit d'héberger une application front-end, les solutions clouds sont souvent découpées en plusieurs services qu'il va falloir relier ensemble et automatiser pour faciliter le déploiement.

On peut par exemple prendre l'exemple d'AWS où l'on va devoir utiliser 3 services indépendants : S3 (stockage de fichiers + configuration du serveur web), Cloudfront (CDN) et ACM (Certificats SSL).

Si jamais vous souhaitez découvrir comment héberger un site statique avec AWS, j'ai un tutoriel complet disponible ici !

Et c'est sans compter sur le fait que nous n'ayons même pas encore parlé d'automatisation et de CI/CD, car la plupart du temps vous devrez configurer votre workflow vous même de manière externe...

Netlify, c'est quoi ?

Netlify est un service cloud d'hébergement spécialisé dans l'automatisation du processus de déploiement pour les applications web, un genre de service tout-en-un.

Cela signifie qu'à partir d'un simple dépôt Git hébergé chez GitHub, GitLab ou BitBucket, il vous est possible de déclencher automatiquement votre phase de build, de déployer votre application derrière un CDN, avec un nom de domaine et un certificat SSL (par défaut).

En résumé, cela vous permet d'automatiser l'hébergement de n'importe quelle application React, Vue, Angular et bien d'autres en poussant les mises à jours directement sur une branche spécifique de votre dépôt Git distant.

Est-ce que cela ne fonctionne qu'avec des applications front-end ?

Non, mais c'est le plus souvent pour ce type de projets-là que la plateforme est utilisée. En plus il y a un plan gratuit très intéressant qui vous permet d'héberger tous vos projets et vos prototypes en quelques clics !

Comment faire ?

Étape 1 : Le dépôt Git

La première étape est d'utiliser GitHub, GitLab ou BitBucket pour héberger le versioning de votre code, car Netlify va directement se connecter sur le dépôt distant (avec votre autorisation).

Une fois votre dépôt créé, poussez la dernière version fonctionnelle de votre application sur votre branche main (ou master) avant de commencer l'étape suivante.

Étape 2 : Créer un compte sur Netlify

L'avantage sur Netlify, c'est que la création de compte ne vous oblige même pas à entrer votre carte bancaire, vous pouvez donc tester le service en tout tranquilité, sans avoir peur de vous réveiller avec un facture qui sort de nulle part.

Vous pouvez créer un compte avec votre e-mail, mais il est aussi possible de se connecter en un clic avec votre compte GitHub, GitLab ou BitBucket !

Voici le lien pour s'inscrire : https://app.netlify.com/signup

Étape 3 : Créer un nouveau site

Même avec un plan gratuit, il n'y a pas de restriction sur le nombre de sites que vous souhaitez déployer (mais un nombre de minutes de builds et une bande passante maximum).

Pour continuer, cliquez sur le bouton en haut à droite "New site from Git" comme ci-dessous, et suivez le guide.

Vous devrez ensuite indiquez le service de versioning en ligne que vous utilisez, vous serez alors amené à autoriser Netlify à s'y connecter pour pouvoir afficher la liste de vos dépôts.

Une fois fait, sélectionnez le projet que vous souhaitez déployer pour passer à l'étape suivante.

Étape 4 : Configurer le CI/CD

Pour que Netlify puisse construire votre application avant de la déployer, il va falloir lui indiquer la branche que vous souhaitez utiliser, la commande à exécuter pour lancer le build, ainsi que le répertoire dans lequel les fichiers de build seront disponibles.

La plupart du temps Netlify va réussir de lui même à sortir ses infos depuis votre package.json, mais si votre build est configuré un peu différemment il faudra l'indiquer à la plateforme.

Étape 5 : Vérifier la phase de build

Une fois le site configuré, le premier build devrait se lancer automatiquement.

Pour celui-ci et tous les builds consécutifs, vous pourrez avoir accès aux logs en temps réel directement depuis la plateforme. Si jamais il y a un soucis, vous aurez simplement à corriger ça dans votre dépôt local, à pousser la modification et un nouveau build se lancera !

Etape 6 : Tester l'application en live

Une fois toutes les étapes précédentes terminées, vous pourrez avoir accès à votre application avec une url sous la forme :

https://[keyword]-[keyword]-[hash].netlify.app/

Avec un certificat SSL valide ET hébergée derrière un CDN, tout ça en quelques clics seulement. Bon déploiement !