Distribuera Flutter-projekt till AWS Amplify

När du skapade Flutter-projekt med AWS Amplify-backend, är nästa steg att distribuera det. Här är hur du Distribuerar Flutter-projekt till AWS Amplify-hosting

AWS Amplify är Amazons tjänst för utveckling och hosting av fullstack-applikationer. Vissa säger att det bara är bra för prototyper, men vi är inte här för att diskutera lämplighet, utan för att granska hur man implementerar denna hosting.

Flutter fullstack-app struktur

En Flutter fullstack-app består av två huvudkomponenter

• Flutter frontend
• något backend

Frontenden kan kompileras till Web-app, Android-app, IOS-app, alla dessa distribueras på olika sätt. Vi kommer bara att granska den webbaserade.

Och backenden för Flutter fullstack-projektet, när det är gjort med AWS Amplify, är en uppsättning JavaScript lambda-funktioner. Typescript för att vara exakt. Inte ett stort urval av alternativ - GraphQL-funktioner, REST med DynamoDB, något AWS S3-åtkomst… Men ändå snabbt och enkelt.

Konfigurera AWS Amplify-distribution

OK. låt oss skapa AWS Amplify-distribution

1. Gå till https://console.aws.amazon.com/amplify/apps, välj din favoritregion.
2. Klicka på knappen Skapa nytt app
3. Välj din Git-leverantör. Lycklig är du om du skapade ditt AWS-konto innan augusti 2024, eftersom efter det tillhandahåller AWS inte längre AWS Codecommit-tjänsten till nya kunder. Men jag gjorde det, så jag använder AWS Codecommit i denna test. Klicka på knappen Nästa.
4. Välj repository och gren av ditt Flutter-app som ska distribueras från. Klicka på knappen Nästa.
5. Nu är vi på sidan App-inställningar, där guiden har upptäckt Amplify Gen2-app, och felaktigt konfigurerat byggande av frontend. Vi kommer att åtgärda detta senare. Klicka på Nästa.

6. Granska sammanfattningen, klicka på Spara och distribuera
7. Du kommer att se din nya distribution i gång

8. Och sedan ser du att det har distribuerats på ett mirakulöst sätt

När du klickar på denna domän-länk kommer du att se en tom webbläsarskärm. Det beror på att det inte byggs ditt Flutter-app än. Oroa dig inte, vi behöver bara göra en sak för att åtgärda det.

9. På din vänstra panel, klicka på Hosting / Build-inställningar, du kommer att se något som:

10. Klicka på Redigera och klistra in Frontend build-konfigurationen, behåll artefakter och cache-bitar.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Installerar 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 "Installerar beroenden"
        - flutter pub get
        - echo "Genererar backend-anslutning"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Bygger Flutter web-applikation utan WASM-stöd"
        - flutter build web

Se det fullständiga exemplet på kompilera och distribuera-skript nedan.

11. Klicka på Spara, gå till din distributionssida och klicka på Distribuera denna version igen. Eller Commit och push några ändringar till din gren.

12. Vänta tills det har slutfört ombyggnad och omdistribution och navigera till din app.

Staging och produktionsmiljöer

Du behöver inte specialkonfigurationer eller ytterligare miljövariabler för Prod, Staging och andra miljöer i sig. Amplify-distribution tillhandahåller redan miljövariabler $AWS_BRANCH och $AWS_APP_ID. Så vårt skript när det distribuerar olika grenar kommer att distribuera backend till olika stage, och ansluta frontend till denna stage. Du behöver bara skapa en ny distribution av din app och välja en annan gren. Det är allt.

Se den detaljerade beskrivningen nedan.

När du kompilerar backend ser du biten

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

Det producerar filen amplify_outputs.json, som behövs av react frontend:

[INFO]: Filen är skriven: amplify_outputs.json

men för flutter frontend behöver vi amplify_outputs.dart.

Den ursprungliga dokumentationen säger inte mycket om flutter frontend, men det viktiga punkten finns där:

Generera konfigurationen för en grenmiljö genom att köra:

npx ampx generate outputs --app-id <din-amplify-app-id> --branch <din-git-gren-namn> --format dart --out-dir lib

Detta skript genererar dart backend-anslutningskod (filen lib/amplify_outputs.dart) för Flutter frontend att använda. Och eftersom du anger parametrarna --app-id <din-amplify-app-id> och --branch <din-git-gren-namn> - kommer backenden att vara olika för varje distribuerad gren. Denna fil bör inte inkluderas i git-repo. Kontrollera att .gitignore i app-projektet innehåller

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Om du pushar lib/amplify_outputs.dart till git och inte kör npx ampx generate outputs... - kommer din distribuerade frontend att försöka ansluta till utvecklar-sandbox, inte till rätt staging eller produktionsbackend.

Det verkliga skriptet för build-konfiguration på amplify-hosting bör vara:

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

Exempel på Amplify.yaml

Hittades någonstans på reddit, låt oss bara behålla det här.

Fullständigt exempel på Amplify.yaml som bygger och distribuerar Flutter web-app till 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 "Installerar 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 "Installerar beroenden"
        - flutter pub get
        - echo "Genererar backend-anslutning"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Bygger Flutter web-applikation utan WASM-stöd"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Användbara länkar

• Åtgärda Flutter-fel på AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Flutter-projekt med AWS Amplify-backend
• Installera Flutter
• Flutter (Dart) Cheat Sheet
• Amplify Dokumentation för Flutter på .aws
• Installera Node.js
• Dockerisera Flutter Web-app med dockeriserad Flutter-build och Nginx