Distribuire un progetto Flutter su AWS Amplify

Quando hai creato progetto Flutter con backend AWS Amplify, il passo successivo è deployarlo. Ecco come Deployare il progetto Flutter su AWS Amplify hosting

AWS Amplify è il servizio Amazon per lo sviluppo e l’hosting di applicazioni fullstack. Alcune persone dicono che è adatto solo per prototipi, ma non siamo qui per discutere la sua adattezza specifica, ma per rivedere come implementare questo hosting.

Struttura dell’app fullstack Flutter

Un’app fullstack Flutter è composta da due componenti principali:

• frontend Flutter
• alcuni backend

Il frontend può essere compilato in un’app Web, un’app Android, un’app iOS, tutte queste vengono deployate in modi diversi. Esamineremo solo quella web.

E il backend del progetto Flutter fullstack, quando viene realizzato con AWS Amplify, è un insieme di funzioni JavaScript lambda. Più precisamente TypeScript. Non un’ampia varietà di opzioni - funzioni GraphQL, REST con DynamoDB, alcuni accessi AWS S3… Tuttavia, veloci e semplici.

Configurazione del deployment AWS Amplify

OK. creiamo il deployment AWS Amplify

1. Vai a https://console.aws.amazon.com/amplify/apps , scegli la tua regione preferita.
2. Clicca sul pulsante Crea nuovo app
3. Seleziona il tuo provider Git. Sei fortunato se hai creato il tuo account AWS prima di agosto 2024, perché dopo di allora AWS non fornisce il servizio AWS Codecommit ai nuovi clienti. Ma l’ho fatto io, quindi sto usando AWS Codecommit in questo test. Clicca il pulsante Avanti.
4. Seleziona il repository e il branch del tuo app flutter da deployare. Clicca il pulsante Avanti.
5. Ora siamo sulla pagina Impostazioni app, dove il wizard ha rilevato l’app Amplify Gen2 e ha configurato erroneamente il build frontend. Lo correggeremo più tardi. Clicca Avanti.

6. Rivedi il riepilogo, clicca Salva e Deploy
7. Vedrai il tuo nuovo deployment in corso

8. E poi lo vedrai deployato miracolosamente

Quando clicchi sul link domain vedrai solo uno schermo del browser vuoto. Questo perché non sta ancora costruendo la tua app Flutter. Non preoccuparti, dobbiamo solo fare una cosa per correggerlo.

9. Sul tuo pannello di sinistra clicca su Hosting / Build Settings, vedrai qualcosa come:

10. Clicca Modifica e incolla la configurazione del build frontend, mantenendo gli artefatti e la cache.

frontend:
  phases:
    preBuild:
      commands:
        - echo "Installo 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 "Installo le dipendenze"
        - flutter pub get
        - echo "Genero la connessione al backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Costruisco l'app Flutter web senza supporto WASM"
        - flutter build web

Vedi l’esempio completo dello script di compilazione e deploy di seguito.

11. Clicca Salva, vai alla pagina del tuo deployment e clicca Redeploy this version. Oppure fai un commit e spingi alcuni cambiamenti al tuo branch.

12. Aspetta che finisca il rebuild e il redeploy e naviga alla tua app.

Ambienti di staging e produzione

Non hai bisogno di configurazioni speciali o variabili di ambiente aggiuntive per Prod, Staging e altri ambienti per se stessi. Il deployment Amplify fornisce già le variabili di ambiente $AWS_BRANCH -e $AWS_APP_ID. Quindi il nostro script quando deploya un branch diverso deployerà il backend in un diverso ambiente, e connetterà il frontend a questo ambiente. Basta che crei un nuovo deployment del tuo app e selezioni un branch diverso. Questo è tutto/

Vedi la descrizione dettagliata di seguito.

Quando compili il backend vedi il frammento

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

Questo genera il file amplify_outputs.json, necessario per il frontend react:

[INFO]: File written: amplify_outputs.json

ma per il frontend flutter abbiamo bisogno di amplify_outputs.dart.

Il documento originale non dice molto sul frontend flutter, ma un punto importante è presente:

Genera la configurazione per un ambiente di branch eseguendo:

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

Questo script genera il codice di connessione al backend (file lib/amplify_outputs.dart) per il frontend Flutter da utilizzare. E poiché specifichi i parametri --app-id <your-amplify-app-id> e --branch <your-git-branch-name> - il backend sarà diverso per ogni branch deployato. Questo file non dovrebbe essere incluso nel repository git. Verifica che il .gitignore nel progetto app contenga

# amplify
node_modules
.amplify
amplify_outputs*
amplifyconfiguration*

Se spingi lib/amplify_outputs.dart in git e non fai npx ampx generate outputs... - il frontend deployato cercherà di connettersi al sandbox dello sviluppatore, non al backend corretto di staging o produzione.

Lo script reale per la configurazione del build su amplify hosting dovrebbe essere:

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

Esempio di Amplify.yaml

Trovato da qualche parte su reddit, lasciamolo qui.

Esempio completo di Amplify.yaml che costruisce e deploya un’app Flutter web su 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 "Installo 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 "Installo le dipendenze"
        - flutter pub get
        - echo "Genero la connessione al backend"
        - npx ampx generate outputs --format dart --out-dir lib --branch $AWS_BRANCH --app-id $AWS_APP_ID
    build:
      commands:
        - echo "Costruisco l'app Flutter web senza supporto WASM"
        - flutter build web
  artifacts:
    baseDirectory: build/web
    files:
      - '**/*'
  cache:
    paths:
      - flutter/.pub-cache

Link utili

• Risolvere gli errori Flutter su AWS Amplify: [WARNING] fatal Not a valid object name origin/master
• Progetto Flutter con backend AWS Amplify
• Installare Flutter
• Scheda di riferimento Flutter (Dart)
• Documentazione Amplify per Flutter su .aws
• Installare Node.js
• Dockerizzare un’app Flutter Web con build Dockerizzata e Nginx