Comment déployer une application React avec Vercel et GitHub

Cet article explique comment créer un nouveau projet React, un référentiel GitHub, des clés SSH et des déploiements Vercel. Avec un processus automatisé, votre déploiement sera beaucoup plus facile : il suffit de pousser vers GitHub et Vercel s'occupera des builds pour vous.

Dans le passé, déployer un projet et le télécharger sur un fournisseur d'hébergement était une nuisance. Après avoir effectué même un simple changement, nous aurions besoin de télécharger un projet entier à l'aide d'un logiciel FTP ou d'un système comme CPanel, et ne me lancez même pas dans la gestion des versions, en particulier lorsque vous travaillez en équipe.

Ces jours-ci sont heureusement derrière nous, car il existe de nombreux excellents services qui peuvent aider à automatiser le processus de déploiement. Dans cet article, je souhaite vous montrer comment déployer facilement une application React à l'aide de Vercel et GitHub. Ceci est un guide étape par étape qui couvrira :

Configuration d'un projet React

Tout d'abord, créons un nouveau projet React. Pour l'échafauder rapidement, vous pouvez utiliser Create React App ou Vite. Pour cette démo, nous allons utiliser Create React App. Vous pouvez créer un projet React en exécutant l'une des commandes ci-dessous dans votre terminal.

npx create-react-app react-vercel-app
cd réagir-vercel-app
début npm

C'est la configuration de votre projet. Vous devriez pouvoir voir votre projet s'exécuter sur http://localhost:3000. Passons maintenant à GitHub.

Création d'un référentiel GitHub

Ensuite, si vous n'avez pas de compte GitHub, vous pouvez en créer un ici. Après avoir créé un compte, nous devrons créer un nouveau référentiel. Jetez un œil à la zone mise en évidence dans l'image ci-dessous. En cliquant sur le bouton "Créer un référentiel", vous accédez à la page avec le nouveau formulaire de référentiel.

Dans le nouveau formulaire de référentiel, il vous suffit de fournir un nom de référentiel. Pour le reste des paramètres, vous pouvez les laisser tels quels.

Après avoir créé un nouveau référentiel, vous devriez voir cet écran :

Eh bien, cela a malheureusement échoué. Nous n'avons pas pu pousser le projet vers GitHub. La raison en est que nous n'avons pas de droits d'accès au référentiel. GitHub nous oblige à configurer des clés SSH, qui sont utilisées pour l'authentification.

Configuration des clés SSH pour l'authentification

Dans le terminal, exécutez la commande ci-dessous. Assurez-vous simplement de remplacer your_email@example.com par votre propre adresse e-mail.

ssh-keygen -t ed25519 -C "your_email@example.com"

Vous devrez maintenant répondre à quelques questions concernant l'emplacement du fichier et le mot de passe de la clé. Pour l'instant, vous pouvez simplement appuyer sur Entrée à travers eux, mais à l'avenir, vous voudrez peut-être créer un mot de passe pour votre clé.

Sur l'image ci-dessous, vous peut voir un exemple de ce à quoi cela peut ressembler. La zone couverte par les lignes rouges est l'adresse e-mail. Notez que l'emplacement du fichier sera différent selon le système sur lequel vous vous trouvez. Je suis sous Windows, donc la clé SSH a été générée dans le répertoire C:/Users/Thomas/.ssh.

Si vous rencontrez des problèmes lors de la génération de clés SSH, vous pouvez consulter ce guide.

Comme vous pouvez le voir, la commande ssh-keygen a généré deux fichiers : id_ed25519 et id_ed25519.pub. La première est votre clé privée, tandis que la seconde est la clé publique. Nous utiliserons la clé publique dans un instant.

Tout d'abord, nous devons accéder à la page des paramètres des clés SSH sur GitHub, alors dirigez-vous vers la page https://github.com/settings/keys et cliquez sur le bouton vert "Nouvelle clé SSH". Il y a un bouton vert avec "Nouvelle clé SSH" comme première option. » title= »GitHub settings SSH keys » data-openoriginalimageonclick= »true »/>

Vous devriez voir un formulaire avec les champs Titre et Clé.

Vous pouvez maintenant ouvrir le id_ed25519. pub que nous venons de générer et copiez son contenu dans le champ Key. Encore une fois, la zone rouge couvre mon adresse e-mail. Après avoir ajouté les deux champs, cliquez sur le bouton « Ajouter une clé SSH » et cela devrait le faire.

Vous pouvez maintenant revenir à votre répertoire de projet dans le terminal et exécuter les commandes ci-dessous :

git add -A ;
git commit -m "premier commit" ;
git push -u origin main;

Votre projet React devrait maintenant être sur GitHub.

Pourquoi Vercel ?

Il y a beaucoup de bonnes choses à propos de Vercel. Tout d'abord, il offre un niveau gratuit très généreuxvous pouvez donc facilement démarrer vos projets et ne payer que lorsque vous avez plus d'utilisateurs et commencez à gagner de l'argent dessus. Le niveau gratuit offre un nombre illimité de sites Web, d'API et plus encore. Vous pouvez voir les limites ici.

