Article original : How to Deploy Your React App Using Cloudflare Pages, Vercel, and Netlify
Vous avez travaillé sur une application React et vous êtes maintenant prêt à la publier sur le web. Quels services utilisez-vous pour publier votre site et le rendre accessible au monde entier ?
Que vous soyez prêt à lancer votre site web en tant que produit fini ou que vous soyez en cours de développement, couvrons 3 des meilleures (et gratuites !) façons de déployer votre application React dès maintenant.
Comment déployer une application React avec Cloudflare Pages
L'une des nouvelles façons de déployer votre application React est avec Cloudflare Pages.
Cloudflare Pages
Environ 20 % de tous les sites web utilisent Cloudflare pour diverses raisons, souvent pour des fonctionnalités gratuites telles que leur mitigation DDoS (attaque par déni de service).
Au cours des dernières années, il est entré dans l'espace de déploiement avec Pages. Les sites web hébergés sur Cloudflare Pages sont servis depuis le réseau edge de Cloudflare, qui est l'une des façons les plus rapides de servir votre site web aux utilisateurs dans le monde entier.
Le réseau edge de Cloudflare est l'un des plus rapides
Pour commencer à utiliser Cloudflare Pages, tout ce dont vous avez besoin est un compte Cloudflare (gratuit).
Vous pouvez déployer votre site sur Pages en sélectionnant un dépôt Git depuis votre compte GitHub. Alternativement, vous pouvez pousser directement un dossier qui inclut toutes les ressources de votre site.
Options pour déployer sur Cloudflare Pages
Ensuite, choisissez le framework que vous utilisez. Pages inclut des options pour React ainsi que Next.js.
Préréglages de framework pour Cloudflare Pages
Pour terminer votre déploiement, il vous suffit de cliquer sur le bouton Deploy. Ensuite, votre site sera déployé sur leur réseau edge en quelques minutes !
Cloudflare Pages inclut des analyses web intégrées. Mais le meilleur avantage de déployer sur Cloudflare Pages est que vous pouvez déployer un nombre illimité de sites avec une bande passante illimitée gratuitement.
Tarification Cloudflare
Il existe des niveaux Pro et Business, mais ceux-ci sont destinés aux clients qui souhaitent avoir plus de builds simultanés (pour construire plusieurs sites à la fois), plus de builds de sites par mois, et plus de domaines personnalisés.
Comment déployer une application React avec Vercel
Vercel est une plateforme de déploiement construite par les mêmes personnes responsables du framework Next.js.
Plateforme de déploiement Vercel
En conséquence, Vercel est optimisé pour les projets construits avec Next.js. Cependant, tout framework React que vous choisissez est supporté, y compris Create React App et Gatsby.
Parmi toutes les plateformes de déploiement, Vercel a les déploiements les plus rapides. Une application Next.js de taille moyenne se construit en un peu plus d'une minute.
Ce qui est puissant avec Vercel, c'est qu'ils ont un grand nombre d'intégrations qui rendent très facile la connexion avec une multitude d'autres services que vous utilisez probablement déjà ou que vous pourriez vouloir utiliser.
Les intégrations incluent des bases de données comme MongoDB ou PlanetScale ainsi que des outils CMS, des outils de surveillance et des outils de développement.
Comme Cloudflare Pages, Vercel inclut également un CDN mondial pour votre projet afin de livrer rapidement le contenu et les actifs de votre site, ainsi que des déploiements basés sur Git et des analyses intégrées.
Les analyses Vercel surveillent les performances de votre site web ainsi que le nombre d'utilisateurs sur votre site web de jour en jour.
Analyses Vercel
Vercel a une interface minimale et propre pour gérer vos projets, qui est plus sophistiquée que celle de Cloudflare Pages.
Cependant, la tarification de Vercel peut être coûteuse si vous avez un projet commercial ou si vous utilisez plus de 100 gigaoctets de bande passante par mois. Dans ce cas, vous devez passer à leur plan Pro, qui est de 20 $ par mois.
Comment déployer une application React avec Netlify
Netlify est une plateforme très similaire à Vercel, avec un certain nombre de fonctionnalités exclusives, telles que les formulaires et l'authentification.
Vercel et Netlify supportent tous les frameworks React, sont optimisés pour Next.js, ont un CDN intégré et les déploiements sont effectués via Git.
Netlify a un tableau de bord et une interface utilisateur tout aussi sophistiqués. Comme Vercel, Netlify propose un grand nombre d'intégrations à ajouter instantanément à votre projet.
Intégrations Netlify
Netlify, cependant, a certaines fonctionnalités telles que Netlify Analytics qui sont facturées séparément. De plus, Netlify propose un service de formulaires qui vous permet de recevoir des soumissions de formulaires sans aucun code côté serveur ou JavaScript.
Formulaires Netlify
Il inclut également d'autres solutions telles que l'authentification avec un service appelé Netlify Identity, qui est utile si vous souhaitez authentifier les utilisateurs sur votre site statique.
Fonctionnalités premium de Netlify
Il propose également de nouvelles fonctionnalités comme le split-testing qui vous permettent de tester une fonctionnalité contre une autre sur votre site web.
En ce qui concerne la tarification, vous pouvez utiliser Netlify gratuitement même si vous avez un produit commercial. Si vous dépassez leur limite de 100 Go de la version gratuite, vous devrez passer à la version pro pour obtenir 1 To de bande passante.
Si vous voulez un accès illimité à des fonctionnalités telles que Netlify Forms et Identity, Netlify vous coûtera 99 $ par mois, ce qui inclut également 1,5 téraoctets de bande passante par mois. En bref, Netlify est très compétitif avec Vercel avec certaines fonctionnalités exclusives qui ont un prix.
Merci d'avoir lu !
Espérons que cet article vous a donné un bon aperçu de ces différentes méthodes de déploiement afin que vous puissiez déployer votre application React en un rien de temps.
Devenez un développeur React professionnel
React est difficile. Vous ne devriez pas avoir à le comprendre tout seul.
J'ai mis tout ce que je sais sur React dans un seul cours, pour vous aider à atteindre vos objectifs en un temps record :
Présentation : Le React Bootcamp
C'est le cours que j'aurais aimé avoir lorsque j'ai commencé à apprendre React.
Cliquez ci-dessous pour essayer le React Bootcamp par vous-même :
Cliquez pour commencer