Flutter auf AWS Amplify

Ein Schnellstart – wie man ein Flutter Fullstack Projekt auf AWS Amplify -Platform erstellt.

Wann

Amplify ist eine sehr nützliche Plattform für das Hosting von Fullstack-Anwendungen.

Unter anderem howtos Hier ist ein Schnellstart, wie man ein neues Flutter-Projekt erstellt, das sich gut mit AWS Amplify integrieren lässt.

Installieren

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgenden Tools installiert haben:

• Node.js v18.17 oder höher - (Node.js mit NVM installieren)
• npm v9 oder höher
• git v2.14.1 oder höher (Einige schöne Tools für Linux installieren)
• Sie werden auch ein AWS-Konto erstellen müssen, wenn Sie noch keines haben. AWS Amplify ist Teil der AWS Free Tier.
• Eine stabile Version von Flutter - (Flutter installieren)
• Konfigurieren Sie Ihr AWS-Konto, um es mit Amplify-Anweisungen zu verwenden. (siehe unten)

Wenn Sie ein IAM-Profil haben, weisen Sie der IAM-Nutzung die verwaltete Richtlinie AmplifyBackendDeployFullAccess zu. Andernfalls – siehe unten konfigurieren...

Für die aktualisierten Informationen siehe https://docs.amplify.aws/flutter/start/quickstart/

Konfigurieren Sie Ihr AWS-Konto, um es mit Amplify-Anweisungen zu verwenden

https://docs.amplify.aws/flutter/start/account-setup/

1. Erstellen Sie einen Benutzer mit Amplify-Berechtigungen

Melden Sie sich beim AWS-Konsolen an, um auf die IAM Identity Center-Seite zuzugreifen und Enable zu wählen.

Ein Dialogfenster wird geöffnet und fragt Sie, wie Sie IAM Identity Center in Ihrer AWS-Umgebung konfigurieren möchten.

2. Wählen Sie Enable mit AWS Organizations und wählen Sie Weiter.

Als nächstes automatisieren wir eine Reihe von Schritten, die die Vorgänge simulieren, die bei der Erstellung eines Benutzers im IAM Identity Center-Console durchgeführt werden.

3. Um zu beginnen, öffnen Sie CloudShell, der sich am Fuß der Konsole befindet.

4. Fügen Sie den folgenden Befehl in das CloudShell-Terminal ein und geben Sie eine E-Mail-Adresse ein, die Sie mit diesem AWS-Konto verknüpfen möchten:

read -p "Enter email address: " user_email # enter

Enter email address: <your-email-address>

5. Führen Sie nun den folgenden Befehl aus

response=$(aws sso-admin list-instances)
ssoId=$(echo $response | jq '.Instances[0].IdentityStoreId' -r)
ssoArn=$(echo $response | jq '.Instances[0].InstanceArn' -r)
email_json=$(jq -n --arg email "$user_email" '{"Type":"Work","Value":$email}')
response=$(aws identitystore create-user --identity-store-id $ssoId --user-name amplify-admin --display-name 'Amplify Admin' --name Formatted=string,FamilyName=Admin,GivenName=Amplify --emails "$email_json")
userId=$(echo $response | jq '.UserId' -r)
response=$(aws sso-admin create-permission-set --name amplify-policy --instance-arn=$ssoArn --session-duration PT12H)
permissionSetArn=$(echo $response | jq '.PermissionSet.PermissionSetArn' -r)
aws sso-admin attach-managed-policy-to-permission-set --instance-arn $ssoArn --permission-set-arn $permissionSetArn --managed-policy-arn arn:aws:iam::aws:policy/service-role/AmplifyBackendDeployFullAccess
accountId=$(aws sts get-caller-identity | jq '.Account' -r)
aws sso-admin create-account-assignment --instance-arn $ssoArn --target-id $accountId --target-type AWS_ACCOUNT --permission-set-arn $permissionSetArn --principal-type USER --principal-id $userId

6. Um zu überprüfen, ob dies funktioniert hat, führen Sie den folgenden Befehl in CloudShell aus. Wenn

printf "\n\nStart session url: https://$ssoId.awsapps.com/start\nRegion: $AWS_REGION\nUsername: amplify-admin\n\n"

Sie sollten sehen:

Start session url: https://d-XXXXXXXXXX.awsapps.com/start
Region: us-east-1
Username: amplify-admin

Erstellen Sie jetzt ein Passwort für den Benutzer, den Sie für den nächsten Schritt benötigen.

