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 기반 웹애플리케이션 만들기::박찬민::AWS Summit Seoul 2018

1,601 views

Published on

Published in: Technology
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

프론트엔드 개발자가 혼자 AWS 기반 웹애플리케이션 만들기::박찬민::AWS Summit Seoul 2018

  1. 1. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 박찬민 Aart / Front-end Developer 프론트엔드 개발자가 혼자 AWS 기반 웹애플리케이션 만들기
  2. 2. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 발표자 소개 박찬민 Front-end Developer, Back-end 개발 및 운영에 대한 부담감을 이겨내지 못하고 Front-end 개발자가 되었으나, AWS 덕분에 Back-end 개발이 가능해진 주니어 개발자
  3. 3. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 회사 소개
  4. 4. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 발표 순서  Front-end 개발자의 한계  AWS의 Superpowers, Serverless  Serverless Services 소개  간단히 만들어보는 REST API  간단히 올려보는 Web Application Server
  5. 5. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Front-end 개발자의 한계
  6. 6. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 간단히 그려보는 Web Application 구조
  7. 7. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 예시 + + #AWS #Summit + > Information Hello World! Hello AWS KRUG! Web Application 소개 개인 명함 처럼 사용할 수 있는 개인 사이트 어플리케이션. 로그인 한 사용자는 정해진 템플릿에 커버 이미지, 프로필 이미지, 해시태그, 기타 정보를 작성. https://서비스도메인.com/{userId} 로 접속했을 때, 완성된 개인 사이트 출력.
  8. 8. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 예시 + + #AWS #Summit + > Information Hello World! Hello AWS KRUG! Web Application 필요한 기능 1. 사용자 관리 (로그인) 2. 이미지 저장 3. 정보 저장 4. Web Application Server
  9. 9. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 예시 + + #AWS #Summit + > Information Hello World! Hello AWS KRUG! Web Application Back-end Server Web Server REST API Database Storage
  10. 10. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 너무 큰 산, Back-end
  11. 11. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Front-end와 Back-end Front-end Back-end Node.js Javascript HTML CSS Java Spring Database OS Vue.js Webpack Network Architechture
  12. 12. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Front-end와 Back-end Front-end Back-end Node.js Javascript HTML CSS Java Spring Database OS Vue.js Webpack Network Architechture 이제 막 적응 되어가는 Front-end Front-end 기술스택과는 너무나도 다르고 심도 깊고 고려할 것도 많고 기초 지식이 많이 필요하고 상용 서비스 하려면 더 어려운 Back-end
  13. 13. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. AWS의 Superpowers, Serverless
  14. 14. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Superpowers
  15. 15. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Superpowers AWS CLOUD 2017 AWS는 말했다. “Superpowers를 주겠다” 내가 받은, Superpowers “Serverless”
  16. 16. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless
  17. 17. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless 서버리스 컴퓨팅을 사용하면 서버를 고려하지 않고 애플리케이션과 서비스를 구축하고 실행할 수 있습니다. 서버리스 애플리케이션에서는 사용자가 서버를 프로비저닝, 확장 및 관리할 필요가 없습니다. 거의 모든 유형의 애플리케이션 또는 백엔드 서비스를 서버리스로 구축할 수 있으며, 애플리케이션을 고가용성으로 실행하고 확장하는 데 필요한 모든 것이 자동으로 처리됩니다. - AWS Serverless
  18. 18. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless Lambda 이벤트에 응답하여 코드를 실행하고 자동으로 기본 컴퓨팅 리소스를 관리하는 서버 없는 컴퓨팅 서비스 특징 - 상시 가동되는 인스턴스가 없고, 호출 시에 컨테이너가 생성됨 - 함수의 코드가 실행되는 시간과 사용하는 메모리에 따른 과금 - Scaling에 대한 고민이 거의 없음 - Express.js 기반의 Web Application 배포 가능
  19. 19. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless API Gateway 개발자가 API를 손쉽게 생성, 게시, 유지 관리, 모니터링 및 보호할 수 있도록 지원하는 완전관리형 서비스 특징 - Lambda와 연결하여 쉽게 REST API 제작 가능 - Cognito 또는 IAM으로 API 호출에 제한을 줄 수 있음. - ACM, Route53과 연결하여 HTTPS를 지원하는 Custom Endpoint 지원
  20. 20. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless DynamoDB 완전관리형 비관계형 데이터베이스(NoSQL) 서비스. 사용자가 데이터베이스 테이블을 생성하고 Auto Scaling의 목표 처리량을 설정하기만 하면 나머지는 시스템에서 자동으로 처리 특징 - Console에서 테이블만 생성하면 바로 사용 가능 - API Gateway, Lambda와 연결하여 쉽게 CRUD가 가능한 API를 제작 - 인스턴스 스펙 선택에 대한 고민이 필요 없음
  21. 21. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless Cognito 웹과 모바일 앱에 빠르고 손쉽게 사용자 가입, 로그인 및 액세스 제어 기능을 제공. 특징 - Console에서 UserPool만 생성하면 회원 관리 시스템 완성 - AWS Amplify를 이용하여 쉽게 회원가입, 로그인 등을 구현할 수 있음 - API Gateway의 권한 부여자로 사용 가능
  22. 22. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless S3 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있도록 구축된 객체 스토리지 특징 - 99.999999999%의 내구성으로 고가용성을 보장 - Static Web Hosting 기능 제공 - CloudFront와 연결하여 자원을 CDN에 배포 가능
  23. 23. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless + + #AWS #Summit + > Information Hello World! Hello AWS KRUG! Web Application 필요한 기능 1. 사용자 관리 (로그인) -> Cognito 2. 이미지 저장 -> S3 3. 정보 저장 -> API Gateway, Lambda, DynamoDB 4. Web Application Server -> API Gateway, Lambda
  24. 24. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Serverless
  25. 25. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 간단히 만들어보는 Serverless
  26. 26. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 만들어보자, REST API
  27. 27. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless  REST API 제작 3단계 1. 데이터를 저장할 DynamoDB 테이블 생성 2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성 3. Lambda를 호출 할 수 있는 API Gateway 연결
  28. 28. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 1. 데이터를 저장할 DynamoDB 테이블 생성 DynamoDB의 대시보드 -> 테이블 만들기
  29. 29. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 1. 데이터를 저장할 DynamoDB 테이블 생성 DynamoDB 테이블 만들기 -> 테이블 이름 -> 기본 키 -> (선택) 정렬 키
  30. 30. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성 AWS Lambda 대시보드 -> 함수 생성
  31. 31. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성 AWS Lambda 작성 -> 함수 이름 입력 -> 런타임 선택 -> 역할 선택 또는 새로운 역할 생성
  32. 32. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성 AWS Lambda 함수 코드 작성 -> DynamoDB에 CRUD하는 기본 코드
  33. 33. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 API Gateway의 대시보드 -> API 작성
  34. 34. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 새 API 생성 -> API 이름 입력
  35. 35. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 작업 -> 리소스 생성
  36. 36. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 새 하위 리소스 -> 리소스 이름 입력 -> 리소스 경로는 이름 입력하면 자동으로 같은 이름으로 입력됨
  37. 37. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 작업 -> 메서드 생성
  38. 38. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 리소스 하위 메서드 -> 추가하려는 메서드 선택
  39. 39. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 메서드 설정 -> 통합 유형: Lambda 함수 선택 -> Lambda 프록시 통합 사용 체크 -> Lambda 함수를 작성해 놓은 리전 선택 -> Lambda 함수 선택
  40. 40. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 CORS 활성화 -> 다른 도메인으로 접근하기 위한 설정 API 배포 <- 중요 100만개 X 100개 -> 배포 하지 않으면 절대 적용되지 않음
  41. 41. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless 3. Lambda를 호출 할 수 있는 API Gateway 연결 배포 후 endpoint 확인
  42. 42. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless Web Application에서 REST API 사용 AWS Amplify is designed to provide you a more productive environment for connecting Cloud services and working with JavaScript.
  43. 43. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless Web Application에서 REST API 사용
  44. 44. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. REST API with Serverless Web Application에서 REST API 사용 Auth 기능과 함께 사용하면, 자동으로 서명 버전4로 서명된 요청을 보내기 때문에, AWS_IAM을 이용한 API Gateway의 API 호출 제어가 간편함.
  45. 45. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 배포해보자, Web Application
  46. 46. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda  Web Application 배포 4 단계 1. Express.js 기반의 Web Application 준비 2. aws-serverless-express 설치 및 설정 3. Lambda 함수 생성 및 Web Application 배포 4. API Gateway 연결 및 Custom Endpoint 설정
  47. 47. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 1. Express.js 기반의 Web Application 준비
  48. 48. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 2. aws-serverless-express 설치 및 설정 (1) aws-serverless-express 설치 Express.js 기반의 Node.js 어플리케이션을 Lambda에서 구동시킬 수 있게 만들어주는 javascript 라이브러리
  49. 49. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 2. aws-serverless-express 설치 및 설정 (2) aws-serverless-express 사용을 위한 express.js 설정
  50. 50. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 2. aws-serverless-express 설치 및 설정 (3) lambda.js 작성
  51. 51. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 3. Lambda 함수 생성 및 Web Application 배포 (1) 프로젝트 zip 파일 준비
  52. 52. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 3. Lambda 함수 생성 및 Web Application 배포 (2) zip 파일 업로드
  53. 53. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 4. API Gateway 연결 및 Custom Endpoint 설정 API 구조 프록시 리소스로 구성
  54. 54. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 4. API Gateway 연결 및 Custom Endpoint 설정 설정 > 이진 미디어 형식
  55. 55. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Web Application 배포 on Lambda 4. API Gateway 연결 및 Custom Endpoint 설정 사용자 지정 도메인 이름 Route53, 새 record 생성
  56. 56. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. NameSite
  57. 57. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. 관리자 페이지 namesite.walkinpcm.com 개인 페이지 my-namesite.walkinpcm.com/walkinpcm
  58. 58. 박찬민 walkinpcm@gmail.com walkinpcm.blogspot.com

×