Déploiement d'une JAMstack en production avec Vercel, Netlify

Passer sur une JAMstack ou un e-commerce en mode headless est une chose, mais où l’héberger ? Voici une série de conseils que nous utilisons chez User Agency en production. Vous allez constater qu’il existe une multitude de solutions, en fonction de votre projet cela peut varier d’une plateforme à l’autre.

• Déploiement sans plateforme automatisée
• Déployez votre code de façon automatisée
• Déployer avec Netlify
• Déployer avec Vercel
• Conclusions

Il est possible de déployer votre build manuellement ou de façon automatisée sans devoir passer par une plateforme de déploiement continue. Aujourd’hui il est impensable de créer un projet sans avoir de Git Flow. Il est donc possible de passer par des solutions en ligne pour gérer vos dépôts ainsi que les pipelines de déploiement qui viendront mettre en production directement sur une intense le build final.

C’est une solution avancée qui n’est clairement pas la plus simple, mais qui est parfois imposée en fonction de votre infrastructure. Les plateformes comme Netlify, Vercel ou encore Heroku disposent de leurs infrastructures et vous n’avez pas la main sur les différents accès à la machine. Si vous souhaitez cloisonner vos enivrements, il est très difficile de le faire avec les solutions en ligne.

Au niveau de l’optimisation vous allez voir que certaine plateforme son spécialisée sur une seule technologie et propose une optimisation par défaut redoutable pour la gestion du cache.

Il existe aujourd’hui des plateformes de déploiement automatisé, une solution facile pour les développeurs de n’avoir à ce soucier que de leurs codes et non de l’environnement de production, ainsi que des différentes configurations qui tendent souvent vers un travail de devOps. Il est donc possible de gérer des déploiements de façon automatisée et de l’inclure à votre Git-flow.

Par exemple vous allez définir vos branches en fonction des environnements que vous souhaitez rendre disponibles, et par conséquent déployer automatiquement vos modifications sur l’environnement. Par défaut la branche Main représente votre production, la branche Staging votre environnement de qualification et la Dev celle qui va vous permettre de développer en local sans forcément avoir d’environnement dans le cloud à disposition pour celle-ci.

C’est un des plus gros acteurs dans le déploiement automatisé côté front-end, Netlify est une des nos plateformes préférées, car elle permet d’avoir un workflow administrable de bout en bout et de se connecter sur nos différents dépôts qu’ils soient sur Gitlab ou Github. Avec le temps les équipes de chez Netlify ont su répondre aux différentes demandes en incluant des services complémentaires au simple besoin de déployer des sites statiques à la volée.

Dans ces différents services on y retrouve par exemple la possibilité d’avoir des formulaires as a service, et de centraliser toutes les données directement Netlify. Plus besoin d’utiliser un service externe ou d’avoir une webservice à disposition pour créer des formulaires.

Il permet également de mettre en place un système d’authentification, tout comme avec les formulaires, vous activé la fonctionnalité et vous l’implémentez très rapidement dans votre front sans avoir à gérer la partie backend. Vos utilisateurs sont administrable directement depuis le backoffice de Netlify et vos données sécurisées.

Et pour terminer une des fonctions les plus impressionnantes en tant que développeur, la possibilité de faire de l’A/B testing directement en fonction de vos branches de développement. Imaginons que vous souhaitez implémenter une nouvelle feature sur votre site et que vous souhaitez la tester partiellement avant de la rendre totalement disponible. Vous allez créer une branche dédiée à cette feature et pouvoir régler dans le backoffice de Netlify le pourcentage de personne qui verra votre nouvelle fonctionnalité. Cela permet d’itérer en toute sécurité et d’ajuster au besoin les nouvelles implémentations. C’est une excellente méthode également pour améliorer vos taux de conversion sans être radical et d’offrir une plus grande liberté aux équipes marketing pour tester des nouveaux concepts.

Contrairement à Netlify, la plateforme de déploiement Vercel est optimisée pour déployer du Next.js. Vercel est la société qui développe Next par qui a décidé de créer une solution pour optimiser au maximum les performances des sites déployés sur cette même plateforme avec Next. C’est un gros grain de temps que vous gagnez en passant par Vercel car vous n’avez pas besoin à chercher à optimiser votre infrastructure pour optimiser les performances du site. La plateforme est intelligente est s’adapte au site que vous allez déployer ainsi qu’à la version de Next.

Next est en perpétuelle évolution et il est important d’avoir les dernières améliorations côté serveur pour tenir les performances et bénéficier des dernières évolutions du framework.  

Pour ce qui est des services complémentaires, Vercel propose un service d’Analytics très avancé pour comprendre comment votre site réagit. Il est donc facile d’améliorer les pages qui nécessitent plus d’optimisations ou de trouver des solutions alternatives pour répondre aux performances. Le workflow est automatisé comme chez Netlify est vous avez nativement les Serverless Functions si vous les utilisez. Il est également possible de sélectionner les serveurs où vous allez exécuter les fonctions, une fonctionnalité très pratique pour optimiser un peu plus vos temps de réponse.

Si vous avez la possibilité de passer par des plateformes de déploiement automatisé sur la partie front-end nous vous conseillons fortement de passer par celles-ci, car vous allez gagner du temps et vous retirer une série de problématiques qui ne doivent pas impacter directement vos développements. Le processus de déploiement continu permet de déployer plusieurs fois par jour dans vos différents environnements. Un atout qui permet de ne plus avoir peur de mettre en production et de savoir gérer les régressions de façon plus sereine et en évitant les hot dix directement sur les environnements de production.

Les plateformes proposent toutes des versions gratuites, très généreuses pour vous permettre d’essayer les différents outils. L’avantage de ce workflow et de pouvoir switcher d’une plateforme à l’autre très rapidement.