7. In der IdC-Konsole navigieren Sie zu Benutzer > amplify_admin > Passwort zurücksetzen > Senden Sie eine E-Mail an den Benutzer mit Anweisungen zum Zurücksetzen des Passworts.

8. Prüfen Sie Ihre E-Mail (stellen Sie sicher, dass Sie auch Ihren Spam-Ordner prüfen). Klicken Sie auf den Link zum Zurücksetzen des Passworts und wählen Sie ein Passwort Ihrer Wahl. Beim Anmelden stellen Sie sicher, dass Sie amplify-admin als Benutzername verwenden.

9. Jetzt erstellen Sie ein AWS-Profil, das mit dem Benutzer verknüpft ist, den Sie gerade auf Ihrem lokalen Rechner erstellt haben. Es gibt mehrere Optionen, um die IAM Identity Center-Benutzeranmeldeinformationen zu erhalten, aber wir verwenden den AWS CLI-Konfigurations-Assistenten.

10. AWS CLI installieren

11. Öffnen Sie Ihr Terminal, Sie sind bereit, ein AWS-Profil zu konfigurieren, das den SSO-Benutzer verwendet. Verwenden Sie die Informationen aus CloudShell, um die folgenden Informationen zu füllen.

aws configure sso

| SSO session name (Recommended): amplify-admin
| SSO start URL: <START SESSION URL>
| SSO region: <your-region>
| SSO registration scopes [sso:account:access]: <leave blank>
| Trying to automatically open the SSO authorization page in your default browser.
| If the browser does not open or you wish to use a different device to authorize this request, open the following URL:
|
| https://device.sso.us-east-2.amazonaws.com/
|
| Then enter the code:
|
| SOME-CODE

12. Nachdem Sie diese Informationen bereitgestellt haben, wird der Browser automatisch geöffnet, um Sie zu bitten, sich mit dem Benutzernamen und Passwort anzumelden, das Sie gerade erstellt haben, und ein Multi-Faktor-Authentifizierungsgerät zu konfigurieren.

13. Jetzt kehren Sie zum Terminal zurück und geben Sie die folgenden Informationen ein:

Die einzige verfügbare AWS-Konto ist: <your-aws-account-id>
Verwenden der Konto-ID <your-aws-account-id>
Die einzige verfügbare Rolle ist: amplify-policy
Verwenden der Rolle-Name "amplify-policy"
CLI Standard-Client-Region [us-east-1]: <your-region>
CLI Standard-Ausgabeformat [None]:

Stellen Sie sicher, dass der Profilname auf default gesetzt wird. Alternativ, merken Sie sich den automatisch generierten Profilnamen; Sie benötigen diesen später.

Wenn Sie bereits ein Standardprofil konfiguriert haben – wird es Ihnen einen anderen Profilnamen anbieten

CLI Profilname [amplify-policy-<your-aws-account-id>]: default
Um dieses Profil zu verwenden, geben Sie den Profilnamen mit --profile an, wie folgt:

aws s3 ls --profile default

14. Wenn Sie ~/.aws/config prüfen, sollten Sie jetzt das SSO-Profil sehen:

nano ~/.aws/config

[profile default]
sso_session = amplify-admin
sso_account_id = <your-aws-account-id>
sso_role_name = AdministratorAccess
region = <your-region>
[sso-session amplify-admin]
sso_start_url = https://xxxxxx.awsapps.com/start#
sso_region = <your-region>
sso_registration_scopes = sso:account:access

15. Initialisieren Sie Ihr AWS-Konto

Jetzt sind Sie bereit, dieses AWS-Profil mit AWS Amplify zu verwenden.

Öffnen Sie Ihr Amplify-Projekt und starten Sie den Sandbox-Modus.

Das ist der nächste Schritt!!! Ohne Projekt wird dies nicht funktionieren.

Wenn Sie mehrere lokale Profile haben oder Ihren Profilnamen anders als default benannt haben, können Sie mit –profile einen Profilnamen angeben.

npx ampx sandbox

oder

npx ampx sandbox --profile <profile-name>

Erstellen Sie ein Flutter Amplify-App

flutter create my_amplify_app
cd my_amplify_app

Erstellen Sie den Amplify-Backend

npm create amplify@latest -y

Wenn Sie diesen Befehl ausführen, werden Amplify-Backend-Dateien in Ihrem aktuellen Projekt mit folgenden Dateien erstellt:

