AWS 시작하기
Flutter 애플리케이션 구축
AWS Amplify를 사용하여 간단한 Flutter 애플리케이션 생성
모듈 2: Amplify 초기화
이 모듈에서는 Amplify CLI를 설치하고 구성합니다.
소개
이제 Photo Gallery Flutter 앱을 구현했으므로, Amplify 프로젝트를 초기화할 수 있습니다.
이 시점에는 Amplify CLI의 Amplify-Flutter 개발자 프리뷰 버전이 시스템에 설치되어 있어야 합니다. 설치되고 나면 프로젝트의 루트 디렉터리에서 Amplify를 초기화하고, Amplify 종속 구성 요소를 프로젝트에 설치하고, 실행 시마다 Amplify가 제대로 구성되었는지 확인합니다.
배우게 될 내용
- 명령줄에서 새 Amplify 프로젝트 초기화
- 프로젝트의 종속 구성 요소로서 Amplify 추가
- 런타임 시 Amplify 라이브러리 초기화
주요 개념
Amplify CLI – Amplify CLI를 사용하면 터미널에서 직접 AWS 서비스를 생성, 관리, 제거할 수 있습니다.
Amplify 라이브러리 – Amplify 라이브러리는 웹 또는 모바일 애플리케이션에서 AWS 서비스와 상호 작용할 수 있도록 해줍니다.
완료 시간
10분
사용되는 서비스
구현
-
Amplify CLI 개발자 프리뷰 설치
AWS Amplify CLI를 사용하려면 Node.js가 설치되어 있어야 합니다. Node.js는 여기에서 받을 수 있습니다.
Amplify-Flutter 개발자 프리뷰 버전의 CLI를 다운로드하려면 다음을 실행하십시오.
npm install -g @aws-amplify/cli@flutter-preview
$ amplify --version을 실행하여 Flutter 프리뷰 버전의 CLI를 실행 중인지 확인합니다. 다음과 같은 메시지가 표시되어야 합니다.
photo_gallery git:(master) ✗ amplify --version Scanning for plugins... Plugin scan successful 4.26.1-flutter-preview.0
Amplify CLI를 아직 구성하지 않은 경우 다음을 실행합니다.
amplify configure
구성 프로세스가 안내됩니다. CLI를 구성하는 데 대한 자세한 내용은 여기를 참조하십시오.
-
Amplify 초기화
Amplify 프로젝트를 생성하려면 프로젝트의 루트 디렉터리에서 프로젝트를 초기화하고 구성해야 합니다.
프로젝트의 루트로 이동합니다.
cd path/to/your/project
$ ls -al을 실행하여 올바른 디렉터리에 있는지 확인합니다. 다음과 같은 출력이 표시되어야 합니다.
➜ photo_gallery git:(master) ✗ ls -al total 80 drwxr-xr-x 18 kiloloco staff 576 Oct 19 18:07 . drwxr-xr-x 3 kiloloco staff 96 Oct 18 21:10 .. drwxr-xr-x 4 kiloloco staff 128 Oct 18 22:15 .dart_tool -rw-r--r-- 1 kiloloco staff 536 Oct 19 19:43 .flutter-plugins -rw-r--r-- 1 kiloloco staff 1422 Oct 19 19:43 .flutter-plugins-dependencies -rw-r--r-- 1 kiloloco staff 621 Oct 18 21:10 .gitignore drwxr-xr-x 6 kiloloco staff 192 Oct 18 21:10 .idea -rw-r--r-- 1 kiloloco staff 305 Oct 18 21:10 .metadata -rw-r--r-- 1 kiloloco staff 3648 Oct 19 18:07 .packages -rw-r--r-- 1 kiloloco staff 543 Oct 18 21:10 README.md drwxr-xr-x 12 kiloloco staff 384 Oct 18 21:10 android drwxr-xr-x 5 kiloloco staff 160 Oct 18 22:20 build drwxr-xr-x 11 kiloloco staff 352 Oct 19 19:04 ios drwxr-xr-x 11 kiloloco staff 352 Oct 19 18:08 lib -rw-r--r-- 1 kiloloco staff 896 Oct 18 21:10 photo_gallery.iml -rw-r--r-- 1 kiloloco staff 6047 Oct 19 18:07 pubspec.lock -rw-r--r-- 1 kiloloco staff 2926 Oct 19 18:07 pubspec.yaml drwxr-xr-x 3 kiloloco staff 96 Oct 18 21:10 test
이제 Amplify 프로젝트를 초기화합니다.
amplify init
이제 프로젝트 구성 방법을 묻는 질문이 몇 개 제시됩니다. 각 질문에 대해 Enter 키를 누르면 질문의 기본 답이 제공되므로 출력은 다음과 비슷합니다.
➜ photo_gallery git:(master) ✗ amplify init Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project photogallery ? Enter a name for the environment dev ? Choose your default editor: Visual Studio Code ? Choose the type of app that you're building flutter Please tell us about your project ⚠️ Flutter project support in the Amplify CLI is in DEVELOPER PREVIEW. Only the following categories are supported: * Auth * Analytics * Storage ? Where do you want to store your configuration file? ./lib/ Using default provider awscloudformation For more information on AWS Profiles, see: https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html ? Do you want to use an AWS profile? Yes ? Please choose the profile you want to use default
CLI가 클라우드에서 프로젝트를 크래이팅하고 난 후 표시되는 출력은 다음과 같습니다.
✔ 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!
프로젝트의 루트 디렉터리에서 $ ls를 실행하면 amplify.json이라는 새 파일과 amplify 폴더가 프로젝트에 추가된 것을 확인할 수 있습니다. $ ls lib를 실행하면 amplifyconfiguration.dart라는 파일이 새로 추가된 것도 확인할 수 있습니다.
-
프로젝트에 종속성 추가
다음 단계로, 라이브러리와 인터페이스할 수 있도록 Aremplify를 종속 구성 요소로서 프로젝트에 설치합니다.
Visual Studio 코드로 돌아가 pubspec.yaml을 열고 다음 종속성을 추가합니다.
... # path: amplify_core: '<1.0.0' ... # dev_dependencies
파일을 저장하거나 터미널을 통해 앱의 루트 디렉터리에서 $ flutter pub get을 실행합니다.
프로세스가 완료되면 다음 출력이 표시됩니다.
exit code 0
iOS의 경우 Podfile(ios > Podfile)을 열고 플랫폼을 11.0 이상으로 업데이트합니다.
... # Uncomment this line to define a global platform for your project platform :ios, '11.0' ... # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
-
앱에 통합
Amplify Flutter Library를 사용하려면 범주를 사용하기 전에 먼저 Amplify를 구성해야 합니다.
main.dart를 열고 _MyAppState에 Amplify의 인스턴스를 추가합니다.
... // class _MyAppState extends State<MyApp> { final _amplify = Amplify(); ... // final _authService = AuthService();
이제 Amplify를 구성하는 함수를 생성합니다.
... // build closing } void _configureAmplify() async { try { await _amplify.configure(amplifyconfig); print('Successfully configured Amplify 🎉'); } catch (e) { print('Could not configure Amplify ☠️'); } } ... // _MyAppState closing }
이 함수는 생성된 /lib/amplifyconfiguration.dart 파일에서 제공되는 amplifyconfig를 전달하고, 사용해야 할 모든 플러그인을 사용하여 Amplify 객체 구성을 시도합니다. 다음 모듈에 플러그인을 추가하기 시작합니다.
이제 _MyAppState의 initState()에 있는 _configureAmplify()를 호출합니다.
... // super.initState(); _configureAmplify(); ... // _authService.showLogin();
이제 앱을 실행하면 로그에 다음 메시지가 인쇄됩니다.
flutter: Successfully configured Amplify 🎉