AWS Amplify 上の Flutter

AWS Amplifyプラットフォーム上でFlutterフルスタックプロジェクトを簡単に作成する方法のクイックスタート。

いつ

Amplifyは、フルスタックアプリケーションのホスティングに非常に役立つプラットフォームです。

他のハウツーに加えて、ここではAWS Amplifyと簡単に統合できる新しいFlutterプロジェクトを作成するためのクイックスタートを紹介します。

インストール

開始する前に、以下のものをインストールしていることを確認してください：

• Node.js v18.17以降 - (Node.jsをNVMでインストール)
• npm v9以降
• git v2.14.1以降 (Linuxにいくつかの便利なツールをインストール)
• AWSアカウントを作成していない場合は、AWS AmplifyはAWS無料トライアルの一部です。
• 穩定したバージョンのFlutter - (Flutterをインストール)
• Amplifyの指示に従ってAWSアカウントを構成してください。(以下を参照)

IAMプロファイルにAmplifyBackendDeployFullAccessマネージドポリシーをアタッチしている場合は、それ以外の場合は以下のconfigure...を参照してください。

最新の情報については、https://docs.amplify.aws/flutter/start/quickstart/ を参照してください。

Amplifyの指示に従ってAWSアカウントを構成する

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

1. Amplifyの権限を持つユーザーを作成

AWSコンソールにログインし、IAM Identity Centerページにアクセスして有効化を選択してください。

ダイアログが開き、「AWS環境でIAM Identity Centerを構成する方法を選択してください」というプロンプトが表示されます。

2. AWS Organizationsで有効化を選択し、続けるを選択してください。

次に、IAM Identity Centerコンソールでユーザーを作成する操作をシミュレートするいくつかの手順を自動化します。

3. はじめに、コンソールフッターにあるCloudShellを開いてください。

4. CloudShellのターミナルに以下のコマンドを貼り付け、このAWSアカウントに関連付けるメールアドレスを入力してください：

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

Enter email address: <your-email-address>

5. 今、以下のコマンドを実行してください

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. これで動作したことを確認するために、CloudShellで以下のコマンドを実行してください。もし

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

以下のように表示されるはずです：

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

今、次のステップで必要なユーザーのパスワードを作成してください。

7. IdCコンソールで、ユーザー > amplify_admin > パスワードをリセット > ユーザーにパスワードをリセットする手順を含むメールを送信してください。

8. メールを確認してください（スパムフォルダも確認してください）。リセットパスワードリンクをクリックし、お好みのパスワードを選択してください。ログインする際には、amplify-adminをユーザー名として使用してください。

9. 今、ローカルマシン上で作成したユーザーにリンクされたAWSプロファイルを設定してください。IAM Identity Centerユーザーの資格情報を取得する方法はいくつかありますが、今回はAWS CLI設定ウィザードを使用します。

10. AWS CLIをインストール

11. ターミナルを開き、SSOユーザーを使用するAWSプロファイルを構成する準備ができました。CloudShellから以下の情報を取得して、下記の情報を埋めてください。

aws configure sso

| SSOセッション名（推奨）: amplify-admin
| SSO開始URL: <START SESSION URL>
| SSOリージョン: <your-region>
| SSO登録スコープ [sso:account:access]: <空白のまま>
| ブラウザでSSO認可ページを自動的に開きます。
| ブラウザが開かない場合、または別のデバイスでこのリクエストを認可したい場合は、以下のURLを開いてください：
|
| https://device.sso.us-east-2.amazonaws.com/
|
| その後、コードを入力してください：
|
| SOME-CODE

12. この情報を提供した後、ブラウザが自動的に開き、先ほど作成したユーザー名とパスワードでログインするよう求められ、マルチファクター認証デバイスを設定するよう求められます。

13. 今、ターミナルに戻り、以下の情報を入力してください：

利用可能なAWSアカウントは次のとおりです: <your-aws-account-id>
アカウントID <your-aws-account-id>を使用しています
利用可能なロールは次のとおりです: amplify-policy
ロール名 "amplify-policy"を使用しています
CLIのデフォルトクライアントリージョン [us-east-1]: <your-region>
CLIのデフォルト出力形式 [None]:

プロファイル名をデフォルトに設定してください。または、自動生成されたプロファイル名を覚えておいてください。後で必要になります。

