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 Pages Cloudflare.

Frontend Applications

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. Nous n'allons donc pas en discuter ici maintenant.

Nous savons qu'il existe de nombreuses bibliothèques et frameworks pour que nous puissions créer des applications front-end. Mais, la partie centrale de ces bibliothèques ou frameworks est JavaScript. Vous savez 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 n’y a pas de limite de temps pour le tournoi. Cependant, si vous restez inactif pendant une longue période, vous serez déconnecté de BBO et la partie sera perdue. Réagir, 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.

installation

Avant la configuration, nous devons être conscients d'une chose. Le point d'entrée doit être index.html pour que notre application frontend la déploie 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 génération.

Nous allons créer un simple Réagir et Plaine JavaScript demande de démo. Vous pouvez choisir n'importe quelle autre bibliothèque ou framework que vous connaissez. Mettons-nous en place Réagir candidature en premier.

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 déployé correctement à la fin.

Créons maintenant une application JavaScript simple.

Avoir index.html est obligatoire pour nous. Alors, créons 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.

Deployment

Les pages Cloudflare nous permettent de déployer notre application frontend depuis 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 le demo.

• Un référentiel nouvellement créé se présentera comme suit. Cela montre quelques git commandes 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.

• Initialiser le git avec git init commander.
• Ajoutez toutes vos modifications au git local à l'aide de la commande git add ..
• Validez les changements avec git commit -m "message" commander. Remplace le message avec 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'. Remplacer your_repo_path avec votre référentiel distant. Le chemin du référentiel sera le suivant git@github.com:username/repo_name. Mon chemin de dépôt pour le demo is git@github.com: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 le 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.

• Allez à Pages Cloudflare site.
• Connectez-vous à votre compte. Vous verrez le tableau de bord comme suit.

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

• Cliquez sur le Créer un projet bouton du tableau de bord de la page.

• Vous accédez à la page suivante.

• Cliquez sur le Connecter le compte GitHub pour obtenir notre référentiel d'applications à partir de 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 dépôts 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électionnez uniquement les référentiels, alors vous devez sélectionner des référentiels dans la liste déroulante. Clique sur le Sélectionner des référentiels liste déroulante qui apparaît après avoir sélectionné le Sélectionnez uniquement les référentiels option.

• Entrez votre nom de 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 Installer et autoriser bouton. 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 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 appelé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  Cadre prédéfini pour voir toutes les options.

• Ici, nous déployons Réagir et JavaScript simple applications.
• Si vous déployez un Réagir application, puis sélectionnez Créer une application React de la liste déroulante.
• Pour une JavaScript simple application sans aucun package, puis sélectionnez Aucun.

• Si vous déployez une autre application frontale, sélectionnez le Cadre prédéfini option de construction.
• Nous pouvons sélectionner Aucun et entrez dans la coutume commande de construction ainsi que. En fonction de votre application, sélectionnez-la.
• Après la configuration de la configuration de construction, cliquez sur le Enregistrer et déployer bouton pour terminer notre processus de déploiement.
• Une fois que vous cliquez sur le Épargnez et déployer bouton, le processus de déploiement commencera comme suit.

• Le processus prendra quelques minutes pour déployer notre site. Attendez et savourez.
• 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 frontend 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. ; se référer à la documentation Cloudflare ici. Si vous souhaitez voir les étapes pour déployer un guide de framework spécifique, vous pouvez vous diriger vers le guides de cadre rubrique dans la documentation.

Ensuite, que diriez-vous déploiement du frontend vers 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 🙂