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

Il n'y a pas longtemps, j'ai écrit un article intitulé " Comment améliorer les scores de performance du site Web de 35 à 100 . " Dans cet article, j'ai promis de vous montrer comment déployer votre projet sur Firebase et l'utiliser gratuitement. Je tiens ma promesse !

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.

Base de feu 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.

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 https://firebase.google.com/ , et cliquez sur "Commencer".

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 :

1. Cliquez sur "Ajouter un projet", et donnez-lui un nom dans la nouvelle fenêtre.

2. 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 plan Spark . Si ce n'est pas le cas, vous devez le remplacer par le plan Spark .

Le plan Spark est un plan gratuit sans frais mensuels . 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.

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, appuyez sur espace pour sélectionner, puis appuyez sur Entrée.

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