Flutter-project implementeren in AWS Amplify

Wanneer je een Flutter project met AWS Amplify backend hebt gemaakt, is de volgende stap om het te implementeren. Hier is hoe je Flutter project implementeert op AWS Amplify hosting

AWS Amplify is de Amazon dienst voor het ontwikkelen en hosten van fullstack toepassingen. Sommige mensen zeggen dat het alleen geschikt is voor prototyping, maar wij zijn hier niet om te bespreken of het geschikt is of niet, maar om te bespreken hoe je deze hosting kunt implementeren.

Structuur van een Flutter fullstack app

Een Flutter fullstack app bestaat uit twee hoofdcomponenten:

• Flutter frontend
• enige backend

De frontend kan worden gecompileerd naar een Web app, Android app, IOS app, al deze worden op verschillende manieren geïmplementeerd. Wij zullen alleen de webversie bespreken.

En de backend van een Flutter fullstack project, wanneer het gemaakt is met AWS Amplify - is een verzameling JavaScript lambda functies. Preciezer gezegd: TypeScript. Niet een grote variëteit van opties - GraphQL functies, REST met DynamoDB, enige AWS S3 toegang… Niettemin snel en makkelijk.

Configureren van AWS Amplify implementatie

OK. Laten we een AWS Amplify implementatie aanmaken

1. Ga naar https://console.aws.amazon.com/amplify/apps , kies je favoriete regio.
2. Klik op de knop Create new app
3. Selecteer je Git provider. Gelukkig ben je als je je AWS account hebt aangemaakt voor augustus 2024, omdat daarna AWS geen AWS Codecommit service meer biedt aan nieuwe klanten. Maar ik heb dat gedaan, dus gebruik ik AWS Codecommit in deze test. Klik op de knop Next.
4. Selecteer de repository en branch van je Flutter app die moet worden geïmplementeerd. Klik op de knop Next.
5. Nu zijn we op de pagina App settings, waar de wizard de Amplify Gen2 app heeft gedetecteerd en de frontend verkeerd heeft geconfigureerd. We zullen dit later corrigeren. Klik op Next.

6. Bekijk de samenvatting, klik op Save and Deploy
7. Je ziet je nieuwe implementatie in bewerking

8. En dan zie je dat het miraculeus geïmplementeerd is

Wanneer je op deze domain link klikt, zie je alleen een leeg browservenster. Dat is omdat het nog niet je Flutter app bouwt. Maak je geen zorgen, we hebben slechts één ding nodig om dit te corrigeren.

9. Klik op je linkerpannel op Hosting / Build Settings, je ziet iets als:

10. Klik op Bewerken en plak de Frontend build configuratie, behoud de artefacten en cache bits.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Installeren van 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 "Installeren van afhankelijkheden"
        - flutter pub get
        - echo "Genereren van backend verbinding"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Bouwen van Flutter web applicatie zonder WASM ondersteuning"
        - flutter build web

Zie het volledige voorbeeld van de compile en deploy script hieronder.

11. Klik op Save, ga naar je implementatiepagina en klik op Redeploy this version. Of commit en push enige wijzigingen naar je branch.

12. Wacht tot het opnieuw bouwen en implementeren is voltooid en navigeer naar je app.

Staging en Productieomgevingen

Je hebt geen speciale configuraties of extra omgevingsvariabelen nodig voor Prod, Staging en andere omgevingen per se. Amplify implementatie biedt al omgevingsvariabelen $AWS_BRANCH - en $AWS_APP_ID. Dus wanneer je backend implementeert vanuit een andere branch, wordt het geïmplementeerd naar een andere stage, en wordt de frontend verbonden met deze stage. Je moet alleen een nieuwe implementatie van je app aanmaken en een andere branch selecteren. Dat is alles/

Zie de gedetailleerde beschrijving hieronder.

Wanneer je backend compileert zie je de regel

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

Het genereert het bestand amplify_outputs.json, dat nodig is voor de react frontend:

[INFO]: Bestand geschreven: amplify_outputs.json

maar voor de flutter frontend hebben we amplify_outputs.dart nodig.

De originele documentatie zegt niet veel over de flutter frontend, maar een belangrijk punt is er:

Genereer de configuratie voor een branch omgeving door uit te voeren:

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

Deze script genereert dart backend verbinding code (bestand lib/amplify_outputs.dart) voor Flutter frontend om te gebruiken. En omdat je parameters --app-id <your-amplify-app-id> en --branch <your-git-branch-name> opgeeft - wordt de backend anders voor elke branch die is geïmplementeerd. Dit bestand moet niet in de git repo worden opgenomen. Controleer dat de .gitignore in het app project bevat:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Als je lib/amplify_outputs.dart naar git pusht en niet npx ampx generate outputs... uitvoert - probeert je geïmplementeerde frontend verbinding te maken met de ontwikkelaars sandbox, niet met de juiste staging of productie backend.

Het echte script voor build configuratie op amplify hosting zou moeten zijn:

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

Voorbeeld van Amplify.yaml

Gevonden ergens op reddit, laten we het hier gewoon bewaren.

Volledig voorbeeld van Amplify.yaml die een Flutter web app bouwt en implementeert op AWS Amplify hosting:

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 "Installeren van 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 "Installeren van afhankelijkheden"
        - flutter pub get
        - echo "Genereren van backend verbinding"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Bouwen van Flutter web applicatie zonder WASM ondersteuning"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Nuttige links

• Oplossen van Flutter fouten op AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Flutter project met AWS Amplify backend
• Installeren van Flutter
• Flutter (Dart) Cheat Sheet
• Amplify Documentatie voor Flutter op .aws
• Installeren van Node.js
• Dockeriseren van Flutter Web app met gedockerde Flutter build en Nginx