Héberger un site web statique sur Firebase

Cette page explique étape par étape comment configurer, déployer et héberger un site web statique sur Firebase. Si vous ne connaissez pas Firebase, c'est un bon point d'entrée pour comprendre les bases.

Le guide présenté sur cette page a été testé avec les versions suivantes :

Ubuntu 22.04 LTS
Node.js 18.16.0
npm 9.5.1
Outils Firebase 11.28.0

Nous supposons que Node.js et npm sont déjà installés. Dans mon cas, j'ai utilisé Volta avec lequel vous pouvez sélectionner une version de Node.js en fonction du projet sur lequel vous travaillez.

Créer un projet Firebase

La première chose à faire est de créer un compte et un projet Firebase. Allez sur la page d'accueil de Firebase et connectez-vous avec votre compte Google. Une fois connecté, allez sur la console Firebase. Dans la console, sélectionnez Add project pour créer un nouveau projet :

Donnez un nom à votre projet, pour ce guide, le nom du projet sera firebase-static :

Notez qu'un identifiant de projet est créé (fir-static-87878). Nous en aurons besoin plus tard, mais ne vous inquiétez pas, il est facile de récupérer l'ID dans la console.

Dans l'étape suivante, vous pouvez lier votre projet à Google Analytics. Si vous avez besoin des stats de votre site, activez Google Analytics pour votre projet.

Cliquez sur continuer, vous devriez arriver à la page d'accueil de votre projet :

Une fois votre projet Firebase créé, ajoutez une application pour commencer. Pour l'hébergement d'un site web statique, sélectionnez Web. Une nouvelle fenêtre apparaît. Entrez le nom de l'application, sélectionnez Firebase Hosting et sélectionnez l'ID de votre projet :

Enregistrez l'application, l'étape suivante apparaît.

Etape 2 Installer Firebase

L'étape suivante doit être réalisée sur votre machine locale pour installer le Firebase SDK. Ces applications sont nécessaires pour utiliser les outils Firebase comme la base de données ou l'authentification. Pour cet exemple simple d'hébergement statique, ce n'est pas vraiment utile, mais suivons le guide :

Sur votre machine locale, créez un dossier pour votre projet.

Pour ce tutoriel, j'ai créé un projet Github public. Vous pouvez obtenir les fichiers pour chaque étape avec les numéros de commit (c19eeff)

Ouvrez un terminal et allez dans votre nouveau dossier. Exécutez la commande suivante pour installer le paquet Firebase :

npm install firebase

Cette commande devrait installer les paquets Firebase dans le sous-dossier node_modules:

Git commit 398cefb

L'étape suivante consiste à installer les outils de ligne de commande Firebase.

Etape 3 Installation des outils en ligne de commande

Les outils de ligne de commande (CLI) de Firebase sont utilisés pour configurer, tester et déployer votre site web statique.

Exécutez la commande suivante dans votre terminal :

npm install -g firebase-tools

Cette commande installe les outils Firebase globalement, le contenu du dossier de votre projet ne devrait donc pas changer. Pour vérifier que les outils CLI de Firebase sont installés, affichez la version avec la commande suivante :

$ firebase tools --version
11.28.0

Les outils de ligne de commande sont installés, passons à l'étape suivante.

Etape 4 Déployer sur Firebase

Cette dernière étape est en réalité composées de plusieurs étapes.

Se connecter à Firebase

Tout d'abord, vous devez vous authentifier auprès de Firebase, afin que votre client puisse lier votre projet à votre compte Firebase :

firebase login

La ligne de commande vous demande si vous acceptez que Firebase collecte des informations de reporting. Répondez Y (oui) ou n (non).

Votre navigateur devrait ouvrir un nouvel onglet et vous demander de vous connecter à votre compte Google. Connectez-vous et acceptez les autorisations.

Une fois ce processus terminé, vous devriez voir une fenêtre de confirmation dans votre navigateur :

