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 🎉

결론

프로젝트의 루트 디렉터리에서 Amplify를 초기화했습니다. 다음 모듈에서는 코드 단 몇 줄로 전체 사용자 인증 흐름을 추가해보겠습니다.

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
닫기
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.
닫기

인증 추가