[2023 AWS re:Invent] AWS Amplify: 웹 및 모바일 앱 개발 및 제공 확장

by
세션 유형

Break out

세션명

AWS Amplify: Scale your web and mobile app development and delivery (FWM205) (웹 및 모바일 앱 개발 및 제공 확장)

강연자
  • Abdallah Shaban
  • Mohit Srivastava
핵심내용 요약
  • AWS Amplify는 Frontend web, mobile 개발자에게 확장 가능하고 유지 관리가 유용한 Application 구축 도구를 제공
  • Amplify의 기능과 기존 배포 도구 및 데이터베이스와 통합하는 방법 소개
  • 시나리오를 통해 안전하고 확장 가능한 Application 구축, 배포 및 호스팅 할 수 있게 해주는 새로운 엔터프라이즈 기능 소개
키워드
  1. AWS Amplify을 활용한 웹 및 모바일 앱 개발
  2. 앱 개발의 가속화 및 배포
세션 요약자

베스핀글로벌 MSP 본부 DevOps실 강현욱 님

App development는 full-stack development

Frontend 팀은 Backend에서 다양한 작업을 모두 처리할 필요 없이 하나의 인터페이스 세트로만 작업을 수행하면 된다.

AWS Amplify 란?

앱 개발에 필요한 UI, Backend구축, Application 호스팅, 규모확장
즉, AWS Amplify는 Frontend와 Backend 개발을 더 쉽게 통합할 수 있도록 해준다.

앱 백엔드 구축을 위한 AWS Amplify

  • Accelerate Development : 인프라가 아닌 애플리케이션 코드에 집중
  • Integrate : 기존 ID 및 데이터 리소스 사용
  • Extend without limits : CDK를 사용하여 AWS 서비스 추가
  • Ship with confidence : 모든 Git 푸시 수행 > 전역적으로 프런트엔드 및 백엔드 배포 (다중 교차지역도 포함)

앱 개발 잠금 해제

  • Code first : 
    1. CDK L3 구성 또는 파일 기반 규칙을 사용하여 백엔드를 정의
    2. TypeScript 또는 자연어(Amazon CodeWhisperer) 사용
  • Integration : 
    1. 기존 ID 공급자 및 MySQL/PostgreSQL 사용
    2. 비즈니스 로직, 실시간 액세스, 액세스 제어 추가
  • Extensibility : 
    1. Amplify CDK를 다른 CDK L2 및 L1과 결합
  • Amplify는 App Backend 개발기능을 제공하고, Amplify 웹 호스팅 솔루션도 제공

Amplify 기능을 활용한 App 구축

  • L3 기반 CDK 구성
  • Amazon Cognito :
    1. 사용자 풀에 사용자의 정보를 저장
    2. Octa(SSO)를 사용하는 경우 통합 가능
    3. JWT 토큰은 Amazone Cognito가 관리
  • AWS AppSync : 
    1. 관리형 Serverless 그래픽 서비스

CDK L3 구성을 활용한 구축

  • End user를 위한 등록/인증 기능구현
  • Employees를 위한 OIDC/SAML과 Admin 관리 기능구현

OIDC 구현을 위한 설정

  • 위의 Typescript 예제와 같이 10줄의 코드작성으로 OIDC provider 설정이 가능
  • CDK를 실행하고 배포하면 Cognito에 의해 필요한 리소스가 배포된다

각기 다른 Data source를 활용하여 Application을 구축하는 방법

  • 첫번째 단계
    1. GraphQL을 활용하여 Schema API를 작성

  • 2a 단계
    1. 환자 및 청구 스키마를 생성 (GraphQL을 활용)

  • 2b 단계
    1.  2a 단계의 명령을 통해 자동으로 생성
    2.  billing 유형은 DB의 청구 테이블을 참조
    3.  청구 데이터의 소유자가 읽을 수 있도록 허용 필요
    4.  환자에게도 이름, 성, 주소 필드가 존재
    5.  DB 연결 매개변수를 지정할 수 있음

  • 3 단계
    1.  Source API A : Appointment 및 의료 직원 데이터 관리
    2.  Source API B : 환자 및 청구 데이터 관리
    3.  A, B 모두 AppSync GraphQL을 제공
    4.  이렇게 A, B 독립적으로 동작하는 API를 하나의 API로 병합/결합 하여 활용이 가능
    5.  즉, 다양한 Backend와 Sources 테이터들을 단일 Endpoint로 갖고오기 위해 Appsync를 활용

Appsync를 활용하여 Amazon Bedrock과 연동 방법

  • 위와 같이 단 10줄의 코드로 Amazon Bedrock과 Appsync가 가능
    1.  Amazon Bedrock을 http 소스로 추가
    2.  기본 모델을 호출 할 수 있는 권한을 제공

Demo 시연

  • CDK AWS Amplify를 활용한 Application을 시연
  • 시나리오
    1.  Appointment를 요청
    2.  Appointment 기록을 확인
    3.  다른 사용자가 만든 Appointment를 관리

  • 환자 계정으로 로그인

  • 로그인 완료
  • 두개의 Appointment를 확인
  • 각각의 Appointment에 대한 청구 금액을 확인
  • 핵심 사항 : 각기 별도의 4개의 Data source에서 데이터 통합을 통해 병합된 API로 호출하여 획득한 정보
    1. 공급자 Data source
    2. 사용자 Data source
    3. 청구 Data source
    4. Appointment Data source

  • 신규 Appointment 등록 > 목록에서 확인

  • 공급자 (Provider)으로 로그인
  • 공급자 로그인은 AWS Amplify를 사용하면 브라우저에 OCTA 세션(OIDC Provider를 활용)이 있다는 것을 인지하고 자동으로 로그인이 가능함.
  • 공급자로 로그인하면 전체 Appointment 목록을 확인할 수 있음
CI/CD 구성, 시연

  • 필드를 추가하면 Appsync를 통해 DynamoDB에 자동으로 필드가 추가 되는것을 확인할 수 있다.

Bespin’s Comment

  1. 다양한 Backend와 Sources 테이터들을 단일 Endpoint로 갖고 오기 위해 Appsync를 활용
  2. CDK를 통해 모든 AWS 서비스를 쉽게 확장하고 사용할 수 있음
  3. CI/CD구성을 위한 개발자 샌드박스를 활