既にデフォルトプロファイルが設定されている場合、別のプロファイル名が提示されます。

CLIプロファイル名 [amplify-policy-<your-aws-account-id>]: default
このプロファイルを使用するには、--profileオプションでプロファイル名を指定してください。例:

aws s3 ls --profile default

14. ~/.aws/configを確認すると、SSOプロファイルが表示されるはずです：

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. AWSアカウントをブートストラップ

これで、AWS AmplifyとこのAWSプロファイルを使用する準備ができました。

Amplifyプロジェクトを開き、サンドボックスを開始してください。

次のステップです!!! プロジェクトがないと動作しません。

ローカルに複数のプロファイルがある場合、またはプロファイル名がデフォルト以外の場合は、–profileオプションでプロファイルを指定してください。

npx ampx sandbox

または

npx ampx sandbox --profile <profile-name>

Flutter Amplifyアプリを作成

flutter create my_amplify_app
cd my_amplify_app

Amplifyバックエンドを作成

npm create amplify@latest -y

このコマンドを実行すると、現在のプロジェクトに以下のファイルが追加され、Amplifyバックエンドファイルが作成されます：

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

出力は以下のようになります：

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

Dependenciesのインストール:
 - aws-amplify

✔ DevDependenciesがインストールされました
✔ Dependenciesがインストールされました
✔ テンプレートファイルが作成されました
新しいプロジェクトが正常に作成されました！

AWS Amplifyへようこそ！
 - 開始するには npx ampx sandbox を実行してください。
 - npx ampx help を実行して利用可能なコマンド一覧を確認してください。

AmplifyはCLIの使用に関する一般的な匿名テレメトリデータを収集します。参加は任意であり、npx ampx configure telemetry disable を使用してオプトアウトできます。テレメトリについて詳しくは https://docs.amplify.aws/react/reference/telemetry を参照してください。

ご覧の通り、以下を実行できます：

npx ampx configure telemetry disable

今、Amplifyの開発者向けクラウドサンドボックスを構成してください。

バックエンドをデプロイするには、Amplifyの開発者向けクラウドサンドボックスを使用してください。この機能は、チームの各開発者に個別のバックエンド環境を提供し、ローカル開発およびテストに最適です。サンドボックス環境でアプリケーションを実行するには、以下のコマンドを実行してください：

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

または

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

認証の追加

初期のスケルトンには、amplify/auth/resource.tsファイルに事前に構成された認証バックエンドが定義されています。 メールとパスワードでのログインをサポートするように構成されていますが、Google、Amazon、Sign In With Apple、Facebookなど、さまざまなログインメカニズムをサポートするように拡張することもできます。

ログイン体験をすぐに開始する最も簡単な方法は、Amplify UIライブラリに含まれるAuthenticator UIコンポーネントを使用することです。

Authenticatorを使用するには、プロジェクトに以下の依存関係を追加する必要があります：

pubspec.yaml:

dependencies:
  amplify_flutter: ^2.0.0       # アプリケーションをAmplifyリソースに接続するため
  amplify_auth_cognito: ^2.0.0  # アプリケーションをAmplify Cognitoリソースに接続するため
  amplify_authenticator: ^2.0.0 # Amplify UIコンポーネントを使用するため

依存関係を追加した後、以下のコマンドを実行して依存関係をインストールしてください：

flutter pub get

main.dartファイルを更新してAmplify UIコンポーネントを使用するようにしてください

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("Amplifyの構成エラー: ${e.message}"));
  }
}

Future<void> _configureAmplify() async {
  try {
    await Amplify.addPlugin(AmplifyAuthCognito());
    await Amplify.configure(amplifyConfig);
    safePrint('正常に構成されました');
  } on Exception catch (e) {
    safePrint('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アプリケーション'),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

そして、この美しい認証ページがここにあります：

AWS Cognitoはすでにメール認証を行っています。

中身はあまりありませんが、それでも：

有用なリンク

• FlutterとバックエンドをAWS Amplifyホスティングにデプロイ
• Linuxを再インストール
• Bashチートシート
• Node.jsをインストール
• Flutterをインストール
• Flutter (Dart) チートシート
• DockerでFlutter Webアプリを構築し、Docker化されたFlutterビルドとNginxを使用