[GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다

Byungjin Park · posquit0.com · posquit0Copyright © 2017 All Rights Reserved.
JAMstack이
GitHub와 CloudFlare를 만날 때
고성능 웹 어플리케이션 호스팅은 무료가 된다.
By Byungjin Park

Node.js와 Python을 좋아합니다.
터미널 환경을 사랑하는 굉장한 Vim 덕후입니다.
GitHub에서 활발하게 오픈소스 활동을 하고 있습니다.
SPEAKER
발표자 소개
박병진 / @posquit0
(현) 소프트웨어 아키텍트 @ 옴니어스
What I Interest
시스템 및 인프라 설계 및 구축 / DevOps
서비스 모니터링 및 로깅 시스템 구축
컨테이너 기반의 마이크로서비스 아키텍처

How it feels to learn javascript in 2016?
By Jose Aguinaga
Applause from 18K people

회사에서 이번에 웹 사이트 새로 만드는데 뭐 쓰는게 좋을까?
이거 ㄹㅇ React 각 ㅇㅈ? ㅇ ㅇㅈ~ 지금 2017년 React 오지는거 ㅇㅈ하는 부분?

HTML
CSS
JavaScript
WAS
Web Application
A BRIEF HISTORY OF WEB DEV

HTML
HyperText Markup Language
- 구조적인 문서를 작성하기 위한 마크업 언어
- 1993년 첫 릴리즈
- 1997년 HTML4 발표
- 2014년 HTML5 발표
STRUCTURE

CSS
Casacading Style Sheets
- HTML과 같은 마크업 언어가 실제로 표현되는 방법을 기술하는 언어
- 1996년 첫 릴리즈
- 2006년 SASS(Syntactically Awesome Stylesheets) 첫 릴리즈
- 2013년 PostCSS 첫 릴리즈 by TJ Holowaychuk
STYLE

JavaScript
- 웹 브라우저에서 실행되어 DOM을 핸들링하기 위한 목적으로 만들어진 언어
- 1995년 첫 릴리즈 by Brendan Eich
(10일만에 개발되었다는 근본 없는 언어)
- 1997년 ECMAScript 표준 첫 발표
- 2009년 Node.js 첫 릴리즈
- 2015년 ES6 발표 / 2016년 ES7 발표 / 2017년 ES8 발표
BEHAVIOR

WAS
Web Application Server
- 앱의 연산이 복잡해지면서 이를 클라이언트가 아닌 서버에서 수행
- 1990년대 후반 전자상거래의 발전과 함께 일반화
- 1995년 PHP 첫 릴리즈
- 데이터베이스와 함께 3-Tier 웹 아키텍처 일반화

Web Application
- SPA(Single-page Application)
- 클라이언트 디바이스의 성능 향상과 함께 서버의 로드를 클라이언트에게 
전과하여 서비스의 전체적인 성능 향상
- API서버와 통신하여 데이터를 표현하는 역할을 수행
- 2015년 PWA(Progressive Web Application) 발표 by Google

HTML
HTML

HTML + CSS
HTML + CSS

HTML + CSS + JavaScript
HTML + CSS + JS

WAS
HTML + CSS + JS

WAS: 3-Tier
HTML + CSS + JS

Web Application
Web App 
(HTML + CSS + JS)
DATA(JSON/XML)

What is JAMstack? 
What is Static Site Generator?
Proﬁts
Best Practices
JAM STACK

모든 동적인 처리를 프론트엔드 단에서 자바스크립트로 수행
EX) JS Framework / Library / Vanilla Javascript
JAM STACK
What is JAMstack?
J
A
M
JavaScript
APIs
모든 서버단 처리는 재사용 가능한 API로 추상화
EX) Custom-built API / 3rd-party API
Markup
배포시 빌드 가능한 마크업 템플릿 엔진 사용
EX) Static Site Generator(Jekyll, Hugo, Hexo, GitBook 등) / Webpack
Modern web development architecture based on client-side JavaScript, 
reusable APIs, and pre-built Markup.

JAM STACK
What is Static Site Generator?
Static Site Generator is a program, that generates HTML website as an output.
자세한 내용은 staticgen.com에서 확인할 수 있습니다.
템플릿 엔진 기반으로 미리 웹 사이트의 레이아웃 구성
Markdown, JSON, YAML, 혹은 API를 통해 웹 컨텐츠 구성
컨텐츠와 스타일의 분리
StaticGen
Netlify에서 운영하는 오픈소스 Static Site Generator 랭킹 페이지
라이선스/언어에 대한 정보도 제공하여 빠르게 비교 가능
보통 블로그 / API 문서 / 개인 및 회사 홈페이지 제작 목적으로 사용
운영이 쉽고 SEO(Search Engine Optimization)에 유리

CDN을 활용시 컨텐츠 캐싱이 쉬움
전세계 엣지를 통해 글로벌 확장 용이
JAM STACK
Proﬁts
Better Performance Low Cost
운영을 위한 웹 서버가 불필요
정적 파일(Static File) 호스팅 환경만 필요
Higher Security Better Developer Experience
데이터와 로직을 분리하여 약결합(Loose coupling)
웹 서버가 없어 쉬운 유지보수
비지니스 로직 처리는 API에게 위임
CDN을 활용시 쉽고 안정적인 HTTPS/SSL

