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

© 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
박찬민
Aart / Front-end Developer
프론트엔드 개발자가 혼자
AWS 기반 웹애플리케이션 만들기

발표자 소개
박찬민
Front-end Developer,
Back-end 개발 및 운영에 대한 부담감을 이겨내지 못하고
Front-end 개발자가 되었으나,
AWS 덕분에 Back-end 개발이 가능해진 주니어 개발자

회사 소개

발표 순서
 Front-end 개발자의 한계
 AWS의 Superpowers, Serverless
 Serverless Services 소개
 간단히 만들어보는 REST API
 간단히 올려보는 Web Application Server

Front-end 개발자의 한계

간단히 그려보는
Web Application 구조

Web Application 예시
+
+
#AWS #Summit
+
> Information
Hello World! Hello AWS
KRUG!
Web Application 소개
개인 명함 처럼 사용할 수 있는
개인 사이트 어플리케이션.
로그인 한 사용자는 정해진 템플릿에
커버 이미지, 프로필 이미지, 해시태그,
기타 정보를 작성.
https://서비스도메인.com/{userId} 로
접속했을 때, 완성된 개인 사이트 출력.

+
+
#AWS #Summit
+
> Information
KRUG!
Web Application 필요한 기능
1. 사용자 관리 (로그인)
2. 이미지 저장
3. 정보 저장
4. Web Application Server

+
+
#AWS #Summit
+
> Information
KRUG!
Web Application Back-end Server
Web Server
REST API
Database
Storage

너무 큰 산, Back-end

Front-end와 Back-end
Front-end Back-end
Node.js Javascript
HTML CSS
Java Spring
Database OS
Vue.js Webpack Network Architechture

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

AWS의 Superpowers,
Serverless

Superpowers

Superpowers
AWS CLOUD 2017
AWS는 말했다.
“Superpowers를 주겠다”
내가 받은, Superpowers
“Serverless”

Serverless

Serverless
서버리스 컴퓨팅을 사용하면 서버를 고려하지 않고 애플리케이션과 서비스를 구축하고 실행할 수
있습니다. 서버리스 애플리케이션에서는 사용자가 서버를 프로비저닝, 확장 및 관리할 필요가 없습니다.
거의 모든 유형의 애플리케이션 또는 백엔드 서비스를 서버리스로 구축할 수 있으며, 애플리케이션을
고가용성으로 실행하고 확장하는 데 필요한 모든 것이 자동으로 처리됩니다.
- AWS Serverless

Serverless
Lambda
이벤트에 응답하여 코드를 실행하고 자동으로 기본
컴퓨팅 리소스를 관리하는 서버 없는 컴퓨팅 서비스
특징
- 상시 가동되는 인스턴스가 없고, 호출 시에 컨테이너가 생성됨
- 함수의 코드가 실행되는 시간과 사용하는 메모리에 따른 과금
- Scaling에 대한 고민이 거의 없음
- Express.js 기반의 Web Application 배포 가능

Serverless
API Gateway
개발자가 API를 손쉽게 생성, 게시, 유지 관리, 모니터링
및 보호할 수 있도록 지원하는 완전관리형 서비스
특징
- Lambda와 연결하여 쉽게 REST API 제작 가능
- Cognito 또는 IAM으로 API 호출에 제한을 줄 수 있음.
- ACM, Route53과 연결하여 HTTPS를 지원하는 Custom Endpoint 지원

Serverless
DynamoDB
완전관리형 비관계형 데이터베이스(NoSQL) 서비스.
사용자가 데이터베이스 테이블을 생성하고 Auto
Scaling의 목표 처리량을 설정하기만 하면 나머지는
시스템에서 자동으로 처리
특징
- Console에서 테이블만 생성하면 바로 사용 가능
- API Gateway, Lambda와 연결하여 쉽게 CRUD가 가능한 API를 제작
- 인스턴스 스펙 선택에 대한 고민이 필요 없음

