서버리스 기반의 프론트엔드 서버 구축(Serverless frontend web server)

서버리스 기반의
프론트엔드 서버 구축
(Feat. Nuxt.js)

서버리스 기반의 Nuxt.js 서버 구축
박찬민
Front-end Developer
Back-end의 깊이 있는 지식은 무섭지만,
혼자서 온전한 서비스는 만들고 싶은 욕심은 있어서 AWS Serverless에 관심 있는 Front-end 개발자.

무슨 욕심이 났나? (의식의 흐름)

값싸고 가용성 높은 프론트 서버를 띄우고 싶다.

S3에서 정적 웹호스팅 하면 좋은데!!!

S3에서 정적 웹호스팅 하면 좋은데!!! SEO 때문에 SSR을 해야한다…

SSR 하려면 서버가 있어야하고.. 가용성을 높이려면 이중화와 오토스케일링..
더 깊숙히 들어가면 도커.. 컨테이너.. 아.. 생각할게 많은 것 같다..

서버 고민없이 마음 편하게 가용성 높고 SSR 가능한 서버를 쓰고 싶다!!!

서버 고민없이 마음 편하게 가용성 높고 SSR 가능한 서버를 쓰고 싶다!!!
Lambda에서 Express를 띄울 수 있으니깐 Nuxt project를 올릴 수 있지 않을까?!?!

구조 1단계
Lambda에서 Nuxt.js
Express Server 구동

구조 1단계
aws-serverless-express
Express App을 Lambda에서
실행 시킬 수 있게 해주는 node.js의 라이브러리

구조 1단계
(1) Express App 생성

구조 1단계
(2) Lambda Function Handler에 App연결

구조 1단계
브라우저
접속

구조 1단계
API Gateway로 HTTP
URL 연결
Custom Domain 연결을
위한 CF 주소 할당
Custom Domain 생성
및 연결
브라우저
접속

구조 1단계의 장점과 단점
* 장점
- 트래픽에 따른 스케일 관리가 필요하지 않은 프론트엔드 서버
- 사용된 만큼만 비용이 청구됨(트래픽이 적으면 적은 비용만 발생)
* 단점
- 최초 접속자 또는 새로운 Lambda가 생성될 때 접속하는 유저는 콜드스타트로 인해서
웹사이트 접속 지연을 겪음
- 웹사이트에 필요한 정적 리소스(JS, CSS, 이미지 등)들을 호출 할 때도 Lambda를
호출하기 때문에 비효율적인 비용이 발생

구조 2단계
* 구조 1단계의 단점을 보완
- 웹사이트에 필요한 정적 리소스(JS, CSS, 이미지 등)들을 호출 할 때도 Lambda를
호출하기 때문에 비효율적인 비용이 발생
* 보완의 실마리
- Nuxt.js에서는 Server-render 빌드파일과 Client-render 빌드파일을 분리할 수 있음
- AWS에는 정적파일을 배포하는데 아주 좋은 S3와 CloudFront가 있음

구조 2단계
* Nuxt.js의 publicPath
= S3 + CloudFront

구조 2단계
Nuxt.js Client 배포파일
저장 및 정적 리소스 저장
Nuxt.js의 Server-render 용 빌드파일 업로드
Nuxt.js의 Client-render 용 빌드파일 업로드

구조 2단계
API Gateway로 HTTP
URL 연결
및 연결
CDN으로 리소스 배포
웹사이트 최초 접속
또는 새로고침
첫 페이지에 명시된
리소스들 다운로드

* 장점
- Lambda 호출수를 줄여서 비용 절감
- 첫 접속 페이지만 Lambda에서 HTML 문서를 반환하고, 나머지 페이지 배포파일과
정적 리소스는 CDN에서 빠르게 전달
* 단점

구조 3단계
- Lambda@Edge를 이용하면 Request를 확인하여 Origin을 변경할 수 있음
- Nuxt.js는 SSR Framework지만, 정적 SPA 모드로 빌드할 수 있음

구조 3단계
* Lambda@Edge
SEO 때문에 포기할 수 없는 Lambda...였는데!!
일반 사용자와 Bot을 구별해서 각자 다른 서버에서 웹페이지를 제공할 수 있다?!?!?!

구조 3단계
* Lambda@Edge
Origin으로 요청하기 전에 호출되며,
Request 내용을 확인 할 수 있고,
Request의 Origin 정보를 변경하여 다른
Origin으로 요청을 보낼 수 있다.

구조 3단계
Nuxt.js SPA 웹앱 호스팅
Universal Mode 빌드파일 업로드
SPA Mode 빌드파일 업로드

구조 3단계
API Gateway로 HTTP
URL 연결
및 연결
웹사이트 접속
S3 웹호스팅을
Origin으로 바라보는 CFNuxt.js SPA 웹앱 호스팅
Bot인지 일반유저인지
판단
일반유저(Origin 변경 안함)
Bot(Origin 변경 함)

* 장점
- Bot이 아닌 일반유저는 S3에서 웹페이지를 제공받기 때문에 Lambda의 콜드스타트
이슈를 겪지 않음
* 단점
- 웹페이지 접속, 정적리소스 요청 등 모든 요청이 Lambda@Edge에서 Bot인지
판단하기 때문에 Lambda 비용이 비효율적으로 부과됨

구조 4단계
- 웹페이지 접속, 정적리소스 요청 등 모든 요청이 Lambda@Edge에서 Bot인지
판단하기 때문에 Lambda 비용이 비효율적으로 부과됨
- 2단계에서 사용했던, Server-render/Client-render 빌드 파일 분리 후,
Client-render 빌드 파일을 CDN(S3 + CloudFront)에 배포

구조 4단계
웹사이트 첫 접속
또는 새로고침
또는 Bot
첫 페이지에 명시된
리소스들 다운로드
Nuxt.js SPA 웹앱 호스팅

구조 4단계
* Sample 확인
- 브라우저에서 s3-nuxt.walkinpcm.com 접속
-- 웹페이지에서 ‘Server: S3’ 확인
-- 소스코드 보기에서 본문 없는 SPA임을 확인
-- js 파일의 URL이 resource.walkinpcm.com임을 확인
- Postman에서 User-Agent를 Googlebot으로 수정하여 s3-nuxt.walkinpcm.com
으로 접속
-- 응답의 Body에 Rendering된 html 문서를 확인
-- 이미지 파일의 URL이 resource.walkinpcm.com임을 확인

결론
* AWS 서버리스 서비스들을 이용하면 관리의 부담이 적고, 비용 효율적인 프론트엔드
서버를 운영할 수 있음
* 마지막 단계가 가장 좋다기보다, 서비스의 요구사항에 따라 적절한 AWS 서비스를
선택적으로 사용하는 것이 좋음
* 작은 구조로 시작해서 하나씩 기능을 깊게 파보면, 점점 더 좋은 구조를 만들 수 있는
방법들이 나타남. 그러므로 계속해서 시도해보는 것이 좋음
* AWS 서버리스 소모임은 언제나 서버리스에 관심 있으신 모든 분들을 환영합니다 :)
( “Meetup” 에서 모임 일정을 확인하실 수 있습니다! @awskrug )

감사합니다 :)

서버리스 기반의 프론트엔드 서버 구축(Serverless frontend web server)

More Related Content

What's hot (20)

Similar to 서버리스 기반의 프론트엔드 서버 구축(Serverless frontend web server) (20)

서버리스 기반의 프론트엔드 서버 구축(Serverless frontend web server)