La ligne de commande devrait également afficher quelque chose comme :

Waiting for authentication...

✔  Success! Logged in as firstname.lastname@gmail.com

Notez que ce sont les outils de ligne de commande qui sont connectés à votre compte Google. Désormais, toute commande Firebase lancée depuis le terminal sera liée à votre compte Google.

Lancement des projets

Exécutez la commande suivante à partir du répertoire racine de votre projet :

firebase init

La commande ci-dessus devrait afficher quelque chose comme :

$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/project/firebase-static

? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore
 ◯ Functions: Configure a Cloud Functions directory and its files
❯◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
(Move up and down to reveal more choices)

Utilisez les touches haut/bas pour atteindre Hosting : Configurer les fichiers pour l'hébergement Firebase et (optionnellement) mettre en place les déploiements GitHub Action. Sélectionnez avec space, et confirmez avec Enter.

Ensuite, l'outil vous demande de sélectionner l'une des options suivantes :

? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project

Sélectionnez Use an existing project et sélectionnez votre projet Firebase :

 ? Select a default Firebase project for this directory: 
❯ fir-static-87878 (firebase-static)

L'ID de votre projet devrait apparaître dans la liste puisque l'outil CLI est lié à votre compte Firebase. Sélectionnez votre projet et appuyez sur Entrée.

Maintenant, l'interface vous demande le nom de votre répertoire public :

? What do you want to use as your public directory? (public)

Ce répertoire sera la racine de votre site web. Tout fichier placé dans ce répertoire sera déployé sur l'hébergement Firebase. Entrez votre nom de dossier ou appuyez sur Entrée pour choisir le choix par défaut (public).

Ensuite, il vous est demandé si vous voulez créer des fichiers par défaut :

? Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

Nous allons répondre Oui pour créer le fichier par défaut index.html.

Il vous demandera finalement si vous voulez déployer avec Github, répondez non si vous n'êtes pas sûr.

? Set up automatic builds and deploys with GitHub? No

L'outil Firebase devrait maintenant créer les nouveaux fichiers et configurer votre projet :

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

A la fin, vous devriez avoir un dossier public et un nouveau fichier firebase.json. Le fichier firebase.json contient votre configuration Firebase :

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Git commit fd46fb7

Votre machine locale est prête, un fichier index.html a été créé. Déployons.

Déploiement

Cette dernière commande va déployer le contenu du dossier public sur le serveur Firebase :

firebase deploy

Voici ce qui devrait apparaître dans la console :

$ firebase deploy

=== Deploying to 'fir-static-87878'...

i  deploying hosting
i  hosting[fir-static-87878]: beginning deploy...
i  hosting[fir-static-87878]: found 1 files in public
✔  hosting[fir-static-87878]: file upload complete
i  hosting[fir-static-87878]: finalizing version...
✔  hosting[fir-static-87878]: version finalized
i  hosting[fir-static-87878]: releasing new version...
✔  hosting[fir-static-87878]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/fir-static-87878/overview
Hosting URL: https://fir-static-87878.web.app

La dernière ligne contient le lien de votre site web Firebase. Dans cet exemple, il s'agit de https://fir-static-87878.web.app/.

La page suivante devrait apparaître :

Créez votre site web

Dans le dossier public, vous pouvez créer des pages web, des sous-dossiers, des fichiers CSS et JavaScript. Pour l'exemple, j'ai remplacé le contenu de public/index.html par le fichier html suivant :

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Static Hosting with Firebase</title>
  </head>
  <body>
    <h1>Static Hosting with Firebase</h1>
    <p>This page has been create with the guide from <a href="https://lucidar.me/en/firebase/host-a-static-website-on-firebase/">this page.</a></p>
  </body>
</html>

Chaque fois que vous devez déployer, il suffit de lancer la commande :

firebase deploy

Voici le résultat :

Git commit 969e1bc

Profitez-en et soyez créatifs !

Voir aussi

Dernière mise à jour : 15/10/2023