01. 모든 프로젝트는 CDN(Content Delivery Network)에 업로드
02. 배포시 CDN 캐시는 즉시 폐기
03. 배포는 모든 변경 파일이 업로드 완료 시에 적용
04. Git으로 버전관리를 하고 단일 표준 명령어(ex. npm install)로 어플리케이션 빌드
05. Babel, PostCSS, Webpack과 같은 모던 빌드 도구 활용하여 최신 JS 문법 사용
06. 빌드 자동화로 JAMstack 마크업 변경사항 실시간 확인
JAM STACK
Best Practices
자세한 내용은 jamstack.org에서 확인할 수 있습니다.

GitHub Pages + CloudFlare
Netlify
AWS S3 + CloudFront
DEPLOYMENT

- GitHub 사용자/그룹/프로젝트의 Static Web Site 호스팅 무료 제공
- github.io 도메인을 이용하여 HTTPS/SSL 지원
- Jekyll 기반의 기본 템플릿 지원
DEPLOYMENT
사용제한
GitHub 저장소 1GB 사용 제한 / 월 100GB 대역폭 제공 / 시간당 10개 빌드
빌드가 필요한 경우 빌드 결과물을 특정 디렉토리 혹은 브랜치에 보관 필요
자세한 내용은 pages.github.com에서 확인할 수 있습니다.
Hosted directly from your GitHub repository. Just edit, push, and your changes are live!

DEPLOYMENT

- 역방향 프록시(Reverse Proxy) 역할 수행
- 무료로 전세계 CDN 및 SSL 인증서, 그리고 DDoS 방어 서비스 제공
DEPLOYMENT
자세한 내용은 cloudﬂare.com에서 확인할 수 있습니다.
Provide a CDN, DDoS mitigation, Internet security services, and distributed DNS services.
사용제한
개인 도메인을 소유하고 있어야 하며, 네임서버를 CloudFlare로 설정 필요

DEPLOYMENT
GitHub Pages + CloudFlare
GitHub Pages로 배포하고 CloudFlare CDN을 활용하여 성능 최적화

- GitHub / BitBucket / GitLab과 계정 연동 및 쉬운 프로젝트 호스팅 제공
- 무료로 전세계 CDN 및 SSL 인증서 지속적인 배포(Continuous Deployment) 제공
- 공식 API 및 CLI 도구 제공
DEPLOYMENT
사용제한
자세한 내용은 netlify.com에서 확인할 수 있습니다.
A uniﬁed platform that automates your code to create high-performant, 
easily maintainable sites and web apps.
개인 도메인을 소유하고 있어야 하며, 네임서버를 Netlify로 설정 필요

DEPLOYMENT
Netlify
GitHub에 코드가 업데이트되면 Netlify에서 자체 CDN을 활용하여 자동 배포

AWS 클라우드 인프라 상에서 서비스를 운영하는 경우
DEPLOYMENT
AWS S3 + CloudFront
GitHub

GitHub와 CloudFlare를 이용한 웹 어플리케이션 호스팅
Netlify를 이용한 웹 어플리케이션 호스팅
DEMO

서비스의 목적에 맞는 웹 기술 스택을 선택하자
목적과 맞다면 웹 서비스 설계시 JAMstack을 고려하자
세상 좋은 공짜 서비스 참 많다
SUMMARY

2주 단위의 스프린트를 바탕으로 애자일 프로세스 진행
회고를 통한 지속적인 개발팀 문화 개선
프로세스의 개선을 위한 다양한 도구 도입
페어프로그래밍 / 코드리뷰 진행
RECRUITING
와 함께 성장할 개발자를 찾습니다
자세한 내용은 omnious.com을 방문해주시거나 joinus@omnious.com으로 문의 주시면 성심 성의껏 답변드리겠습니다.
서버 개발자
MSA 기반의 서버 어플리케이션 개발 및 인프라 운영
웹 개발자
모던 웹 어플리케이션 개발 및 웹 테스팅 자동화
데이터 사이언티스트
데이터 분석 및 모델링. 데이터 파이프라인 구축
머신러닝 엔지니어
패션 이미지 인식/분류 기술 및 추천 알고리즘 연구 개발
우리는 이렇게 일해요
혜택 및 복지
8-10시 내 자율 출퇴근 / 주 1회 리모트 근무 / 다양한 간식 제공
도서 구매 지원 / 개발장비 지원

THE ENDPLEASE DON’T ASK TOO MUCH :)

[GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다

Recomendados

Recomendados

Más contenido relacionado

Similar a [GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다

Similar a [GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다 (20)

Más de Byungjin Park

Más de Byungjin Park (6)

[GDG DevFest Seoul 2017] JAMstack이 GitHub와 CloudFlare를 만날 때 고성능 웹 어플리케이션 호스팅은 무료가 된다