Comment déployer des applications frontend sur des pages Cloudflare ?

Le déploiement d'applications front-end est l'un des gros problèmes d'il y a quelque temps. Mais aujourd'hui, c'est du gâteau. Même un nouveau venu peut déployer des applications à l'aide de super services d'hébergement.

De nombreuses plateformes d'hébergement nous permettent de déployer des applications frontend en quelques minutes. Notre site sera prêt publiquement en quelques minutes.

N'est-ce pas génial?

Ouais c'est ça.

Apprenons à déployer des applications frontend sur les pages Cloudflare.

Applications frontales

Avant de plonger dans la partie déploiement de l'application, nous devons créer une application frontale.

Comment faire?

Même vous le savez. Donc, nous n'allons pas en discuter ici maintenant.

Nous savons qu'il existe de nombreuses bibliothèques, frameworks pour nous permettre de créer des applications frontend. Mais, la partie centrale de ces bibliothèques ou frameworks est JavaScript. Vous connaissez tout cela, car vous cherchez déjà un moyen de déployer votre application frontend. Vous pouvez ignorer cette partie et passer au déploiement si vous recherchez uniquement la partie déploiement.

Il y a React, Vue, Angular, JavaScript et bien d'autres. On peut créer des applications en fonction de leurs besoins.

Comme nous pouvons le voir, il existe un tas d'options pour créer des applications frontend. Et le déploiement ? Est-ce le même processus pour toutes les applications frontend ?

Oui, le processus de déploiement est le même pour toutes les applications frontend. Cependant, le processus qui prépare les applications frontales au déploiement peut varier en fonction des bibliothèques et des frameworks.

Il y aura une commande à construire pour la plupart des applications frontales construites avec des bibliothèques et des frameworks. Vous le savez peut-être déjà. Si vous ne savez pas ce que c'est, vous devrez peut-être l'examiner en fonction de votre bibliothèque ou de votre framework frontend.

Nous avons besoin d'une application à déployer. Mettons en place une application simple. Vous pouvez ignorer cette partie si vous avez déjà une application frontale à déployer.

Installer