De plus, Vercel fournit de nombreux modèles de démarrage pour de nombreux frameworks populaires, des builds et des déploiements automatisés, des environnements séparés pour la mise en scène et la production, des fonctions sans serveur, CDN et plus encore. Pour la liste complète des offres de Vercel, consultez leur documentation. Il est maintenant temps de créer un compte Vercel.

Créer un compte Vercel

Il existe plusieurs façons de créer un compte Vercel. Vous pouvez soit en créer un avec votre e-mail, soit utiliser un compte GitHub, GitLab ou Bitbucket.

J'ai décidé d'utiliser GitHub pour ce projet, mais les étapes pour les autres fournisseurs devraient être très similaires, alors suivez simplement. L'onboarding de Vercel est très convivial. Si vous décidez d'aller avec l'un des trois fournisseurs, il vous sera demandé d'autoriser Vercel et de lui accorder certaines autorisations. ressources auxquelles vous pouvez accéder, Agir en votre nom ; Ressources sur votre compte : Adresses e-mail. Boutons pour annuler ou autoriser Vercel. » title= »Vercel authorize permissions » data-openoriginalimageonclick= »true »/>

Après l'autorisation, vous devriez être redirigé vers l'écran d'accueil, qui vous permet d'importer un référentiel ou de créer un nouveau projet à partir d'un des modèles. Nous ne voulons pas utiliser de modèles, alors cliquez sur l'entrée de recherche sous Importer le référentiel Git. Pour GitHub, sélectionnez simplement « Ajouter une organisation ou un compte GitHub » et si vous utilisez d'autres fournisseurs, choisissez l'option inférieure, comme indiqué ci-dessous.

Cela ouvrira une fenêtre contextuelle demandant d'installer Vercel. Par défaut, "Tous les référentiels" est sélectionné, et je le garderai ainsi, même si, pour vos propres projets, vous voudrez peut-être spécifier les référentiels auxquels Vercel doit avoir accès. Vous pouvez ajuster ces paramètres ultérieurement ainsi que lors de l'ajout d'un nouveau projet.

Lorsque vous êtes prêt, cliquez sur le bouton "Installer".

Après avoir installé Vercel, vous devriez voir le référentiel react-vercel-deploy. Cliquez simplement sur le bouton « Importer ».

Après avoir sélectionné le dépôt à importer, sur l'écran suivant, sélectionnez votre compte personnel.

Vous serez maintenant interrogé sur les détails du projet. Vous pouvez tout laisser tel quel et cliquer simplement sur le bouton Déployer.

Lorsque vous démarrez le déploiement, vous devriez voir un écran comme celui illustré ci-dessous.

Une fois le déploiement terminé, vous verrez un message de félicitations ainsi que deux boutons qui vous permettront de visiter le site Web déployé et le tableau de bord.[19659003]

Si vous visitez le site Web, vous devriez voir l'écran par défaut de l'application React s'exécuter. Apportons une modification au projet et déployons une nouvelle mise à jour. Revenez au projet dans votre éditeur de code, ouvrez le fichier App.js et modifiez cette ligne :

<p>
  Modifier <code>src/App.js</code> et enregistrez pour recharger
</p>

À ceci :

<p>
  J'ai déployé ma première application avec Vercel !
</p>

Revenons maintenant au terminal pour valider et pousser la mise à jour.

git add .;
git commit -m "Nouvelle mise à jour" ;
git pousser;

Après un push réussi, vous pouvez revenir au tableau de bord Vercel de votre projet. Vous devriez voir que Vercel est en train de créer un nouveau déploiement pour vous dans la section « Aperçu des déploiements ». Si vous ne le voyez pas, il se peut qu'il ait déjà terminé de déployer la mise à jour, alors visitez à nouveau le site Web et actualisez-le.

Vous pouvez cliquer sur l'aperçu du déploiement pour voir les journaux et comment se déroule le déploiement. Lorsque c'est fait, le statut passera de l'orange et « Building » au vert « Prêt » et le bouton « Annuler » sera remplacé par le bouton « Visiter ».

Lorsque le déploiement est prêt, cliquez simplement sur le « bouton Visiter » et vous devriez accéder au site Web avec le texte mis à jour.

Résumé

C'est tout ! Nous avons expliqué comment créer un nouveau projet React, un référentiel GitHub, des clés SSH et des déploiements Vercel. Cela devrait vous aider à démarrer votre projet et rendre le processus de déploiement beaucoup plus facile, car il est entièrement automatisé. Appuyez simplement sur GitHub et Vercel s'occupera des builds pour vous. Dans ce tutoriel, nous avons utilisé React, mais n'oubliez pas que vous pouvez également utiliser et déployer d'autres frameworks sur Vercel, tels que Next, Vue ou Nuxt.