Il n'y a pas longtemps, j'ai écrit un article intitulé "  " Dans cet article, j'ai promis de vous montrer comment déployer votre projet sur Firebase et l'utiliser gratuitement. Je tiens ma promesse !    . Comment améliorer les scores de performance du site Web de 35 à 100  Qu'est-ce que Firebase ?  Probablement, certains d'entre vous ne connaissent pas encore Firebase, alors laissez-moi vous expliquer brièvement ce que c'est.  est une plate-forme de développement d'applications mobiles et Web qui fournit un ensemble d'outils et de services pour aider les développeurs à créer et à faire évoluer leurs applications plus facilement.   Base de feu  Il offre des fonctionnalités telles qu'une base de données en temps réel, l'authentification, l'hébergement, le stockage en nuage, etc. Firebase fournit également des fonctionnalités et une infrastructure backend, permettant aux développeurs de se concentrer sur la création de leurs applications sans se soucier de la gestion du serveur ou de la configuration complexe de l'infrastructure.  Dans l'ensemble, Firebase simplifie le processus de développement et permet aux développeurs de créer rapidement des applications de haute qualité.  Aujourd'hui, nous allons utiliser sa fonctionnalité "Hébergement" pour stocker notre projet Next.JS. Dans cet exemple, je vais vous montrer comment héberger la version statique de votre projet. La première chose que vous devez faire est de créer un compte.  Comment enregistrer un compte Firebase  Pour enregistrer un compte sur Firebase, ouvrez  et cliquez sur "Commencer".     , https://firebase.google.com/  Ensuite, vous devez créer un compte Google ou en utiliser un existant. Une fois que vous avez terminé la première étape, vous atterrirez sur le panneau de configuration Firebase. L'étape suivante consiste à créer un projet.  Comment créer un projet sur Firebase  Pour créer un projet, vous devez suivre 3 étapes simples :  Cliquez sur "Ajouter un projet", et donnez-lui un nom dans la nouvelle fenêtre.   Activez ou désactivez la fonctionnalité Google Analytics pour le projet, puis cliquez sur "Créer un projet"   Après quelques minutes, votre projet sera créé.  Comment utiliser Firebase gratuitement  Une fois que vous avez créé un projet, vous pourrez le voir dans votre tableau de bord. Par défaut, vous serez sur le   . Si ce n'est pas le cas, vous devez le remplacer par le   . plan Spark plan Spark  Le   est un   . Il a quelques limites, mais c'est largement suffisant pour démarrer votre projet, surtout si vous envisagez de l'utiliser comme plateforme d'hébergement pour votre site web statique.  plan Spark plan gratuit sans frais mensuels  Pour voir la description complète du plan, veuillez visiter ce  .   lien  Il est temps de configurer l'hébergement Firebase.  Comment configurer l'hébergement Firebase  La configuration de l'hébergement Firebase est également assez simple. Connectez-vous à votre compte et sélectionnez votre projet. Ensuite, dans le menu de gauche, cliquez sur "Construire" et sélectionnez "Hébergement" dans la liste déroulante.   Dans la nouvelle fenêtre, vous verrez un écran de bienvenue. Cliquez sur "Commencer".   Pour héberger votre projet, vous devez d'abord configurer Firebase CLI.  Ouvrez votre fenêtre de terminal et saisissez la commande suivante :   npm install -g firebase-tools  Une fois l'installation terminée, tapez ce qui suit dans votre terminal :   firebase login  Il vous amènera à l'écran de connexion pour autoriser l'accès.  L'étape suivante consiste à accéder au dossier de votre projet dans la fenêtre du terminal, où vous avez stocké votre site Web statique.  Exécutez la commande suivante :   firebase init  Si vous avez tout fait correctement, vous devriez voir ce qui suit dans la fenêtre de votre terminal.  Dans la liste des options, sélectionnez "Hébergement : configurez les fichiers pour l'hébergement Firebase et (éventuellement) configurez les déploiements d'action GitHub". Utilisez les touches fléchées de votre clavier pour naviguer,   pour sélectionner, puis appuyez sur Entrée.  appuyez sur espace  Ensuite, sélectionnez un compte dans la liste et appuyez sur Entrée.  Puisque nous avons déjà un projet, sélectionnez "Utiliser un projet existant" dans la liste et choisissez le projet que vous avez créé à l'étape précédente.   Par défaut, le répertoire public est défini sur "public". Si vous souhaitez spécifier un autre répertoire, vous pouvez le faire à l'étape suivante. Par exemple, mon projet Next.js produit une version statique du site Web dans le répertoire 'out', je le spécifie donc à cette étape.   Les deux dernières questions de configuration porteront sur les paramètres de votre site Web.  "Configurer en tant qu'application d'une seule page (réécrire toutes les URL vers /index.html)" -  Oui  "Configurer des builds et des déploiements automatiques avec GitHub ?" -  Non  Nous avons terminé la configuration. Il est maintenant temps de déployer notre projet sur Firebase.  Comment déployer le site Web sur Firebase  Après avoir terminé toutes les configurations, vous pouvez déployer votre site Web sur l'hébergement Firebase.  Dans la fenêtre du terminal, dans le répertoire de votre projet, saisissez la commande suivante :   firebase deploy --only hosting  Si tout se passe bien, vous verrez les URL que vous pouvez utiliser pour accéder à votre site Web.  J'espère que vous avez trouvé cet article utile! Dans le prochain, je vais vous montrer comment configurer un nom de domaine personnalisé pour votre projet Firebase.  Restez à l'écoute!   Également publié  ici

Read My Blog

Read My Stories

Cet audio est produit dans la langue originale de l'histoire !

Déployer un site Web sur Firebase et l'utiliser gratuitement : un guide

About Author

COMMENTAIRES

ÉTIQUETTES

CET ARTICLE A ÉTÉ PARU DANS

Related Stories

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Les couches invisibles : pourquoi les entretiens avec les utilisateurs sont un atout irremplaçable

Vous voulez gagner un concours d’écriture HackerNoon ? Voici ce que recommandent les gagnants du concours #crypto-api

Boostez votre productivité avec ces 18 outils de développement 🚀🔥

Créer des produits cryptographiques centrés sur l'utilisateur : l'importance des retours clients

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps