Article original : How to Deploy a Flutter Web App to Firebase Hosting with GitHub Actions

Le déploiement d'une application web Flutter peut sembler répétitif si vous le faites manuellement à chaque fois. GitHub Actions automatise cela en déployant continuellement votre application sur Firebase Hosting dès que vous poussez du code vers votre dépôt.

Ce guide vous accompagne dans la configuration de Firebase Hosting, le paramétrage de GitHub Actions et la gestion des déploiements. À la fin, vous disposerez d'un pipeline CI/CD fiable pour votre projet web Flutter.

Table des matières :

  1. Prérequis

  2. Étape 1 : Configurer Firebase Hosting

  3. Étape 2 : Configurer Firebase Hosting

  4. Étape 3 : Ajouter la configuration Firebase à Flutter

  5. Étape 4 : Configurer GitHub Actions

  6. Étape 5 : Configurer le jeton Firebase

  7. Étape 6 : Valider et surveiller le déploiement

  8. Configurations avancées

  9. Dépannage

Prérequis

Avant de commencer, assurez-vous d'avoir ces éléments prêts :

1. Flutter installé : Vous pouvez installer Flutter depuis flutter.dev, puis confirmer l'installation avec :

flutter --version

2. Firebase CLI installé : La Firebase CLI vous permet d'interagir avec Firebase Hosting. Installez-la via npm comme ceci :

npm install -g firebase-tools

Approuvez l'installation avec :

firebase --version

3. Un dépôt GitHub : Votre projet Flutter doit être poussé sur GitHub.

4. Un projet Firebase créé : Allez sur la Console Firebase, créez un projet et activez Firebase Hosting.

Étape 1 : Configurer Firebase Hosting

Initialiser Firebase dans votre projet

Ouvrez votre terminal et naviguez vers votre projet :

cd chemin/vers/votre/projet/flutter

Initialisez Firebase Hosting :

firebase init

Pendant la configuration, vous devrez fournir quelques informations :

  1. Hosting : Sélectionnez Firebase Hosting.

  2. Public Directory : Entrez build/web (c'est là que Flutter génère les builds web).

  3. Single-Page App : Sélectionnez Yes (réécrit toutes les routes vers /index.html).

  4. Automatic Builds : Vous pouvez ignorer cette étape car nous allons configurer GitHub Actions manuellement.

Étape 2 : Configurer Firebase Hosting

Un fichier nommé firebase.json sera créé. Assurez-vous qu'il ressemble à ceci :

{
  "hosting": {
    "public": "build/web",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

Explication :

  1. hosting.public indique à Firebase où trouver votre application compilée (build/web).

  2. ignore liste les fichiers que Firebase ne doit pas télécharger (fichiers cachés, fichiers de configuration, node_modules).

Vous pourriez également voir un fichier .firebaserc pour l'aliasing du projet :

{
  "projects": {
    "default": "votre-id-projet-firebase"
  }
}

Ceci lie votre projet local à votre ID de projet Firebase.

Étape 3 : Ajouter la configuration Firebase à Flutter

Lorsque vous connectez Firebase à Flutter (via la CLI flutterfire), cela génère un fichier comme firebase_options.dart.

Dans votre main.dart, initialisez Firebase :

import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'firebase_options.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

Explication :

  1. WidgetsFlutterBinding.ensureInitialized() garantit que le Framework Flutter est prêt avant l'initialisation de Firebase.

  2. Firebase.initializeApp() connecte votre application à Firebase en utilisant les options générées automatiquement.

Étape 4 : Configurer GitHub Actions

Nous allons maintenant créer un workflow qui construit et déploie automatiquement votre application web Flutter.

Créez un fichier dans votre dépôt : .github/workflows/firebase-hosting.yml

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main  # Déploie uniquement lors d'un push sur main
  pull_request:
    branches:
      - main

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Repository
      uses: actions/checkout@v2

    - name: Set up Flutter
      uses: subosito/flutter-action@v3
      with:
        flutter-version: '3.24.1'

    - name: Install Dependencies
      run: flutter pub get

    - name: Build Flutter Web
      run: flutter build web --release

    - name: Set up Node.js
      uses: actions/setup-node@v3
      with:
        node-version: '18'

    - name: Install Firebase CLI
      run: npm install -g firebase-tools

    - name: Deploy to Firebase Hosting
      run: firebase deploy --only hosting --project <firebase-project-id>
      env:
        FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}

Explication des étapes :

  1. Checkout Repository : Récupère votre code dans le runner.

  2. Set up Flutter : Installe la version spécifiée de Flutter.

  3. Install Dependencies : Exécute flutter pub get.

  4. Build Flutter Web : Construit la version release de votre application web.

  5. Set up Node.js : Nécessaire pour la Firebase CLI.

  6. Install Firebase CLI : Installe l'outil de déploiement Firebase.

  7. Deploy to Firebase Hosting : Déploie les fichiers compilés sur Firebase.

Étape 5 : Configurer le jeton Firebase

GitHub a besoin d'un jeton (token) pour s'authentifier auprès de Firebase.

Exécutez ceci localement :

firebase login:ci

Copiez ensuite le jeton affiché.

Ensuite, allez dans votre Dépôt GitHub → Settings → Secrets and Variables → Actions.

Créez un nouveau secret nommé : FIREBASE_TOKEN et collez le jeton que vous avez copié. Cela protège vos identifiants.

Étape 6 : Valider et surveiller le déploiement

Effectuez un Commit du fichier de workflow comme ceci :

git add .github/workflows/firebase-hosting.yml
git commit -m "Setup GitHub Actions for Firebase Hosting"
git push origin main

Allez sur votre dépôt GitHub, sélectionnez l'onglet Actions, puis observez l'exécution du workflow. Vous verrez une interface similaire à ces images :

workflow en cours d'exécution

workflow terminé

Une fois réussi, allez sur :

https://votre-id-projet.web.app

https://votre-id-projet.firebaseapp.com

Configurations avancées

Build personnalisé

Si vous avez besoin d'un moteur de rendu spécifique (par exemple, HTML au lieu de CanvasKit) :

run: flutter build web --release --web-renderer html

Environnements multiples (Staging & Production)

run: firebase deploy --only hosting --project ${{ secrets.FIREBASE_PROJECT }}

Définissez FIREBASE_PROJECT comme un secret pour chaque environnement.

Mise en cache des dépendances (Accélérer les builds)

- name: Cache Flutter Dependencies
  uses: actions/cache@v3
  with:
    path: ~/.pub-cache
    key: ${{ runner.os }}-pub-cache-${{ github.sha }}
    restore-keys: |
      ${{ runner.os }}-pub-cache-

Dépannage

Vous pourriez rencontrer quelques problèmes courants. Voici quelques solutions rapides pour vous aider :

ProblèmeSolution
No active projectExécutez firebase use --add localement et vérifiez .firebaserc.
Node.js version mismatchAssurez-vous d'avoir node-version: '18' dans le workflow.
Firebase CLI errorsRéinstallez avec npm install -g firebase-tools.
Deprecated warnings in index.htmlMettez à jour vers le dernier template web Flutter.

Conclusion

En intégrant Firebase Hosting avec GitHub Actions, vous disposez désormais d'un pipeline CI/CD pour votre application web Flutter.

Chaque push sur main déclenche automatiquement un build et un déploiement, maintenant votre application en ligne sans effort manuel.

Pour aller plus loin, consultez :

  1. Documentation Flutter Web

  2. Documentation Firebase Hosting

  3. Documentation GitHub Actions