1 –Comment héberger un site Web statique sur Google Firebase
Sommaires
2-Qu’est-ce que Firebase?
Firebase est une plateforme web créée en 2011 par James Tamplin et Andrew Lee, puis rachetée par Google en 2014 pour être intégrée à leur offre de services Cloud (Google Cloud Platform).
L’objectif premier de Firebase est de vous libérer de la complexité de création et de la maintenance d’une architecture serveur, tout en vous garantissant une scalabilité à toute épreuve (plusieurs milliards d’utilisateurs) et une simplicité dans l’utilisation.
3-Pourquoi héberger son site sur Firebase ?
La plupart des hébergements Web vous factureront ou seront lents selon leurs architectures serveurs et d’autant plus s’ils sont gratuits, vous devrez parfois également payer un supplément pour obtenir un certificat SSL afin de convertir votre site Web en un site sécurisé avec https, qui est une norme obligatoire depuis 2017.
De plus, Firebase est gratuit et compris dans votre compte Google. En plus de fournir par défaut un certificat SSL, et bien d’autres options il permet de d’avoir un affichage rapide sur différents périphériques.
3.1-Les prérequis pour suivre notre tutoriel.
Un projet de site web, constitué d’une page html de base suffit.
Nous verrons par la suite que nous pouvons connecter Google Storage pour importer nos média directement, ou connecter une base de données pour un CMS, par exemple.
Vous trouverez ci dessous la liste des options possibles : https://firebase.google.com/products/
Mon projet est contenu dans un dossier public pour plus de simplicité à l’upload.
3.2 -Un compte Google
# Firebase-CLI:
Firbase_CLI est une application Node.js nous permettant d’installer les éléments dont nous aurons besoin en lignes de commandes. Avant de pouvoir installer Firebase CLI, vous devez installer Node.js sur votre machine (suivre la procédure d’installation de Node.js).
👉 Ouvrez une console, pour ce faire, depuis Windows dans le champ de recherche tapez “ powershell “ et une fenêtre de terminal s’ouvre.
Depuis Mac , via le finder (loupe) recherche Terminal
Vérifier que Node et Npm sont présent sur votre machine :
👉 tapez dans le terminal : node -v puis npm -v
ce qui doit vous retourner le numéro de version installée .
Une fois que vous avez installé NodeJs, et Npm, si besoin, vous pouvez installer la CLI Firebase à l’aide de Npm (le gestionnaire de packages de nœuds) en exécutant la commande suivante:
👉 npm install -g firebase-tools
Étape 1: Lancez Firebase
Depuis un compte Google allez vous connecter sur Firebase
⛔ Nous n’allons rien créer sur Firebase, car le projet sera créé entièrement via le terminal.
Étape 2: Connection du dossier projet à Firebase
A partir du terminal en ligne de commande, allez dans le dossier de votre projet
👉 cd surfing-hack
Nous devons d’abord nous connecter à firebase depuis la ligne de commande. Tapez la commande suivante.
👉 firebase login
Vous devriez voir le message suivant :
« Autorisez et Acceptez la connexion à votre compte google » ,
validez par Yes / le CLI login et cliquez sur la longue Url fournis afin d’arriver sur votre page d’autorisation sur Chrome.
Page d’autorisation Firebase CLI à se connecter à votre compte .(obligatoire pour que cela fonctionne )
Si tout est ok vous aurez une fenêtre avec l’image ci dessous dans votre navigateur
Étape 3: Initialisation du projet
Pour initialiser le projet Firebase, vous devez entrer la commande
👉 firebase init
Ensuite, vous devez sélectionner le 👉 choix hosting :
( descendre avec les flèches du clavier puis valider avec la barre d’espace)
Puis, il vous demandera de 👉 créer un nouveau projet
Donnez un nom à votre projet ( ex pour moi : surfing-demo )
qui sera le nom de projet créé dans Firebase également.
Firebase vous demandera si votre application est une seule page ou non, pour l’instant entrez y
Il essaiera de remplacer votre index.html initial si il existe, pour éviter de faire cela, entrez n
Étape 4: Vérification de la configuration (facultatif)
Si tout va bien, vous pouvez vérifier votre site Web localement en exécutant la commande
👉 firebase serve.
Il exécutera votre site Web localement sur http: // localhost: 5000 par défaut et vous pourrez visualiser vos changements avant un déploiement éventuel sur le serveur.
Étape 5: Déploiement
Le site est terminé, il est temps de le rendre visible, il suffit d’une commande “Firebase deploy” , pour uploader notre contenu sur le serveur.
👉 firebase deploy
Félicitations! votre site web est maintenant en ligne, vous pouvez vérifier en allant sur l’url qui est fournie dans la ligne de commande dans mon cas c’est https://surfing-demo.web.app.
Étape bonus: Connecter un nom de domaine
Allez sur la console firebase, sélectionnez le projet que vous venez de créer sélectionnez l’onglet hébergement sous l’onglet Develop
(votre project -> hosting)
Puis cliquez sur Ajouter un domaine personnalisé
Ensuite entrez votre URL de domaine personnelle
Puis modifier les données d’enregistrement DNS chez votre registar ( Godaddy, Ovh, etc…) :
valeur Txt records fournis par firebase.
Ensuite, ajoutez en valeurs de type A – Host – votre adresse Ip .
Cela prendra de 5 minutes à 1 heure selon votre fournisseur de domaine pour mettre à jour les enregistrements DNS.
Ensuite votre site seras visible avec la nouveau nom de domaine, vous pourrez ajouter Google Analytics, ou même créer un système de connexion pour vos utilisateurs via Firebase.