├── amplify/
│   ├── auth/
│   │   └── resource.ts
│   ├── data/
│   │   └── resource.ts
│   ├── backend.ts
│   └── package.json
├── node_modules/
├── .gitignore
├── package-lock.json
├── package.json
└── tsconfig.json

die Ausgabe wird so aussehen:

Installing devDependencies:
 - @aws-amplify/backend
 - @aws-amplify/backend-cli
 - aws-cdk@^2
 - aws-cdk-lib@^2
 - constructs@^10.0.0
 - typescript@^5.0.0
 - tsx
 - esbuild

Installing dependencies:
 - aws-amplify

✔ DevDependencies installed
✔ Dependencies installed
✔ Template files created
Successfully created a new project!

Welcome to AWS Amplify!
 - Get started by running npx ampx sandbox.
 - Run npx ampx help for a list of available commands.

Amplify collects anonymous telemetry data about general usage of the CLI. Participation is optional, and you may opt-out by using npx ampx configure telemetry disable. To learn more about telemetry, visit https://docs.amplify.aws/react/reference/telemetry

Sie sehen? Sie können ausführen…

npx ampx configure telemetry disable

Jetzt konfigurieren Sie Amplify’s pro-Entwickler Cloud Sandbox

Um Ihr Backend zu deployen, verwenden Sie Amplify’s pro-Entwickler Cloud Sandbox. Diese Funktion bietet eine separate Backend-Umgebung für jeden Entwickler in einem Team, ideal für lokale Entwicklung und Tests. Um Ihre Anwendung mit einer Sandbox-Umgebung zu starten, können Sie den folgenden Befehl ausführen:

npx ampx sandbox --outputs-format dart --outputs-out-dir lib

oder

npx ampx sandbox --outputs-format dart --outputs-out-dir lib --profile <profile-name>

Hinzufügen der Authentifizierung

Die ursprüngliche Vorbereitung hat bereits ein vorab konfiguriertes Auth-Backend in der Datei amplify/auth/resource.ts definiert. Wir haben es so konfiguriert, dass es E-Mail und Passwort-Login unterstützt, aber Sie können es erweitern, um eine Vielzahl von Login-Mechanismen zu unterstützen, einschließlich Google, Amazon, Sign In With Apple und Facebook.

Der schnellste Weg, Ihre Login-Erfahrung in Betrieb zu nehmen, ist die Verwendung unseres Authenticator UI-Komponenten, die im Amplify UI-Repository verfügbar ist.

Um den Authenticator zu verwenden, müssen Sie die folgenden Abhängigkeiten zu Ihrem Projekt hinzufügen:

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # um Ihre Anwendung mit den Amplify-Ressourcen zu verbinden.
  amplify_auth_cognito: ^2.0.0  # um Ihre Anwendung mit den Amplify Cognito-Ressourcen zu verbinden.
  amplify_authenticator: ^2.0.0 # um die Amplify UI-Komponenten zu verwenden.

Nachdem Sie die Abhängigkeiten hinzugefügt haben, müssen Sie den folgenden Befehl ausführen, um die Abhängigkeiten zu installieren:

flutter pub get

Aktualisieren Sie Ihre main.dart-Datei, um die Amplify UI-Komponenten zu verwenden

main.dart:

import 'package:amplify_auth_cognito/amplify_auth_cognito.dart';
import 'package:amplify_authenticator/amplify_authenticator.dart';
import 'package:amplify_flutter/amplify_flutter.dart';
import 'package:flutter/material.dart';

import 'amplify_outputs.dart';

Future<void> main() async {
  try {
    WidgetsFlutterBinding.ensureInitialized();
    await _configureAmplify();
    runApp(const MyApp());
  } on AmplifyException catch (e) {
    runApp(Text("Error configuring Amplify: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('Successfully configured');
  } on Exception catch (e) {
    safePrint('Error configuring Amplify: $e');
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return Authenticator(
      child: MaterialApp(
        builder: Authenticator.builder(),
        home: const Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                SignOutButton(),
                Text('TODO Application'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Und jetzt schauen Sie sich diese Schönheit an, die Authentifizierungsseite ist hier:

und AWS Cognito übernimmt bereits die E-Mail-Verifikation

Nicht viel drin, aber dennoch:

Nützliche Links

• Flutter mit Backend auf AWS Amplify Hosting deployen
• Linux neu installieren
• Bash Cheat Sheet
• Node.js installieren
• Flutter installieren
• Flutter (Dart) Cheat Sheet
• Flutter Web App mit Dockerisierten Flutter-Build und Nginx dockerisieren