VINGLE Front EndManaging and deploying service in 5 minutes

신미르 Tylor Shin불행했던 개발자 1

Before microserviceWeb Server(Ruby on

Rails)

Desktop Web

Mobile Web

Admin 개발자 ,기획자 ,마케터 ,젠킨스의 얼굴이 될 수 있습니다 .

너무 크고 복잡한 프로젝트 (Repository)+서비스 간 극심한 커플링+최소 2 시간 이상 걸리는 배포 , 롤백

Same RepositorySame Deploy

Same CI

나는 어떻게 빙글을 망가뜨렸나 ( 과거형 )

• 테스트가 제대로 작성되어 있지 않은 경우• BackEnd - (API) 부분을 잘못 건드린 경우• 라이브러리 간 충돌이나 버그가 존재하는 경우

(ex: Rails Sprocket…)

• 백엔드가 배포되면 안됐는데 배포를 눌러버린 경우

• + 처음 프로젝트를 봤을 때의 심정 ——— >

독립 프론트엔드 서버를 구축시 필요한 사항들1. 원래 웹서버와 완벽하게 분리된 환경에서 존재해야 함2. 빌드 , 배포 , 테스트 , 롤백을 모두 자동화하여 관리할 수 있는

CI 환경 (Jenkins 와 같은 CI Tool 을 사용 )

3. 실시간 변동적인 Scalability 확보4. 서버 상황에 대한 실시간 Monitoring 환경 확보5. 서버 Logger 와 같은 필수적인 기능들 확보6. Universal Rendering(isomorphic) 이 가능해야 함 (Server-

side rendering)

Client-side rendering

Universal rendering

독립 서버를 위한 대안 후보들Static Page

NodeJS server

AWS Lambda

Vingle Mobile Web

No Service

Vingle Desktop Web

Independent NodeJS server

Independent NodeJS server

• 일반적인 nodeJS 서버 (ExpressJS, KoA …)

• 유니버설 (Isomorphic) 렌더링• 가변적인 Scalability 확보가 필요함• 모니터링 및 관리 환경을 설정해야 함• SSL 및 Cors 등 귀찮은 각종 환경들을 설정해야 함

Static Page

Static Page• index.html 와 bundle.JS 를 S3 에 업로드• 웹 서버 (Nginx) -> CDN -> S3 식으로 앞단에 CDN 배치• 장 / 단점클라이언트 사이드 렌더링

SEO 가 보장되지 않음느린 최초 렌더링CDN 을 통한 모니터링 가능가변적인 Scalability 확보 가능

AWS Lambda?• 이벤트에 응답하여 코드를 실행하고 자동으로 기본 컴퓨팅 리소스를 관리하는 서버리스 컴퓨팅 서비스

• nodeJS, Java, Python , C# 코드 실행 가능

• 이벤트가 HTTP 요청일 경우 Response 를 Customizing 가능

AWS Lambda

AWS Lambda• Universal(isomorphic) rendering

• 가변적 scalability 확보• 모니터링 및 배포 관리 시스템 기본 제공• Serverless 와 AWS CloudFormation 을 통한 다중 AWS 서비스 관리 가능• SSL, Cors 세팅 등 귀찮은 설정들 기본 설정• 일반 서버보다 훨씬 저렴한 가격

쌉니다

모니터링도 좋습니다 !

실제로 보는 CI - CD 적용 이후 업무 프로세스New branch

Build bundleJS

Unit & E2E test

Upload bundle to S3

Notify Slack

Pull Request is merged

Build bundleJS

Unit & E2E test

Notify Slack

DeployAfter 30 minutes

1. 새로운 Branch 에서 개발을 시작함2. 새 Branch 를 Push 하면 새 Jenkins pipeline 생성

3. 자동으로 Build - Test - Demo Branch 생성4. 이후 Slack 으로 노티

실제로 개발자가 하는 일은 새 Branch 를 Push 하는 것 뿐

Example Jenkins Pipeline

Demo Branch?

디자이너와의 협업 , QA 과정에서의 효율성( 디자이너에게 멱살잡힐 일이 줄어듭니다 !!!)

Production 에서만 확인 가능한 기능들 검증(Facebook oAuth 등… )

Pull Request 가 Merge 된 이후 ?

1. 자동으로 다시금 빌드 , 테스트를 실행2. Demo Branch 를 통해 마지막 30 분 동안최후의 QA 를 할 수 있는 시간을 줌3. 자동으로 Lambda 가 가르키는 타겟 JS 파일주소를 현재 버젼으로 바꿈으로 배포 끝

실제적인 배포는 2 분 안에 완료

Rollback?방법 1가장 최근에 성공했던 배포 Jenkins job 을 돌린다 .

안전하고 , 2 분 안에 다시 롤백 가능방법 2AWS Console 에 접속해서 Lambda script 를이전에 성공했던 것으로 롤백하게 한다 .

즉시 롤백 가능

현재 빙글에서는 원칙적으로 방법 1 을 사용하고 있음

모든 건 자동화에 맡기고 놀러가세요저분은 왜 아마존 티셔츠 (…)

행복해진 개발자들

감사합니다