CI&CD with FrontEnd developer

1. VINGLE Front End
Managing and deploying service in 5 minutes

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

3. Before microservice
Web Server(Ruby on Rails)
Desktop Web
Mobile Web
Admin 개발자,
기획자,
마케터,
젠킨스
의 얼굴이 될 수 있습니다.
너무 크고 복잡한 프로젝트(Repository)
+
서비스 간 극심한 커플링
+
최소 2시간 이상 걸리는 배포, 롤백
Same Repository
Same Deploy
Same CI

4. 나는 어떻게 빙글을 망가뜨렸나(과거형)
• 테스트가 제대로 작성되어 있지 않은 경우
• BackEnd - (API) 부분을 잘못 건드린 경우
• 라이브러리 간 충돌이나 버그가 존재하는 경우
(ex: Rails Sprocket…)
• 백엔드가 배포되면 안됐는데 배포를 눌러버린 경우
• + 처음 프로젝트를 봤을 때의 심정 ———>

5. 독립 프론트엔드 서버를 구축시 필요한 사
항들
1. 원래 웹서버와 완벽하게 분리된 환경에서 존재해야 함
2. 빌드, 배포, 테스트, 롤백을 모두 자동화하여 관리할 수 있는
CI 환경 (Jenkins와 같은 CI Tool을 사용)
3. 실시간 변동적인 Scalability 확보
4. 서버 상황에 대한 실시간 Monitoring 환경 확보
5. 서버 Logger와 같은 필수적인 기능들 확보
6. Universal Rendering(isomorphic)이 가능해야 함(Server-side
rendering)

6. Client-side rendering
Universal rendering

7. 독립 서버를 위한 대안 후보들
Static Page
NodeJS server
AWS Lambda
Vingle Mobile Web
No Service
Vingle Desktop Web

8. Independent NodeJS
server

9. Independent NodeJS
server
• 일반적인 nodeJS 서버(ExpressJS, KoA …)
• 유니버설(Isomorphic) 렌더링
• 가변적인 Scalability 확보가 필요함
• 모니터링 및 관리 환경을 설정해야 함
• SSL 및 Cors 등 귀찮은 각종 환경들을 설정해야 함

10. Static Page

11. Static Page
• index.html와 bundle.JS를 S3에 업로드
• 웹 서버(Nginx) -> CDN -> S3 식으로 앞단에 CDN 배치
• 장/단점
클라이언트 사이드 렌더링
SEO가 보장되지 않음
느린 최초 렌더링
CDN을 통한 모니터링 가능
가변적인 Scalability 확보 가능

12. AWS Lambda?
• 이벤트에 응답하여 코드를 실행하고
자동으로 기본 컴퓨팅 리소스를 관리
하는 서버리스 컴퓨팅 서비스
• nodeJS, Java, Python , C# 코드 실행
가능
• 이벤트가 HTTP 요청일 경우
Response를 Customizing 가능

13. AWS Lambda

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

15. 쌉니다

16. 모니터링도 좋습니다!

17. 실제로 보는 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
Deploy
After 30 minutes

18. 1. 새로운 Branch에서 개발을 시작함
2. 새 Branch를 Push하면 새 Jenkins pipeline 생성
3. 자동으로 Build - Test - Demo Branch 생성
4. 이후 Slack으로 노티
실제로 개발자가 하는 일은 새 Branch를 Push하는 것 뿐

19. Example Jenkins Pipeline

20. Demo Branch?
디자이너와의 협업, QA 과정에서의 효율성
Production에서만 확인 가능한 기능들 검증
(Facebook oAuth 등…)

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

22. Rollback?
방법 1
가장 최근에 성공했던 배포 Jenkins job 을 돌린다.
안전하고, 2분 안에 다시 롤백 가능
방법 2
AWS Console에 접속해서 Lambda script를
이전에 성공했던 것으로 롤백하게 한다.
즉시 롤백 가능
현재 빙글에서는 원칙적으로 방법 1을 사용하고 있음

23. 모든 건 자동화에 맡기고 놀러가세요
저분은 왜 아마존 티셔츠(…)
행복해진 개발자들

24. 감사합니다