Serverless
Cognito
웹과 모바일 앱에 빠르고 손쉽게 사용자 가입, 로그인 및
액세스 제어 기능을 제공.
특징
- Console에서 UserPool만 생성하면 회원 관리 시스템 완성
- AWS Amplify를 이용하여 쉽게 회원가입, 로그인 등을 구현할 수 있음
- API Gateway의 권한 부여자로 사용 가능

Serverless
S3
어디서나 원하는 양의 데이터를 저장하고 검색할 수
있도록 구축된 객체 스토리지
특징
- 99.999999999%의 내구성으로 고가용성을 보장
- Static Web Hosting 기능 제공
- CloudFront와 연결하여 자원을 CDN에 배포 가능

Serverless
+
+
#AWS #Summit
+
> Information
KRUG!
Web Application 필요한 기능
1. 사용자 관리 (로그인)
-> Cognito
2. 이미지 저장
-> S3
3. 정보 저장
-> API Gateway, Lambda, DynamoDB
4. Web Application Server
-> API Gateway, Lambda

간단히 만들어보는 Serverless

만들어보자, REST API

REST API with Serverless
 REST API 제작 3단계
1. 데이터를 저장할 DynamoDB 테이블 생성
2. DynamoDB에 CRUD를 수행하는 Lambda 함수 작성
3. Lambda를 호출 할 수 있는 API Gateway 연결

DynamoDB의 대시보드
-> 테이블 만들기

DynamoDB 테이블 만들기
-> 테이블 이름
-> 기본 키
-> (선택) 정렬 키

AWS Lambda 대시보드
-> 함수 생성

AWS Lambda 작성
-> 함수 이름 입력
-> 런타임 선택
-> 역할 선택 또는 새로운 역할 생성

2. DynamoDB에 CRUD를
수행하는 Lambda 함수 작성
AWS Lambda 함수 코드 작성
-> DynamoDB에 CRUD하는 기본 코드

API Gateway의 대시보드
-> API 작성

새 API 생성
-> API 이름 입력

작업
-> 리소스 생성

새 하위 리소스
-> 리소스 이름 입력
-> 리소스 경로는 이름 입력하면
자동으로 같은 이름으로 입력됨

작업
-> 메서드 생성

리소스 하위 메서드
-> 추가하려는 메서드 선택

메서드 설정
-> 통합 유형: Lambda 함수 선택
-> Lambda 프록시 통합 사용 체크
-> Lambda 함수를 작성해 놓은 리전 선택
-> Lambda 함수 선택

CORS 활성화
-> 다른 도메인으로 접근하기 위한 설정
API 배포 <- 중요 100만개 X 100개
-> 배포 하지 않으면 절대 적용되지 않음

배포 후 endpoint 확인

Web Application에서 REST API 사용
AWS Amplify is designed to provide you a more productive environment for
connecting Cloud services and working with JavaScript.

Auth 기능과 함께 사용하면, 자동으로 서명 버전4로 서명된 요청을 보내기 때문에,
AWS_IAM을 이용한 API Gateway의 API 호출 제어가 간편함.

배포해보자, Web Application

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 설정

1. Express.js 기반의 Web Application 준비

(1) aws-serverless-express 설치
Express.js 기반의 Node.js 어플리케이션을 Lambda에서 구동시킬 수 있게
만들어주는 javascript 라이브러리

(2) aws-serverless-express 사용을 위한 express.js 설정

2. aws-serverless-express
설치 및 설정
(3) lambda.js 작성

(1) 프로젝트 zip 파일 준비

(2) zip 파일 업로드

API 구조 프록시 리소스로 구성

설정 > 이진 미디어 형식

사용자 지정 도메인 이름 Route53, 새 record 생성

NameSite

관리자 페이지
namesite.walkinpcm.com
개인 페이지
my-namesite.walkinpcm.com/walkinpcm

박찬민
walkinpcm@gmail.com
walkinpcm.blogspot.com

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

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

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

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

Más de Amazon Web Services Korea

Más de Amazon Web Services Korea (20)

Último

Último (6)

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