Avant la configuration, nous devons être conscients d'une chose. Le point d'entrée doit être index.html pour que notre application frontale puisse la déployer sur les pages Cloudflare. Vous pouvez trouver le fichier index.html (l'emplacement peut varier en fonction de la bibliothèque et du framework) après le processus de construction.

Nous allons créer une application JavaScript simple React et Plain pour la démo. Vous pouvez choisir n'importe quelle autre bibliothèque ou framework que vous connaissez. Commençons par configurer l'application React .

Exécutez la commande suivante pour créer l'application React.

 npx create-react-app demo

Mettez à jour l'application avec votre créativité ou laissez-la telle quelle. Je vais juste changer quelque chose pour m'assurer qu'il est correctement déployé à la fin.

Créons maintenant une application JavaScript simple.

Avoir index.html est obligatoire pour nous. Créons donc le fichier avec le nom index.html . Maintenant, vous pouvez ajouter plus de fichiers comme styles.css, script.js, images, etc., pour le rendre plus sophistiqué. Mais ce n'est pas obligatoire, cependant :).

Notre configuration simple pour le déploiement est maintenant terminée. Et ensuite ? C'est l'heure du déploiement. Plongez-y.

Déploiement

Les pages Cloudflare nous permettent de déployer notre application frontend à partir de GitHub. Ainsi, le processus de déploiement comporte deux parties.

• Tout d'abord, nous devons avoir notre code d'application sur GitHub.
• Deuxièmement, le déploiement de l'application sur les pages Cloudflare.

La plupart du temps, vous n'aurez pas à vous soucier de la première partie car nous maintenons notre code dans les plateformes d'hébergement dès le premier jour du projet. Vous pouvez sauter la première partie et passer à la partie déploiement.

Si vous n'avez pas poussé votre code vers GitHub ou s'il se trouve sur d'autres plates-formes d'hébergement de code, vous devrez peut-être le transférer vers GitHub pour le déployer sur les pages Cloudflare. Vous pouvez suivre les étapes ci-dessous pour envoyer votre code à GitHub ou le faire vous-même.

1. Pousser le code vers GitHub

Avez-vous un compte GitHub ? Oui, je suppose que dans la plupart des cas. Si vous n'en avez pas, créez-en un ici.

• Allez sur GitHub et connectez-vous à votre compte.
• Créez un référentiel avec le nom de votre projet. Ici, nous l'appelons comme la démo .

• Un référentiel nouvellement créé se présentera comme suit. Il montre quelques commandes git pour remplir votre référentiel de code.

Poussons notre code dans le référentiel que nous venons de créer. Vous pouvez suivre les étapes ci-dessous ou le faire vous-même si vous le connaissez déjà. Commençons par ouvrir notre projet en terminal ou en cmd.

• Initialisez le git avec la commande git init .
• Ajoutez toutes vos modifications au git local à l'aide de la commande git add . .
• Validez les modifications avec la commande git commit -m "message" . Remplacez le message par un message approprié pour le commit.
• Maintenant, nous devons connecter notre référentiel distant au projet local.
• La commande pour le connecter est git remote add origin 'your_repo_path' . Remplacez your_repo_path par votre référentiel distant. Le chemin du référentiel sera le suivant [email protected]:username/repo_name . Mon chemin de référentiel pour la démo est [email protected]:hafeezulkareem/demo .
• La dernière étape consiste à pousser le code vers notre référentiel distant. Nous pouvons le faire en utilisant la commande git push -u origin main .

Voyons les instantanés de code dans le référentiel GitHub.

Nous avons terminé de pousser notre code vers Github. Notre prochaine tâche consiste à le déployer sur les pages Cloudflare . Sans plus tarder, commençons le déploiement.

2. Déploiement sur les pages Cloudflare

Déployons le site sur les pages Cloudflare. Avant d'aller plus loin, nous devons créer un compte Cloudflare. Si vous n'avez pas encore de compte dans Cloudflare, créez-en un ici. Une fois la création du compte Cloudflare terminée, vous êtes prêt à déployer votre site.

• Accédez au site des pages Cloudflare.
• Connectez-vous à votre compte. Vous verrez le tableau de bord comme suit.

• Si vous vous êtes connecté au site Web Cloudflare , vous ne verrez peut-être pas le tableau de bord de vos pages.
• Accédez au tableau de bord des pages en cliquant sur le bouton Pages sur le côté droit de votre tableau de bord Cloudflare. Référez-vous à l'image ci-dessous.

• Cliquez sur le bouton Créer un projet dans le tableau de bord des pages.

• Vous accédez à la page suivante.

• Cliquez sur le compte Connect GitHub pour obtenir notre référentiel d'applications depuis GitHub .
• Vous serez redirigé vers la page des applications GitHub pour autoriser les pages Cloudflare.

• Nous pouvons donner accès à tous les référentiels ou à ceux sélectionnés. Il est préférable de donner accès aux référentiels que nous déployons sur les pages Cloudflare. Vous pouvez donner accès à tous les référentiels si vous le souhaitez.
• Sélectionnez l'une des deux options.
• Si vous avez sélectionné Tous les référentiels , il n'est pas nécessaire de sélectionner le référentiel spécifique des référentiels. Cliquez sur le bouton Installer et autoriser .
• Si vous avez sélectionné Sélectionner uniquement les référentiels , vous devez sélectionner les référentiels dans la liste déroulante. Cliquez sur la liste déroulante Sélectionner les référentiels qui apparaît après avoir sélectionné l'option Sélectionner uniquement les référentiels .

• Saisissez le nom de votre référentiel comme suit.

• Votre référentiel sera affiché une fois que vous aurez entré le nom. Sélectionnez le référentiel. Vous pouvez voir le référentiel sélectionné en haut de la liste comme suit.

• Cliquez sur le bouton Installer et autoriser . Vous serez redirigé vers la page de déploiement de Cloudflare Pages.
• Vous verrez tous les dépôts autorisés sur la page.

• Sélectionnez le référentiel que vous souhaitez déployer.

• Après avoir sélectionné le référentiel à déployer, cliquez sur le bouton Commencer la configuration .

• Il vous mènera aux prochaines étapes du processus de déploiement, c'est-à-dire, Configurer les builds et les déploiements .

• Lorsque vous faites défiler vers le bas, vous trouverez une section intitulée Paramètres de construction . Nous devons sélectionner le processus de construction approprié pour notre application frontale.
• Nous devons sélectionner le processus de construction en fonction du framework ou de la bibliothèque que nous utilisons.
• Cliquez sur le préréglage Framework pour voir toutes les options.

• Ici, nous déployons des applications React et Plain JavaScript .
• Si vous déployez une application React , sélectionnez Créer une application React dans la liste déroulante.
• Pour une application JavaScript simple sans aucun package, sélectionnez Aucun .

• Si vous déployez une autre application frontale, sélectionnez l'option de génération de préréglage Framework appropriée.
• Nous pouvons sélectionner Aucun et entrer également la commande de construction personnalisée. En fonction de votre application, sélectionnez-la.
• Après la configuration de la configuration de construction, cliquez sur le bouton Enregistrer et déployer pour terminer notre processus de déploiement.
• Une fois que vous avez cliqué sur le bouton Enregistrer et déployer , le processus de déploiement démarre comme suit.

• Le processus prendra quelques minutes pour déployer notre site. Attendez et profitez.
• Une fois le processus de déploiement terminé, il vous montre l'URL du site avec un message de réussite.

• Visitez le site avec l'URL donnée.

• Nous pouvons mettre à jour les paramètres du site à partir de la page du projet.

• Les pages Cloudflare déploieront automatiquement les mises à jour chaque fois que nous transmettrons un nouveau code au référentiel.

C'est ça. Nous avons terminé de déployer notre application frontale sur les pages Cloudflare.

Conclusion

Hourra! nous avons déployé notre application frontale sur les pages Cloudflare. Après avoir déployé l'application frontend, vous devrez peut-être modifier les paramètres, mettre à jour des éléments, etc. ; reportez-vous à la documentation Cloudflare ici. Si vous souhaitez voir les étapes de déploiement d'un guide de framework spécifique, vous pouvez vous diriger vers la section guides de framework dans la documentation.

Ensuite, que diriez-vous de déployer le frontend sur Netlify ?

Remarque : Les sites de démonstration présentés dans l'article peuvent ne pas être disponibles publiquement après un certain temps.

Bon déploiement