Flutter-Projekt auf AWS Amplify bereitstellen

Wenn Sie einen Flutter-Projekt mit AWS Amplify-Backend erstellt haben, ist der nächste Schritt, es zu deployen. Hier ist, wie Sie Flutter-Projekt auf AWS Amplify-Hosting deployen

AWS Amplify ist der Amazon-Dienst für die Entwicklung und das Hosting von Fullstack-Anwendungen. Einige Menschen sagen, es sei nur für Prototypen geeignet, aber wir sind nicht hier, um über die spezifische Eignung zu diskutieren, sondern um zu prüfen, wie man dieses Hosting umsetzt.

Struktur einer Flutter Fullstack-App

Eine Flutter Fullstack-App besteht aus zwei Hauptkomponenten:

• Flutter-Frontend
• Einige Backend-Elemente

Das Frontend kann in eine Web-App, Android-App, iOS-App kompiliert werden, alle diese werden anders deployed. Wir werden hier nur die Web-App betrachten.

Und das Backend einer Flutter Fullstack-App, wenn es mit AWS Amplify erstellt wird, besteht aus einer Reihe von JavaScript Lambda-Funktionen. Präziser gesagt: TypeScript. Es gibt nicht viele Optionen – GraphQL-Funktionen, REST mit DynamoDB, einige AWS S3-Zugriffe… Dennoch ist es schnell und einfach.

Konfigurieren der AWS Amplify-Deployment

OK. Erstellen Sie die AWS Amplify-Deployment

1. Gehen Sie zu https://console.aws.amazon.com/amplify/apps, wählen Sie Ihre bevorzugte Region aus.
2. Klicken Sie auf die Schaltfläche Create new app.
3. Wählen Sie Ihren Git-Anbieter. Glücklich sind Sie, wenn Sie Ihren AWS-Konto vor August 2024 erstellt haben, denn danach bietet AWS keinen AWS Codecommit-Dienst mehr für neue Kunden an. Ich habe jedoch eines erstellt, also verwende ich AWS Codecommit in diesem Test. Klicken Sie auf die Schaltfläche Next.
4. Wählen Sie das Repository und die Branch Ihres Flutter-Projekts, das deployed werden soll. Klicken Sie auf die Schaltfläche Next.
5. Jetzt sind Sie auf der Seite App settings, wo der Assistent die Amplify Gen2-App erkannt hat und das Frontend falsch konfiguriert hat. Wir werden das später beheben. Klicken Sie auf Next.

6. Überprüfen Sie die Zusammenfassung, klicken Sie auf Save and Deploy
7. Sie werden sehen, dass Ihre neue Deployment im Gange ist

8. Und dann sehen Sie, dass es wunderbar deployed wurde

Wenn Sie auf diesen domain-Link klicken, sehen Sie nur eine leere Browserseite. Das liegt daran, dass das Flutter-App noch nicht gebaut wird. Machen Sie sich keine Sorgen, wir müssen nur eine Sache tun, um das zu beheben.

9. Auf Ihrem linken Menü klicken Sie auf Hosting / Build Settings, Sie werden etwas wie folgt sehen:

10. Klicken Sie auf Bearbeiten und fügen Sie die Frontend-Build-Konfiguration ein, wobei Sie die Artefakte und Cache-Bits beibehalten.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Installing Flutter SDK"
        - 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 "Installing dependencies"
        - flutter pub get
        - echo "Generating backend connection"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Building Flutter web application without WASM support"
        - flutter build web

Siehe das vollständige Beispiel für den Compile- und Deploy-Skript unten.

11. Klicken Sie auf Save, gehen Sie zu Ihrer Deployment-Seite und klicken Sie auf Redeploy this version. Oder committen und pushen Sie einige Änderungen in Ihre Branch.

12. Warten Sie, bis es erneut gebaut und redeployed wird, und navigieren Sie zu Ihrer App.

Staging- und Produktionsumgebungen

Sie benötigen keine besonderen Konfigurationen oder zusätzliche Umgebungsvariablen für Prod, Staging und andere Umgebungen an sich. Amplify-Deployment bietet bereits Umgebungsvariablen $AWS_BRANCH und $AWS_APP_ID. Also wird unser Skript beim Deployment unterschiedlicher Branches das Backend in unterschiedliche Stages deployen und das Frontend an diese Stage verbinden. Sie müssen nur eine neue Deployment Ihres Apps erstellen und einen anderen Branch auswählen. Das ist alles.

Siehe die detaillierte Beschreibung unten.

Wenn Sie das Backend kompilieren, sehen Sie den Teil:

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

Es erzeugt die Datei amplify_outputs.json, die vom React-Frontend benötigt wird:

[INFO]: File written: amplify_outputs.json

aber für das Flutter-Frontend benötigen wir amplify_outputs.dart.

Der Original-Dokumentation wird nicht viel über das Flutter-Frontend gesagt, aber ein wichtiger Punkt ist vorhanden:

Erzeugen Sie die Konfiguration für eine Branch-Umgebung, indem Sie folgendes ausführen:

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

Dieses Skript erzeugt Dart-Backend-Verbindungscode (Datei lib/amplify_outputs.dart) für das Flutter-Frontend. Da Sie die Parameter --app-id <your-amplify-app-id> und --branch <your-git-branch-name> angeben – wird das Backend für jeden deployed Branch unterschiedlich sein. Diese Datei sollte nicht in das Git-Repo aufgenommen werden. Prüfen Sie, ob die .gitignore im App-Projekt folgendes enthält:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Wenn Sie lib/amplify_outputs.dart in Git pushen und nicht npx ampx generate outputs... ausführen – wird das deployed Frontend versuchen, sich mit dem Entwicklungs-Sandbox zu verbinden, nicht mit dem richtigen Staging- oder Produktions-Backend.

Das echte Skript für die Build-Konfiguration auf Amplify-Hosting sollte lauten:

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

Beispiel für Amplify.yaml

Gefunden irgendwo auf Reddit, lassen Sie uns es einfach hier aufbewahren.

Vollständiges Beispiel für Amplify.yaml, das eine Flutter Web-App auf AWS Amplify-Hosting baut und deployt:

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 "Installing Flutter SDK"
        - 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 "Installing dependencies"
        - flutter pub get
        - echo "Generating backend connection"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Building Flutter web application without WASM support"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Nützliche Links

• Beheben von Flutter-Fehlern auf AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Flutter-Projekt mit AWS Amplify-Backend
• Flutter installieren
• Flutter (Dart) Cheat Sheet
• Amplify Dokumentation für Flutter auf .aws
• Node.js installieren
• Dockerisieren einer Flutter Web-App mit dockerisiertem Flutter-Build und Nginx