T11_1_한종원_20181126 AWS S3, SPA, 그리고 Vue.JS - HBSmith는 어떻게 Frontend를 Serverless로 운영하는가
0 likes415 views
2018년 11월 26일 COEX에서 진행된 HTML5 Conference 발표 자료입니다. 실제 현장에서 발표한 자료와는 다소 차이가 있을 수 있습니다. 본 발표는 AWS S3, SPA, VueJS 등을 통해 구축한 Serverless 환경을 소개합니다. 발표는 한종원님이 진행해주셨습니다.
![기술 스택: S3 Static Website Hosting 설정
1. S3에 접속
2. 적당한 이름의 Bucket(예: “example.com") 을 생성하고,
bucket policy에 ‘public read access’ 권한 설정 추가
3. Bucket 을 선택하고, [Properties] 에서
[Static website hosting] 선택
4. [Index document] 로 “index.html”을 입력
5. 저장
6. Bucket에 SPA website contents 업로드
7. ‘Endpoint’ 주소로 접속해서 SPA 정상 동작 확인
16
https://console.aws.amazon.com/s3/](https://image.slidesharecdn.com/t111-181127074234/85/T11_1_-_20181126-AWS-S3-SPA-Vue-JS-HBSmith-Frontend-Serverless-16-320.jpg)
T11_1_한종원_20181126 AWS S3, SPA, 그리고 Vue.JS - HBSmith는 어떻게 Frontend를 Serverless로 운영하는가
- 1. AWS S3, SPA, 그리고 Vue.JS 26. Nov. 2018 addnull@hbsmith.io (W3C HTML5 Conference 2018) HBSmith는 어떻게 Frontend를 Serverless로 운영하는가 1
- 2. 발표자 소개 • 한종원 • Python과 Cloud Infra, Lean/Agile 방법론 그리고 애플의 제품을 사랑. • 2012년 석사 학위를 마치고, startup을 시작 • '의미가 있는 일을, 올바르게 하고 싶다.’ • 경력 • (현) DevOps 전문 스타트업 ‘HB Smith’ 대표 • 택시 O2O 서비스 스타트업 ‘Kanizsa Lab’의 backend server / infra devops 담당 • Cloud computing 전문 스타트업 'A2 company' co-founder (‘KINX’에 인수합병) • NEXON 'MapleStory 국내 Live Team'에서 DBA, SA로 근무 (산업 기능 요원) 2 https://www.linkedin.com/in/addnull/ https://hbsmith.io
- 3. Contents • 발표 대상 - Web client 운영에 필요한 서버, 인프라 관리 “비용”을 최소화하고 싶은 분 • 발표 목차 - 왜 Serverless인가? - 기술 스택 - Troubleshooting 3 (예상 발표 시간: 30분)
- 5. 왜 Serverless인가? • Business Scenario 장애 모니터링 ‘hbsmith’ 5
- 6. 왜 Serverless인가? • 서비스 전체 AWS Infra overview 6
- 7. 왜 Serverless인가? • Web frontend 개발, 운영에 필요한 내용 7 IDE Web server Monitoring Linux HA Failover Logging Backup HTML Web browser Javascript CSS Debugging (더 자세한 내용은 아래 link 참고) https://github.com/kamranahmedse/developer-roadmap
- 9. 왜 Serverless인가? • Web frontend 개발, 운영에 필요한 내용 9 IDE Web server Monitoring Linux HA Failover Logging Backup HTML Web browser Javascript CSS Debugging Serverless
- 10. 기술 스택 10
- 12. 기술 스택: SPA • SPA: Single Page Application • HTML 기반 Web Application • index.html 단일 페이지에서 동적으로 DOM을 변경하여 contents를 보여주는 형태 • 즉, page reloading이 없기 때문에 browser 환경에서 좀 더 자연스러운 UX를 제공 • 최근 Javascript framework에서 대부분 지원 • 예시: Gmail, Google Maps, Facebook, GitHub 12 SPA
- 13. 기술 스택: SPA • 장점 • 빠름. HTML, CSS, script는 처음 loading에만 가져오고 그 이후에는 data만 뒤에서 loading. • 모든 page rendering을 front 쪽에서 처리할 수 있음. • Front 쪽에서 network monitoring과 debuging 하기 쉬움. • Mobile web application 제작시에 기존의 Front code 재활용하기 쉬움. • 미리 data를 cache 할 수 있기 때문에, offline mode 지원도 가능함. 13 즉, 서버의 page rendering을 고려할 필요가 없으므로 serverless 같은 환경에서도 적용이 용이.
- 14. 기술 스택: SPA • 단점 • 다소 무거운 framework loading에 따른 속도 저하 • Javascript가 비활성화된 browser 사용자를 위한 대비책 필요 • 이전의 전통적인 방식의 web application에 비해서 보안이 취약 (Cross-Site Scripting (XSS) 을 이용한 공격자가 다른 공격 대상자에게 client-side script injection이 가능함) • Memory leak, memory leak 그리고 memory leak !!! • 14
- 15. 기술 스택: S3 • S3: Simple Storage Service • Cloud object storage (Object = File + Metadata) • 무제한 공간 • 저장된 파일 개수, 용량, 그리고 동시에 접속자 수에 상관없이 늘 동일한 performance(파일 검색, download 시간) 보장 • High availability (기본값 3 replicas) • Static website hosting 지원 15 즉, 정적 contents(CSS, JS, image 등)으로만 만들어진 SPA를 이용해서 바로 website 서비스 제공 가능함
- 16. 기술 스택: S3 Static Website Hosting 설정 1. S3에 접속 2. 적당한 이름의 Bucket(예: “example.com") 을 생성하고, bucket policy에 ‘public read access’ 권한 설정 추가 3. Bucket 을 선택하고, [Properties] 에서 [Static website hosting] 선택 4. [Index document] 로 “index.html”을 입력 5. 저장 6. Bucket에 SPA website contents 업로드 7. ‘Endpoint’ 주소로 접속해서 SPA 정상 동작 확인 16 https://console.aws.amazon.com/s3/
- 17. 기술 스택: CloudFront + ACM + Route53 • CloudFront: CDN(content delivery network) • ACM: AWS에서 무료로 제공하는 SSL 인증서 사용 가능 • Route53: DNS 에 등록해서 customer domain으로 연동 가능 • CDN의 Origin을 S3으로 지정 17 즉, ‘https://hbsmith.io'로 접속할 경우 CloudFront에 caching된 S3 의 SPA를 가져오게 됨
- 18. 기술 스택: SPA Provisioning on S3 1. git clone SPA source code / config / provisioning code 2. npm package(vue 등) 설치 3. npm build 4. Upload SPA files to S3 18
- 19. Troubleshooting 19 ‘누구나 그럴싸한 계획을 가지고 있다.’
- 20. Troubleshooting 20 마이크 타이슨: ‘누구나 그럴싸한 계획을 가지고 있다. 얼굴에 한방 쳐맞기 전까지는.’
- 21. Troubleshooting: Eventual Consistency • S3는 HA를 위해 데이터를 분산 복제 (기본값 3 replicas) 21 이전에 존재한 file overwrite 할 경우 file의 모든 replica가 동기화 되기 전엔 이전 file을 읽어올수도 있음 (!)
- 22. Troubleshooting: Eventual Consistency 해결 • S3에 새로 추가된 file은 분산 복제가 끝나기 전에 읽어올 수 없음 (Read after Write Consistency 속성) • SPA에 file 이름 끝에 timestamp 또는 hash 값(MD5, SHA1, ...)을 붙여서 S3 입장에서 계속 새로 추가된 file처럼 인식하게 함 • ‘index.html’의 경우는 CloudFront(CDN)에서 cache purge/invalidation해서 강제로 최신 ‘index.html’을 읽어오도록 함 22 cache breaker
- 23. Troubleshooting: Hashbang (#!) • ‘vue-router’ version 2 (2016년 release)부터 hashbang을 지원하지 않음 • hashbang을 이용한 SPA routing 23 https://github.com/vuejs/vue-router/releases/tag/v2.0.0-beta.1 (예시) https://hbsmith.io/#!/path/to/resource/ https://hbsmith.io/index.html 에 ‘/path/to/resource/‘를 전달
- 24. Troubleshooting: Hashbang (#!) 해결 • CloudFront의 ‘Custom Error Response’ 설정 24 즉, hashbang 없이도 router 가능 (예시) https://hbsmith.io/path/to/resource/ https://hbsmith.io/index.html 에 ‘/path/to/resource/‘를 전달
- 25. Troubleshooting: SPA Provisioning on S3 (최종) 1. git clone SPA source code / config / provisioning code 2. npm package(vue 등) 설치 3. npm build 4. Upload SPA files to S3 temp bucket 5. Delete all files in S3 deploy bucket 6. Sync between S3 temp and deploy bucket 7. Purge CloudFront(CDN) cache for ‘index.html’ 25 cache breaker
- 26. Wrap-Up 26 HBSmith는 어떻게 Frontend를 Serverless로 운영하는가
- 27. Contents • 발표 목차 - 왜 Serverless인가? - 기술 스택 - Troubleshooting 27 Serverless Eventual Consistency Hashbang (#!)