Wdrażanie projektu Flutter w usługi AWS Amplify

W tymże obejmującej środowiska testowe i produkcyjne

Page content

Kiedy utworzyłeś projekt Flutter z backendem AWS Amplify, następnym krokiem jest wdrożenie. Oto jak wdrożyć projekt Flutter do hostingu AWS Amplify

AWS Amplify to usługa Amazon do tworzenia i hostowania aplikacji pełnoprawnych. Niektórzy mówią, że jest dobra tylko do prototypowania, ale nie jesteśmy tu, by omawiać konkretne odpowiednie przypadki użycia, tylko by sprawdzić, jak zaimplementować ten hosting.

Flutter do amplify tracktor

Struktura aplikacji pełnoprawnej Flutter

Aplikacja pełnoprawna Flutter składa się z dwóch głównych komponentów:

frontend Flutter
jakiś backend

Frontend można skompilować do aplikacji Web, Android, IOS, wszystkie są wdrażane inaczej. Zajmiemy się tylko wersją webową.

A backend aplikacji pełnoprawnej Flutter, kiedy jest tworzony z użyciem AWS Amplify - to zestaw funkcji JavaScript lambda. Dokładniej mówiąc, TypeScript. Nie jest to duża liczba opcji - funkcje GraphQL, REST z DynamoDB, pewne dostępności do AWS S3… Mimo to szybki i łatwy.

Konfigurowanie wdrożenia AWS Amplify

OK. Utwórzmy wdrożenie AWS Amplify

Przejdź do https://console.aws.amazon.com/amplify/apps, wybierz ulubiony region.
Kliknij przycisk Utwórz nową aplikację
Wybierz swój dostawcę Git. Szczęśliwy jesteś, jeśli utworzyłeś konto AWS przed sierpniem 2024, ponieważ po tym AWS nie udostępnia nowym klientom usługi AWS Codecommit. Ale ja to zrobiłem, więc używam AWS Codecommit w tym testowaniu. Kliknij przycisk Dalej.
Wybierz repozytorium i gałąź swojej aplikacji Flutter, z której ma zostać wdrożona. Kliknij przycisk Dalej.
Teraz jesteśmy na stronie Ustawienia aplikacji, gdzie krok automatycznie wykrył aplikację Amplify Gen2 i błędnie skonfigurował budowę frontendu. Poprawimy to później. Kliknij Dalej.

wykryto aplikację Amplify Gen2

Przejrzyj podsumowanie, kliknij Zapisz i wdroż.
Zobaczysz swoje nowe wdrożenie w toku

amplify-deploying

I potem zobaczysz, że zostało magicznie wdrożone

amplify-deployed

Kiedy klikniesz w ten link domena, zobaczysz tylko pusty ekran przeglądarki. To dlatego, że jeszcze nie kompiluje się Twoją aplikację Flutter. Nie martw się, musimy zrobić tylko jedną rzecz, by to naprawić.

Na lewym pasku kliknij Hosting / Ustawienia budowy, zobaczysz coś takiego:

amplify-build-settings

Kliknij Edytuj i wklej konfigurację budowy frontendu, zachowując artefakty i cache.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Instalacja 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 "Instalacja zależności"
        - flutter pub get
        - echo "Generowanie połączenia backendu"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Kompilacja aplikacji Flutter web bez wsparcia WASM"
        - flutter build web

Zobacz pełny przykład skryptu kompilacji i wdrożenia poniżej.

Kliknij Zapisz, przejdź do strony wdrożenia swojej aplikacji i kliknij Ponowne wdrożenie tej wersji. Albo zatwierdź i wypchnij pewne zmiany do swojej gałęzi.
Poczekaj, aż zakończy się ponowna kompilacja i wdrożenie, a następnie przejdź do swojej aplikacji.

Środowiska testowe i produkcyjne

Nie potrzebujesz specjalnych konfiguracji ani dodatkowych zmiennych środowiskowych dla środowisk produkcyjnych, testowych i innych. Wdrożenie Amplify już dostarcza zmienne środowiskowe $AWS_BRANCH -i $AWS_APP_ID. Więc nasz skrypt, kiedy wdrażasz inną gałąź, wdroży backend do innego środowiska, a frontend połączy się z tym środowiskiem. Musisz tylko utworzyć nowe wdrożenie swojej aplikacji i wybrać inną gałąź. To wszystko/

Zobacz szczegółowe opisy poniżej.

Kiedy kompilujesz backend zobacz fragment:

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

Tworzy plik amplify_outputs.json, który jest potrzebny przez frontend react:

[INFO]: Plik został zapisany: amplify_outputs.json

ale dla frontendu Flutter potrzebujemy amplify_outputs.dart.

Oryginalny dokument nie mówi wiele o frontendzie Flutter, ale ważny punkt jest tam:

Wygeneruj konfigurację dla środowiska gałęzi, uruchamiając:

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

Ten skrypt generuje kod połączenia backendu (plik lib/amplify_outputs.dart) do użycia przez frontend Flutter. I dlatego, że określasz parametry --app-id <your-amplify-app-id> i --branch <your-git-branch-name> - backend będzie inny dla każdej wdrożonej gałęzi. Ten plik nie powinien być włączony do repozytorium git. Sprawdź, czy .gitignore w projekcie aplikacji zawiera:

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Jeśli wypchniesz lib/amplify_outputs.dart do repozytorium git i nie uruchomisz npx ampx generate outputs... - Twoj frontend wdrożony będzie próbował połączyć się z sandboxem dewelopera, a nie z odpowiednim środowiskiem testowym lub produkcyjnym.

Rzeczywisty skrypt dla konfiguracji budowy na hostingu Amplify powinien być:

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

Przykład Amplify.yaml

Znaleziono gdzieś na reddit, zostawmy go tutaj.

Pełny przykład Amplify.yaml budowania i wdrażania aplikacji Flutter web na hostingu 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 "Instalacja 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 "Instalacja zależności"
        - flutter pub get
        - echo "Generowanie połączenia backendu"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Kompilacja aplikacji Flutter web bez wsparcia WASM"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Struktura aplikacji pełnoprawnej Flutter

Konfigurowanie wdrożenia AWS Amplify

Środowiska testowe i produkcyjne

Przykład Amplify.yaml

Przydatne linki