firebase_setup.md

Pour setup Firebase.

1. Créer un projet firebase depuis la console firebase

2. Installer sur votre machine les outils firebase avec la commande :

npm install -g firebase-tools

3. Log in depuis la CLI en utilisant le même compte que celui utilisé pour créer le projet firebase en utilisant la commande

firebase login

4. Puis utiliser cette commande pour initialiser firebase depuis le répertoire contenant le frontend.

firebase init

Dans la CLI interative, sélectionner :

Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

Choisir "Use an existing project" et choisir le projet créé préalablement.

Le public directory indique le sous-répertoire où se trouveront les fichiers à déployer. Par convention web, nous utiliserons dist/ : C'est ici que le framework angular génère des fichiers lors du build.

Indiquer "yes" à l'option de génération sous forme de single-page app.

Puis ne pas automatiquement générer des GitHub Action deploys puisque nous utiliserons GitLab.

Cette commande crée alors un fichier .json qui doit se trouver à la racine de votre projet frontend. Ce dernier contient les détails du hosting pour firebase.

5. Pour push depuis une pipeline CI/CD, nous avons besoin de commandes non interactives, or la commande firebase login est interactive et ne fonctionnera pas depuis la pipeline. Nous allons alors générer un token que nous pourrons utiliser pour déployer le projet en nous authentifiant, sans passer par la commande login. Utiliser la commande suivante pour générer un token :

firebase login:ci

Le token retourné doit être noté puisqu'il sera nécessaire pour le déploiement.

6. Finallement, pour vérifier votre installation : build le projet angular en utilisant ng build --aot, et déployer le contenu en utilisant la commande :

firebase deploy --token <token>

En remplaçant <token> par le votre, obtenu à l'étape 5. Firebase déploie alors le contenu du dossier indiqué lors de la commande init, en s'authentifiant à l'aide de votre token. La CLI vous retourne l'adresse à laquelle votre projet est disponible.

Il est désormait possible d'utiliser cette commande deploy dans votre CI/CD pour mettre à jour le frontend à l'exécution de votre pipeline, après avoir installé les outils firebase sur le runner. Attention à ne pas hardcoder votre token !!! (très mauvaise pratique !), pensez bien à la variabiliser depuis l'interface graphique de gitlab et à limiter son accès. Dans votre .gitlab-ci.yml remplacez la valeur du token par votre variable.