AWS Amplify에서의 Flutter
AWS Amplify 및 Flutter 지원
AWS Amplify 플랫폼에서 Flutter 전면 스택 프로젝트를 생성하는 방법에 대한 빠른 시작 가이드입니다.
언제 사용하나요?
Amplify는 전면 스택 애플리케이션 호스팅에 매우 유용한 플랫폼입니다.
다른 튜토리얼과 함께, 여기서는 AWS Amplify와 잘 통합될 수 있는 새로운 Flutter 프로젝트를 빠르게 생성하는 방법을 소개합니다.
설치
시작하기 전에 다음을 설치하고 있는지 확인하세요:
- Node.js v18.17 이상 - (NVM을 사용하여 Node.js 설치)
- npm v9 이상
- git v2.14.1 이상 (Linux용 멋진 도구 설치)
- AWS 계정을 아직 생성하지 않았다면, AWS Amplify는 AWS Free Tier의 일부입니다.
- 안정적인 Flutter 버전 - (Flutter 설치)
- Amplify와 함께 사용하기 위해 AWS 계정을 구성하세요. (아래 참조)
IAM 프로필을 사용하는 경우, AmplifyBackendDeployFullAccess 관리 정책을 IAM 사용자에 연결하세요.
아니라면 아래의 configure... 참조하세요.
업데이트된 정보는 https://docs.amplify.aws/flutter/start/quickstart/에서 확인할 수 있습니다.
AWS 계정을 Amplify와 함께 사용하도록 구성
https://docs.amplify.aws/flutter/start/account-setup/
- Amplify 권한을 가진 사용자 생성
AWS 콘솔에 로그인하여 IAM Identity Center 페이지에 접속하고 Enable을 선택하세요.
다이얼로그가 열리면, “AWS 환경에서 IAM Identity Center를 구성하는 방법을 선택하십시오"라는 메시지가 나타납니다.
- AWS Organizations을 선택하고 Continue를 클릭하세요.
다음으로, IAM Identity Center 콘솔에서 사용자를 설정하는 작업을 자동화하는 여러 단계를 시뮬레이션합니다.
-
시작하려면 콘솔 하단에 있는 CloudShell을 열고 클릭하세요.
-
CloudShell 터미널에 다음 명령을 붙여넣고 이 AWS 계정과 연결하고 싶은 이메일 주소를 입력하세요:
read -p "Enter email address: " user_email # enter
Enter email address: <your-email-address>
- 다음 명령을 실행하세요
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
- 이 작업이 잘 작동했는지 확인하려면 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
이제 다음 단계에서 사용할 사용자에게 비밀번호를 생성하세요.
-
IdC 콘솔에서 Users > amplify_admin > Reset password > 사용자에게 비밀번호 재설정 지침이 포함된 이메일을 보내세요.
-
이메일을 확인하세요 (스팸 폴더도 확인하세요). 비밀번호 재설정 링크를 클릭하고 원하는 비밀번호를 선택하세요. 로그인 시 amplify-admin을 사용자 이름으로 입력하세요.
-
이제 로컬 머신에서 생성한 사용자와 연결된 AWS 프로필을 설정하세요. IAM Identity Center 사용자 자격 증명을 얻는 방법은 여러 가지가 있지만, 여기서는 AWS CLI 구성 마법사를 사용하겠습니다.
-
터미널을 열고 SSO 사용자와 함께 사용할 AWS 프로필을 구성할 준비가 되었습니다. CloudShell에서 얻은 정보를 아래에 입력하세요.
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>
| 자동으로 기본 브라우저에서 SSO 인증 페이지를 열려고 합니다.
| 브라우저가 열리지 않거나 다른 장치에서 이 요청을 인증하고 싶다면 다음 URL을 열고
|
| https://device.sso.us-east-2.amazonaws.com/
|
| 그런 다음 다음 코드를 입력하세요:
|
| SOME-CODE
-
이 정보를 제공한 후, 브라우저가 자동으로 열려서 방금 생성한 사용자 이름과 비밀번호로 로그인하고 다중 인증 장치를 설정하도록 요청합니다.
-
이제 터미널로 돌아가 다음 정보를 입력하세요:
사용 가능한 AWS 계정은 다음과 같습니다: <your-aws-account-id>
사용할 계정 ID는 <your-aws-account-id>
사용 가능한 역할은 다음과 같습니다: amplify-policy
사용할 역할 이름은 "amplify-policy"
CLI 기본 클라이언트 지역 [us-east-1]: <your-region>
CLI 기본 출력 형식 [None]:
프로필 이름을 default로 설정하세요. 또는 자동 생성된 프로필 이름을 기억하세요. 나중에 필요합니다.
기본 프로필이 이미 구성되어 있다면, 다른 프로필 이름을 제공할 수 있습니다.
CLI 프로필 이름 [amplify-policy-<your-aws-account-id>]: default
이 프로필을 사용하려면 --profile을 사용하여 프로필 이름을 지정하세요, 예:
aws s3 ls --profile default
- ~/.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
- AWS 계정 초기화
이제 AWS Amplify와 함께 이 AWS 프로필을 사용할 준비가 되었습니다.
Amplify 프로젝트를 열고 샌드박스를 시작하세요.
다음 단계입니다!!! 프로젝트가 없으면 작동하지 않습니다.
로컬에 여러 프로필이 있거나 프로필 이름이 default가 아닌 경우, –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
출력은 다음과 같을 것입니다:
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
보셨나요? 다음과 같이 실행할 수 있습니다…
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 파일에 미리 구성된 auth 백엔드가 포함되어 있습니다. 이것은 이메일 및 비밀번호 로그인을 지원하도록 구성되었지만, 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("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'),
],
),
),
),
),
);
}
}
이제 이 아름다운 인증 페이지를 확인해 보세요:
AWS Cognito는 이미 이메일 확인을 수행합니다.
내부에는 별로 없지만, 여전히:
