Flutter×Amplify의 환경 구축(2021년 7월 현재 최신판)
환경
Flutter 2.2.3
nodejs v12.14.0
AWS 계정 개설됨
Flutter PJ 작성
개요
AWS 공식 flutter 튜토리얼에 기본 따라 이번 환경 구축을 실시하고 있습니다.
htps : // 아 ws. 아마존. 이 m / jp / 갓찐 g-s r d / 납 ds - 온 / 부이 ld f ぅ는 r 아 p 아 mp ぃ fy / 모즈 ぇ와 ぉ /
2021년 7월의 현시점에서 바뀌고 있는 부분(본 기사의 순서②의 pubspec.yaml 설정 이후)이 조금씩 있었으므로 처음부터 기사에 남겨 보았습니다.
절차① Amplify 설치 및 초기화
Amplify CLI 및 Amplify-Flutter 개발자 미리보기 버전을 다운로드합니다.
npm install -g @aws-amplify/cli@flutter-preview
amplify를 설정합니다.
amplify configure
원하는 region 및 username을 선택합니다.
AWS IAM 사용자가 자동으로 열리므로 기본적으로 5단계로 이동하여 액세스 키와 비밀 키를 가져옵니다.
터미널로 돌아가서 가져온 키를 복사하고 Profile Name을 설정합니다 (이번에는 기본값으로 유지).
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: default
Amplify 프로젝트를 초기화합니다.
amplify init
초기화 설정은 기본적으로 기본적으로 진행됩니다. 이번에는 안드로이드 스튜디오를 vs code 대신 사용하기 때문에 거기만 변경했습니다.
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project awsfluttertutorial
The following configuration will be applied:
Project information
| Name: awsfluttertutorial
| Environment: dev
| Default editor: Visual Studio Code
| App type: flutter
| Configuration file location: ./lib/
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Android Studio
? Choose the type of app that you're building flutter
Please tell us about your project
? Where do you want to store your configuration file? ./lib/
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: d1yo7v88ujb4p7
\ Initializing project in the cloud...
CREATE_IN_PROGRESS amplify-awsfluttertutorial-dev-162814 AWS::CloudFormation::Stack Thu Jul 22 2021 16:28:17 GMT+0900 (GMT+09:00) User Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
\ Initializing project in the cloud...
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:23 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:23 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:24 GMT+0900 (GMT+09:00) Resource creation Initiated
- Initializing project in the cloud...
CREATE_COMPLETE AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:43 GMT+0900 (GMT+09:00)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:43 GMT+0900 (GMT+09:00)
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:46 GMT+0900 (GMT+09:00)
CREATE_COMPLETE amplify-awsfluttertutorial-dev-162814 AWS::CloudFormation::Stack Thu Jul 22 2021 16:28:48 GMT+0900 (GMT+09:00)
√ Successfully created initial AWS cloud resources for deployments.
√ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything
절차 ②Flutter에 Amplify를 도입한다
pubspec.yaml에 주입하고 flutter pub get을 실행합니다. AWS의 공식 튜토리얼에서는 amplify_core를 기술하게 되어 있지만, 2021년 7월 현재는 amplify_flutter가 아니면 후술하는 인스턴스를 생성할 수 없게 되어 있습니다.
pubspec.yamlamplify_flutter: '<1.0.0'
flutter pub get
State 클래스 내에서 amplify의 인스턴스를 생성합니다. (예 : Flutter의 새로운 PJ의 경우 main.dart의 _MyAppState 바로 아래가됩니다)
final _amplify = Amplify;
amplify 도입되었는지 테스트할 함수를 만듭니다.
void _configureAmplify() async {
try {
await _amplify.configure(amplifyconfig);
print('Successfully configured Amplify 🎉');
} catch (e) {
print('Could not configure Amplify ☠️');
}
}
initState 함수를 오버라이드(override) 해, 이전의 확인용 함수를 앱 기동시에 호출하도록 합니다.
@override
void initState() {
super.initState();
_configureAmplify();
_authService.showLogin();
}
앱을 실행하면 콘솔에 FlutterPJ에 amplify 배포가 성공했다는 메시지가 표시됩니다.
Successfully configured Amplify 🎉
Reference
이 문제에 관하여(Flutter×Amplify의 환경 구축(2021년 7월 현재 최신판)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/NoOne/items/d0e2eb59a9fd3391755f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
AWS 공식 flutter 튜토리얼에 기본 따라 이번 환경 구축을 실시하고 있습니다.
htps : // 아 ws. 아마존. 이 m / jp / 갓찐 g-s r d / 납 ds - 온 / 부이 ld f ぅ는 r 아 p 아 mp ぃ fy / 모즈 ぇ와 ぉ /
2021년 7월의 현시점에서 바뀌고 있는 부분(본 기사의 순서②의 pubspec.yaml 설정 이후)이 조금씩 있었으므로 처음부터 기사에 남겨 보았습니다.
절차① Amplify 설치 및 초기화
Amplify CLI 및 Amplify-Flutter 개발자 미리보기 버전을 다운로드합니다.
npm install -g @aws-amplify/cli@flutter-preview
amplify를 설정합니다.
amplify configure
원하는 region 및 username을 선택합니다.
AWS IAM 사용자가 자동으로 열리므로 기본적으로 5단계로 이동하여 액세스 키와 비밀 키를 가져옵니다.
터미널로 돌아가서 가져온 키를 복사하고 Profile Name을 설정합니다 (이번에는 기본값으로 유지).
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: default
Amplify 프로젝트를 초기화합니다.
amplify init
초기화 설정은 기본적으로 기본적으로 진행됩니다. 이번에는 안드로이드 스튜디오를 vs code 대신 사용하기 때문에 거기만 변경했습니다.
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project awsfluttertutorial
The following configuration will be applied:
Project information
| Name: awsfluttertutorial
| Environment: dev
| Default editor: Visual Studio Code
| App type: flutter
| Configuration file location: ./lib/
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Android Studio
? Choose the type of app that you're building flutter
Please tell us about your project
? Where do you want to store your configuration file? ./lib/
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: d1yo7v88ujb4p7
\ Initializing project in the cloud...
CREATE_IN_PROGRESS amplify-awsfluttertutorial-dev-162814 AWS::CloudFormation::Stack Thu Jul 22 2021 16:28:17 GMT+0900 (GMT+09:00) User Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
\ Initializing project in the cloud...
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:23 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:23 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:24 GMT+0900 (GMT+09:00) Resource creation Initiated
- Initializing project in the cloud...
CREATE_COMPLETE AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:43 GMT+0900 (GMT+09:00)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:43 GMT+0900 (GMT+09:00)
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:46 GMT+0900 (GMT+09:00)
CREATE_COMPLETE amplify-awsfluttertutorial-dev-162814 AWS::CloudFormation::Stack Thu Jul 22 2021 16:28:48 GMT+0900 (GMT+09:00)
√ Successfully created initial AWS cloud resources for deployments.
√ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything
절차 ②Flutter에 Amplify를 도입한다
pubspec.yaml에 주입하고 flutter pub get을 실행합니다. AWS의 공식 튜토리얼에서는 amplify_core를 기술하게 되어 있지만, 2021년 7월 현재는 amplify_flutter가 아니면 후술하는 인스턴스를 생성할 수 없게 되어 있습니다.
pubspec.yamlamplify_flutter: '<1.0.0'
flutter pub get
State 클래스 내에서 amplify의 인스턴스를 생성합니다. (예 : Flutter의 새로운 PJ의 경우 main.dart의 _MyAppState 바로 아래가됩니다)
final _amplify = Amplify;
amplify 도입되었는지 테스트할 함수를 만듭니다.
void _configureAmplify() async {
try {
await _amplify.configure(amplifyconfig);
print('Successfully configured Amplify 🎉');
} catch (e) {
print('Could not configure Amplify ☠️');
}
}
initState 함수를 오버라이드(override) 해, 이전의 확인용 함수를 앱 기동시에 호출하도록 합니다.
@override
void initState() {
super.initState();
_configureAmplify();
_authService.showLogin();
}
앱을 실행하면 콘솔에 FlutterPJ에 amplify 배포가 성공했다는 메시지가 표시됩니다.
Successfully configured Amplify 🎉
Reference
이 문제에 관하여(Flutter×Amplify의 환경 구축(2021년 7월 현재 최신판)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/NoOne/items/d0e2eb59a9fd3391755f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
npm install -g @aws-amplify/cli@flutter-preview
amplify configure
Enter the access key of the newly created user:
? accessKeyId: ********************
? secretAccessKey: ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name: default
amplify init
Note: It is recommended to run this command from the root of your app directory
? Enter a name for the project awsfluttertutorial
The following configuration will be applied:
Project information
| Name: awsfluttertutorial
| Environment: dev
| Default editor: Visual Studio Code
| App type: flutter
| Configuration file location: ./lib/
? Initialize the project with the above configuration? No
? Enter a name for the environment dev
? Choose your default editor: Android Studio
? Choose the type of app that you're building flutter
Please tell us about your project
? Where do you want to store your configuration file? ./lib/
Using default provider awscloudformation
? Select the authentication method you want to use: AWS profile
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html
? Please choose the profile you want to use default
Adding backend environment dev to AWS Amplify Console app: d1yo7v88ujb4p7
\ Initializing project in the cloud...
CREATE_IN_PROGRESS amplify-awsfluttertutorial-dev-162814 AWS::CloudFormation::Stack Thu Jul 22 2021 16:28:17 GMT+0900 (GMT+09:00) User Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:22 GMT+0900 (GMT+09:00)
\ Initializing project in the cloud...
CREATE_IN_PROGRESS AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:23 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:23 GMT+0900 (GMT+09:00) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:24 GMT+0900 (GMT+09:00) Resource creation Initiated
- Initializing project in the cloud...
CREATE_COMPLETE AuthRole AWS::IAM::Role Thu Jul 22 2021 16:28:43 GMT+0900 (GMT+09:00)
CREATE_COMPLETE UnauthRole AWS::IAM::Role Thu Jul 22 2021 16:28:43 GMT+0900 (GMT+09:00)
CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Thu Jul 22 2021 16:28:46 GMT+0900 (GMT+09:00)
CREATE_COMPLETE amplify-awsfluttertutorial-dev-162814 AWS::CloudFormation::Stack Thu Jul 22 2021 16:28:48 GMT+0900 (GMT+09:00)
√ Successfully created initial AWS cloud resources for deployments.
√ Initialized provider successfully.
Initialized your environment successfully.
Your project has been successfully initialized and connected to the cloud!
Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud
Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything
pubspec.yaml에 주입하고 flutter pub get을 실행합니다. AWS의 공식 튜토리얼에서는 amplify_core를 기술하게 되어 있지만, 2021년 7월 현재는 amplify_flutter가 아니면 후술하는 인스턴스를 생성할 수 없게 되어 있습니다.
pubspec.yaml
amplify_flutter: '<1.0.0'
flutter pub get
State 클래스 내에서 amplify의 인스턴스를 생성합니다. (예 : Flutter의 새로운 PJ의 경우 main.dart의 _MyAppState 바로 아래가됩니다)
final _amplify = Amplify;
amplify 도입되었는지 테스트할 함수를 만듭니다.
void _configureAmplify() async {
try {
await _amplify.configure(amplifyconfig);
print('Successfully configured Amplify 🎉');
} catch (e) {
print('Could not configure Amplify ☠️');
}
}
initState 함수를 오버라이드(override) 해, 이전의 확인용 함수를 앱 기동시에 호출하도록 합니다.
@override
void initState() {
super.initState();
_configureAmplify();
_authService.showLogin();
}
앱을 실행하면 콘솔에 FlutterPJ에 amplify 배포가 성공했다는 메시지가 표시됩니다.
Successfully configured Amplify 🎉
Reference
이 문제에 관하여(Flutter×Amplify의 환경 구축(2021년 7월 현재 최신판)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NoOne/items/d0e2eb59a9fd3391755f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
