More Related Content
Similar to 프론트엔드 개발자가 혼자 AWS 기반 웹애플리케이션 만들기::박찬민::AWS Summit Seoul 2018
Similar to 프론트엔드 개발자가 혼자 AWS 기반 웹애플리케이션 만들기::박찬민::AWS Summit Seoul 2018 (20)
More from Amazon Web Services Korea
More from Amazon Web Services Korea (20)
프론트엔드 개발자가 혼자 AWS 기반 웹애플리케이션 만들기::박찬민::AWS Summit Seoul 2018
- 1. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
박찬민
Aart / Front-end Developer
프론트엔드 개발자가 혼자
AWS 기반 웹애플리케이션 만들기
- 2. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
발표자 소개
박찬민
Front-end Developer,
Back-end 개발 및 운영에 대한 부담감을 이겨내지 못하고
Front-end 개발자가 되었으나,
AWS 덕분에 Back-end 개발이 가능해진 주니어 개발자
- 3. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
회사 소개
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Front-end 개발자의 한계
- 6. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
간단히 그려보는
Web Application 구조
- 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. © 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. © 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
너무 큰 산, Back-end
- 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. © 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
AWS의 Superpowers,
Serverless
- 14. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Superpowers
- 15. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Superpowers
AWS CLOUD 2017
AWS는 말했다.
“Superpowers를 주겠다”
내가 받은, Superpowers
“Serverless”
- 16. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
- 17. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
서버리스 컴퓨팅을 사용하면 서버를 고려하지 않고 애플리케이션과 서비스를 구축하고 실행할 수
있습니다. 서버리스 애플리케이션에서는 사용자가 서버를 프로비저닝, 확장 및 관리할 필요가 없습니다.
거의 모든 유형의 애플리케이션 또는 백엔드 서비스를 서버리스로 구축할 수 있으며, 애플리케이션을
고가용성으로 실행하고 확장하는 데 필요한 모든 것이 자동으로 처리됩니다.
- AWS Serverless
- 18. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
Lambda
이벤트에 응답하여 코드를 실행하고 자동으로 기본
컴퓨팅 리소스를 관리하는 서버 없는 컴퓨팅 서비스
특징
- 상시 가동되는 인스턴스가 없고, 호출 시에 컨테이너가 생성됨
- 함수의 코드가 실행되는 시간과 사용하는 메모리에 따른 과금
- Scaling에 대한 고민이 거의 없음
- Express.js 기반의 Web Application 배포 가능
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
DynamoDB
완전관리형 비관계형 데이터베이스(NoSQL) 서비스.
사용자가 데이터베이스 테이블을 생성하고 Auto
Scaling의 목표 처리량을 설정하기만 하면 나머지는
시스템에서 자동으로 처리
특징
- Console에서 테이블만 생성하면 바로 사용 가능
- API Gateway, Lambda와 연결하여 쉽게 CRUD가 가능한 API를 제작
- 인스턴스 스펙 선택에 대한 고민이 필요 없음
- 21. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
Cognito
웹과 모바일 앱에 빠르고 손쉽게 사용자 가입, 로그인 및
액세스 제어 기능을 제공.
특징
- Console에서 UserPool만 생성하면 회원 관리 시스템 완성
- AWS Amplify를 이용하여 쉽게 회원가입, 로그인 등을 구현할 수 있음
- API Gateway의 권한 부여자로 사용 가능
- 22. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
S3
어디서나 원하는 양의 데이터를 저장하고 검색할 수
있도록 구축된 객체 스토리지
특징
- 99.999999999%의 내구성으로 고가용성을 보장
- Static Web Hosting 기능 제공
- CloudFront와 연결하여 자원을 CDN에 배포 가능
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Serverless
- 25. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
간단히 만들어보는 Serverless
- 26. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
만들어보자, REST API
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
1. 데이터를 저장할 DynamoDB 테이블 생성
DynamoDB의 대시보드
-> 테이블 만들기
- 29. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
1. 데이터를 저장할 DynamoDB 테이블 생성
DynamoDB 테이블 만들기
-> 테이블 이름
-> 기본 키
-> (선택) 정렬 키
- 30. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성
AWS Lambda 대시보드
-> 함수 생성
- 31. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성
AWS Lambda 작성
-> 함수 이름 입력
-> 런타임 선택
-> 역할 선택 또는 새로운 역할 생성
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
API Gateway의 대시보드
-> API 작성
- 34. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
새 API 생성
-> API 이름 입력
- 35. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
작업
-> 리소스 생성
- 36. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
새 하위 리소스
-> 리소스 이름 입력
-> 리소스 경로는 이름 입력하면
자동으로 같은 이름으로 입력됨
- 37. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
작업
-> 메서드 생성
- 38. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
리소스 하위 메서드
-> 추가하려는 메서드 선택
- 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. © 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
3. Lambda를 호출 할 수 있는 API Gateway 연결
배포 후 endpoint 확인
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
REST API with Serverless
Web Application에서 REST API 사용
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
배포해보자, Web Application
- 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
1. Express.js 기반의 Web Application 준비
- 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. © 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. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
2. aws-serverless-express
설치 및 설정
(3) lambda.js 작성
- 51. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
3. Lambda 함수 생성 및 Web Application 배포
(1) 프로젝트 zip 파일 준비
- 52. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
3. Lambda 함수 생성 및 Web Application 배포
(2) zip 파일 업로드
- 53. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
4. API Gateway 연결 및 Custom Endpoint 설정
API 구조 프록시 리소스로 구성
- 54. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
4. API Gateway 연결 및 Custom Endpoint 설정
설정 > 이진 미디어 형식
- 55. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
Web Application 배포 on Lambda
4. API Gateway 연결 및 Custom Endpoint 설정
사용자 지정 도메인 이름 Route53, 새 record 생성
- 56. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
NameSite
- 57. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
관리자 페이지
namesite.walkinpcm.com
개인 페이지
my-namesite.walkinpcm.com/walkinpcm