Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
AWS Builders
Online Series
쉽게 확장 가능한
서버리스 웹 어플리케이션 만들기
황윤상, AWS 솔루션즈 아키텍트
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
이런 거 금방 만들죠?
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
이런 거 금방 만들죠?
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
이런 거 금방 만들죠?
최대한 쉽고 간단하게 만들어 봅시다.
묻고 서버리스로 가!
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
관리할 서버가 없음 요청에 맞게 스케일링
사용한 만큼만 지불 가용성 및 장애 복구 내장...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
InternetMobile &
web apps
기본적인 서버리스 API 스택
AWS
S...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify: 빠른 개발과 지속적인 기능 향상
AWS를 사용하여 웹 및 모바일...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
통합된 개발자 경험
개발자 도구
라이브러리, CLI 도구 체인, UI
컴포넌트가 포함된...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS Amplify CLI
$amplify init
$amplify add auth
...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync
GraphQL은 API를 위한 쿼리 언어
관리되는 GraphQL ...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
/posts /comments /authors
REST API
posts comment...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Queries MutationsTypes
Subscriptions
GraphQL sch...
© 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved.
데이터를 읽는 쿼리
query GetPost {
getPost(id: ”1”) {
id...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync 데이터 소스
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS AppSync 해석기
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify의 GraphQL 변환
확장 가능한 데이터 기반 애플리케이션을 신속하게 구...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify와 AppSync의 사용 예
$ amplify add api
$ ampli...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Amplify와 AppSync를 통해 구성된 리소스들
AWS
Customer Accou...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
데모 아키텍처 AWS Cloud
AWS
Amplify
CLI
개발자
AWS AppSyn...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Demo 1 – Cloud9과 Amplify로 App 만들기
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Demo 2 – AppSync로 비즈니스 로직 업데이트하기
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
Demo 3 – Amplify로 프론트엔드 앱 구성 및 배포
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
AWS 온라인 교육
추천 교육 과정
• AWS Cloud Practitioner Ess...
© 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved.
aws-korea-marketing@amazon.com
twitter.com/AWSKo...
Upcoming SlideShare
Loading in …5
×

[AWS Builders 온라인 시리즈] 쉽게 확장 가능한 서버리스 웹 어플리케이션 만들기 - 황윤상, AWS 솔루션즈 아키텍트

157 views

Published on

발표자료 다시보기: https://youtu.be/yqcSVTU890g

AWS의 서비스를 활용하면 쉽고 빠르게 서버리스 웹 어플리케이션을 만들 수 있습니다. 이 세션에서는 GraphQL API를 사용하는 서버리스 웹 어플리케이션을 만드는 방법을 설명합니다. 먼저, AWS Amplify Javascript SDK와 커맨드라인 도구를 이용하여 React를 이용한 서버리스 웹 어플리케이션을 만드는 방법을 알아봅니다. 그리고 AWS AppSync를 이용하여 안전하고 확장 가능한 GraphQL 엔드포인트를 구성하고, 서버리스 NoSQL 데이터 저장소인 DynamoDB를 이용하여 확장이 쉽고 유연한 웹 어플리케이션 벡엔드을 만드는 방법을 확인해 봅니다.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

[AWS Builders 온라인 시리즈] 쉽게 확장 가능한 서버리스 웹 어플리케이션 만들기 - 황윤상, AWS 솔루션즈 아키텍트

  1. 1. AWS Builders Online Series 쉽게 확장 가능한 서버리스 웹 어플리케이션 만들기 황윤상, AWS 솔루션즈 아키텍트
  2. 2. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. 이런 거 금방 만들죠?
  3. 3. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. 이런 거 금방 만들죠?
  4. 4. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. 이런 거 금방 만들죠? 최대한 쉽고 간단하게 만들어 봅시다. 묻고 서버리스로 가!
  5. 5. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. 관리할 서버가 없음 요청에 맞게 스케일링 사용한 만큼만 지불 가용성 및 장애 복구 내장 서버리스?
  6. 6. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. InternetMobile & web apps 기본적인 서버리스 API 스택 AWS Serverless business logic Serverless APIs Databases & data stores Fail over Load balancers Web/application servers Message buses Workers
  7. 7. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify: 빠른 개발과 지속적인 기능 향상 AWS를 사용하여 웹 및 모바일 앱을 위한 통합된 개발자 경험을 제공하는 프레임워크 • API, 인증, 저장소, 분석을 포함하는 다양한 기능을 제공 • React, Angular, Ionic, React Native, iOS, Android를 지원하는 First-class • 모든 앱 개발자가 직면하는 문제의 솔루션을 제공 배포 및 협업을 지원하는 CLI • 전체 애플리케이션 백엔드를 몇 번의 키 입력으로 배포 • 다중 사용자 팀 협업을 위한 다중 환경 지원
  8. 8. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. 통합된 개발자 경험 개발자 도구 라이브러리, CLI 도구 체인, UI 컴포넌트가 포함된 오픈 소스 Amplify 프레임워크 클라우드 서비스
  9. 9. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS Amplify CLI $amplify init $amplify add auth $amplify add storage $amplify add api $amplify add function $amplify add analytics $amplify push Amplify 프로젝트 초기화 Amazon Cognito User Pool 추가 Amazon S3 버킷 생성 및 보안 설정 AWS AppSync API 추가 AWS Lambda 함수 추가 Amazon Pinpoint를 통한 분석 AWS CloudFormation을 통한 배포
  10. 10. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync GraphQL은 API를 위한 쿼리 언어 관리되는 GraphQL 게이트웨이 GraphQL 스키마 정의 언어(SDL)를 사용하여 API의 모양을 정의 다른 AWS 리소스를 참조하는 데이터 소스 첨부 데이터 소스에서 데이터를 가져와 필드에 첨부하는 해석기(Resolver) 작성 실시간 데이터 브로커 곧바로 모든 변형(Mutation)을 구독 WebSocket MQTT를 통한 안정적인 메시지 전달
  11. 11. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. /posts /comments /authors REST API posts comments authors GraphQL API GraphQL?
  12. 12. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Queries MutationsTypes Subscriptions GraphQL schema and operations API를 위한 쿼리 언어! type User { id: ID! username: String! firstName: String lastName: String daysActive: Int }
  13. 13. © 2019, Amazon Web Services, Inc. or its affiliates. All rights reserved. 데이터를 읽는 쿼리 query GetPost { getPost(id: ”1”) { id title } } mutation CreatePost { createPost(title: “Summit”) { id title } } subscription OnCreatePost { onCreatePost { id title } } 데이터를 작성하는 변형 API를 위한 쿼리 언어! 실시간으로 데이터를 푸시하는 구독
  14. 14. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync 데이터 소스
  15. 15. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS AppSync 해석기
  16. 16. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify의 GraphQL 변환 확장 가능한 데이터 기반 애플리케이션을 신속하게 구축 GraphQL SDL을 사용하여 선언적으로 앱의 데이터 모델을 정의하고 완전한 설명형 AWS CloudFormation 스택으로 변환 GraphQL 지시어(directive)로 구동 - @model, @auth, @connection, @versioned, @searchable
  17. 17. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify와 AppSync의 사용 예 $ amplify add api $ amplify push type Post @model { id: ID! title: String! }
  18. 18. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Amplify와 AppSync를 통해 구성된 리소스들 AWS Customer Account CandidateTable type Mutation { castVote(...): Candidate createCandidate(...): Candidate updateCandidate(...): Candidate deleteCandidate(...): Candidate } type Query { getCandidate(...): Candidate listCandidates(...): ModelCandidateConnection } type Subscription { onCastVote: Candidate @aws_subscribe(...) onCreateCandidate: Candidate @aws_subscribe(...) onUpdateCandidate: Candidate @aws_subscribe(...) Schema Resolvers DataSources AWS AppSync castVote createCandidate updateCandidate deleteCandidate getCandidate listCandidates Mutation Query CandidateTable DataSource CandidateTable ARN IAM Role ARN
  19. 19. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. 데모 아키텍처 AWS Cloud AWS Amplify CLI 개발자 AWS AppSync Amazon Simple Storage Service (S3) Amazon DynamoDB AWS Tools & Amplify SDKs AWS Cloud9
  20. 20. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo 1 – Cloud9과 Amplify로 App 만들기
  21. 21. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo 2 – AppSync로 비즈니스 로직 업데이트하기
  22. 22. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. Demo 3 – Amplify로 프론트엔드 앱 구성 및 배포
  23. 23. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. AWS 온라인 교육 추천 교육 과정 • AWS Cloud Practitioner Essentials (Second Edition) (Korean) AWS 클라우드의 기초를 배우고, 기본 자격증인 AWS Certified Cloud Practitioner 시험을 준비하세요. • Amazon DynamoDB for Serverless Architectures 이 과정은 Amazon DynamoDB가 무엇이고 서버리스 아키텍쳐를 구축하는 데 어떻게 활용되는지 소개합니다. • AWS Security Fundamentals (Korean) 이 과정은 기초적인 클라우드 컴퓨팅을 비롯해 AWS 액세스 제어 및 관리, 거버넌스, 로깅 및 암호화 방법 등 AWS의 보안 개념을 소개합니다. • Getting Started with Amazon Simple Storage Service (Amazon S3) 이 과정은 S3의 일반적인 사용 사례를 통해 어떻게 S3가 애플리케이션에 객체 스토리지를 제공하는지 소개하며, 언제 S3를 활용해야 하는지 알려 드립니다. 자신의 속도에 맞춰 학습하세요. 무료 AWS 디지털 교육을 통해 편한 시간에 원하는 장소에서 최신 클라우드 기술을 학습할 수 있습니다.
  24. 24. © 2020, Amazon Web Services, Inc. or its affiliates. All rights reserved. aws-korea-marketing@amazon.com twitter.com/AWSKorea facebook.com/amazonwebservices.ko youtube.com/user/AWSKorea slideshare.net/awskorea twitch.tv/aws AWS Builders 온라인 시리즈에 참석해주셔서 대단히 감사합니다. 저희가 준비한 내용, 어떻게 보셨나요? 더 나은 세미나를 위하여 설문을 꼭 작성해 주시기 바랍니다.

×