Déployer un projet Flutter sur AWS Amplify

Lorsque vous avez créé
projet Flutter avec backend AWS Amplify,
la prochaine étape est de le déployer.
Voici comment déployer un projet Flutter sur le hosting AWS Amplify

AWS Amplify est le service Amazon pour le développement et le déploiement d’applications fullstack.
Certains disent qu’il est adapté uniquement pour le prototypage, mais nous ne sommes pas ici pour discuter de la pertinence particulière, mais pour examiner comment mettre en œuvre ce déploiement.

Structure d’une application fullstack Flutter

Une application fullstack Flutter se compose de deux composants principaux :

• frontend Flutter
• un backend

Le frontend peut être compilé en application Web, Android, iOS, tous ces éléments sont déployés différemment.
Nous examinerons uniquement le déploiement Web.

Et le backend d’un projet Flutter fullstack, lorsqu’il est fait avec AWS Amplify, est un ensemble de fonctions JavaScript lambda. Plus précisément, TypeScript.
Pas une grande variété d’options - fonctions GraphQL, REST avec DynamoDB, quelques accès AWS S3… Toutefois, rapide et facile.

Configuration du déploiement AWS Amplify

OK. créons le déploiement AWS Amplify

1. Allez sur https://console.aws.amazon.com/amplify/apps, choisissez votre région préférée.
2. Cliquez sur le bouton Créer une nouvelle application
3. Sélectionnez votre fournisseur Git. Heureux si vous avez créé votre compte AWS avant août 2024, car après cela AWS ne fournit plus le service AWS Codecommit aux nouveaux clients. Mais je l’ai fait, donc j’utilise AWS Codecommit dans ce test. Cliquez sur le bouton Suivant.
4. Sélectionnez le dépôt et la branche de votre application Flutter à déployer. Cliquez sur le bouton Suivant.
5. Nous sommes maintenant sur la page Paramètres de l'application, où le guide a détecté l’application Amplify Gen2, et a mal configuré le frontend de construction. Nous le corrigerons plus tard. Cliquez sur Suivant.

6. Vérifiez le résumé, cliquez sur Enregistrer et déployer
7. Vous verrez votre nouveau déploiement en cours

8. Et puis vous verrez qu’il est miraculeusement déployé

Lorsque vous cliquez sur ce lien domain, vous verrez juste une page web vide. Cela est dû au fait qu’il ne construit pas encore votre application Flutter. Ne vous inquiétez pas, nous n’avons qu’une seule chose à faire pour le corriger.

9. Sur votre panneau de gauche, cliquez sur Hosting / Paramètres de construction, vous verrez quelque chose comme :

10. Cliquez sur Éditer et collez la configuration de construction du frontend, en conservant les artefacts et le cache.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Installation du SDK Flutter"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Installation des dépendances"
        - flutter pub get
        - echo "Génération de la connexion backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Construction de l'application Flutter web sans support WASM"
        - flutter build web

Voir l’exemple complet du script de compilation et de déploiement ci-dessous.

11. Cliquez sur Enregistrer, allez à la page de déploiement de votre application et cliquez sur Redéployer cette version. Ou committez et poussez quelques modifications vers votre branche.

12. Attendez que la reconstruction et le redéploiement soient terminés, puis naviguez vers votre application.

Environnements de test et de production

Vous n’avez pas besoin de configurations spéciales ou de variables d’environnement supplémentaires pour les environnements de production, de test et autres. Le déploiement Amplify fournit déjà les variables d’environnement $AWS_BRANCH et $AWS_APP_ID. Ainsi, notre script lors du déploiement d’une branche différente déployera le backend vers une autre étape, et connectera le frontend à cette étape. Vous avez juste besoin de créer un nouveau déploiement de votre application et de sélectionner une branche différente. C’est tout.

Voir la description détaillée ci-dessous.

Lorsque vous compilez le backend, vous verrez la partie suivante :

npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID

Cela produit le fichier amplify_outputs.json, qui est nécessaire pour le frontend React :

[INFO]: Fichier écrit : amplify_outputs.json

mais pour le frontend Flutter, nous avons besoin de amplify_outputs.dart.

Le document original ne dit pas beaucoup sur le frontend Flutter, mais un point important est présent :

Générez la configuration pour un environnement de branche en exécutant :

npx ampx generate outputs --app-id <your-amplify-app-id> --branch <your-git-branch-name> --format dart --out-dir lib

Ce script génère le code de connexion backend (fichier lib/amplify_outputs.dart) pour le frontend Flutter à utiliser. Et parce que vous spécifiez les paramètres --app-id <your-amplify-app-id> et --branch <your-git-branch-name> - le backend sera différent pour chaque branche déployée. Ce fichier ne doit pas être inclus dans le dépôt Git. Vérifiez que le .gitignore du projet contient :

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Si vous poussez lib/amplify_outputs.dart vers le dépôt Git et que vous n’exécutez pas npx ampx generate outputs... - votre frontend déployé tentera de se connecter au sandbox du développeur, et non au backend de test ou de production approprié.

Le véritable script de configuration de construction sur le déploiement Amplify devrait être :

npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID

Exemple d’Amplify.yaml

Trouvé quelque part sur Reddit, gardons-le ici.

Exemple complet d’Amplify.yaml pour construire et déployer une application Flutter web sur le hosting AWS Amplify :

version: 1
backend:
  phases:
    build:
      commands:
        - npm ci --cache .npm --prefer-offline
        - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
frontend:
  phases:
    preBuild:
      commands:
        - echo "Installation du SDK Flutter"
        - git clone https://github.com/flutter/flutter.git -b stable --depth 1
        - export PATH="$PATH:$(pwd)/flutter/bin"
        - flutter config --no-analytics
        - flutter doctor
        - echo "Installation des dépendances"
        - flutter pub get
        - echo "Génération de la connexion backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Construction de l'application Flutter web sans support WASM"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Liens utiles

• Corriger les erreurs Flutter sur AWS Amplify : [WARNING] fatal Not a valid object name origin/master
• Projet Flutter avec backend AWS Amplify
• Installer Flutter
• Feuille de triche Flutter (Dart)
• Documentation Amplify pour Flutter sur .aws
• Installer Node.js
• Dockeriser une application Flutter Web avec une construction Dockerisée Flutter et Nginx