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

모던 웹 개발은 예전 웹 페이지 퍼블리싱 개념을 벗어나, 서버 없이 독립적으로 동작할 수 있는 웹 어플리케이션 개발로 탈바꿈하였습니다. 웹 브라우저에서 동작하는 독립적인 웹 어플리케이션은 CDN(Content Delivery Network)을 100% 활용하여 캐싱, SSL, 보안, 스케일링 등의 많은 장점을 누릴 수 있습니다. 본 발표에서는 Github의 Static Web 호스팅 기능을 통해 웹 어플리케이션을 Github의 도메인으로 무료 호스팅을 한 후, 개인 도메인과 연결, CloudFlare의 CDN 서비스와 연동하여 무료 SSL, 캐싱, 보안 기능을 활용하여 고성능 HTTPS 웹으로 탈바꿈시킬 것입니다

Transcript

1. Byungjin Park · posquit0.com · posquit0
   Copyright © 2017 All Rights Reserved.
   JAMstack੉
   GitHub৬ CloudFlareܳ ݅զ ٸ
   Ҋࢿמ ਢ য೒ܻா੉࣌ ഐझ౴਷ ޖܐо ػ׮.
   By Byungjin Park
   

   View Slide

2. Byungjin Park · posquit0.com · posquit0
   Copyright © 2017 All Rights Reserved.
   Node.js৬ Pythonਸ જই೤פ׮.
   ఠ޷օ ജ҃ਸ ࢎیೞח ҭ੢ೠ Vim ؋റੑפ׮.
   GitHubীࢲ ഝߊೞѱ য়೑ࣗझ ഝزਸ ೞҊ ੓णפ׮.
   SPEAKER
   ߊ಴੗ ࣗѐ
   ߅߽૓ / @posquit0
   (അ) ࣗ೐౟ਝয ইఃఫ౟ @ ১פযझ
   What I Interest
   दझమ ߂ ੋ೐ۄ ࢸ҅ ߂ ҳ୷ / DevOps
   ࢲ࠺झ ݽפఠ݂ ߂ ۽Ӧ दझమ ҳ୷
   ஶప੉ց ӝ߈੄ ݃੉௼۽ࢲ࠺झ ইఃఫ୊
   

   View Slide

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

   View Slide

4. ഥࢎীࢲ ੉ߣী ਢ ࢎ੉౟ ࢜۽ ݅٘חؘ ޤ ॳחѱ જਸө?
   ੉Ѣ Ůż React п żŽ? ż żŽ~ ૑Ә 2017֙ React য়૑חѢ żŽೞח ࠗ࠙?
   

   View Slide

5. The Failure of Architecture
   

   View Slide

6. Byungjin Park · posquit0.com · posquit0
   Copyright © 2017 All Rights Reserved.
   HTML
   CSS
   JavaScript
   WAS
   Web Application
   A BRIEF HISTORY OF WEB DEV
   

   View Slide

7. Byungjin Park · posquit0.com · posquit0
   Copyright © 2017 All Rights Reserved.
   A BRIEF HISTORY OF WEB DEV
   HTML
   HyperText Markup Language
   - ҳઑ੸ੋ ޙࢲܳ ੘ࢿೞӝ ਤೠ ݃௼স ঱য
   - 1993֙ ୐ ܾܻૉ
   - 1997֙ HTML4 ߊ಴
   - 2014֙ HTML5 ߊ಴
   STRUCTURE
   

   View Slide

8. Byungjin Park · posquit0.com · posquit0
   Copyright © 2017 All Rights Reserved.
   A BRIEF HISTORY OF WEB DEV
   CSS
   Casacading Style Sheets
   - HTMLҗ э਷ ݃௼স ঱যо पઁ۽ ಴അغח ߑߨਸ ӝࣿೞח ঱য
   - 1996֙ ୐ ܾܻૉ
   - 2006֙ SASS(Syntactically Awesome Stylesheets) ୐ ܾܻૉ
   - 2013֙ PostCSS ୐ ܾܻૉ by TJ Holowaychuk
   STYLE
   

   View Slide

9. Byungjin Park · posquit0.com · posquit0
   Copyright © 2017 All Rights Reserved.
   A BRIEF HISTORY OF WEB DEV
   JavaScript
   - ਢ ࠳ۄ਋੷ীࢲ प೯غয DOMਸ ೩ٜ݂ೞӝ ਤೠ ݾ੸ਵ۽ ٜ݅য૓ ঱য
   - 1995֙ ୐ ܾܻૉ by Brendan Eich
   (10ੌ݅ী ѐߊغ঻׮ח Ӕࠄ হח ঱য)
   - 1997֙ ECMAScript ಴ળ ୐ ߊ಴
   - 2009֙ Node.js ୐ ܾܻૉ
   - 2015֙ ES6 ߊ಴ / 2016֙ ES7 ߊ಴ / 2017֙ ES8 ߊ಴
   BEHAVIOR
   

   View Slide

10. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    A BRIEF HISTORY OF WEB DEV
    WAS
    Web Application Server
    - জ੄ ো࢑੉ ࠂ੟೧૑ݶࢲ ੉ܳ ௿ۄ੉঱౟о ইצ ࢲߡীࢲ ࣻ೯
    - 1990֙؀ റ߈ ੹੗࢚Ѣې੄ ߊ੹җ ೣԋ ੌ߈ച
    - 1995֙ PHP ୐ ܾܻૉ
    - ؘ੉ఠ߬੉झ৬ ೣԋ 3-Tier ਢ ইఃఫ୊ ੌ߈ച
    

    View Slide

11. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    A BRIEF HISTORY OF WEB DEV
    Web Application
    - SPA(Single-page Application)
    - ௿ۄ੉঱౟ ٣߄੉झ੄ ࢿמ ೱ࢚җ ೣԋ ࢲߡ੄ ۽٘ܳ ௿ۄ੉঱౟ীѱ

    ੹җೞৈ ࢲ࠺झ੄ ੹୓੸ੋ ࢿמ ೱ࢚
    - APIࢲߡ৬ ాनೞৈ ؘ੉ఠܳ ಴അೞח ৉ೡਸ ࣻ೯
    - 2015֙ PWA(Progressive Web Application) ߊ಴ by Google
    

    View Slide

12. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    HTML
    HTML
    

    View Slide

13. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    HTML + CSS
    HTML + CSS
    

    View Slide

14. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    HTML + CSS + JavaScript
    HTML + CSS + JS
    

    View Slide

15. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    WAS
    HTML + CSS + JS
    

    View Slide

16. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    WAS: 3-Tier
    HTML + CSS + JS
    

    View Slide

17. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    Web Application
    Web App

    (HTML + CSS + JS)
    DATA(JSON/XML)
    

    View Slide

18. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    What is JAMstack?

    What is Static Site Generator?
    Profits
    Best Practices
    JAM STACK
    

    View Slide

19. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    ݽٚ ز੸ੋ ୊ܻܳ ೐ۿ౟ূ٘ ױীࢲ ੗߄झ௼݀౟۽ ࣻ೯
    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.
    

    View Slide

20. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    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)ী ਬܻ
    

    View Slide

21. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    CDNਸ ഝਊद ஶబஎ நय੉ ए਑
    ੹ࣁ҅ ৆૑ܳ ా೧ Ӗ۽ߥ ഛ੢ ਊ੉
    JAM STACK
    Profits
    Better Performance Low Cost
    ਍৔ਸ ਤೠ ਢ ࢲߡо ࠛ೙ਃ
    ੿੸ ౵ੌ(Static File) ഐझ౴ ജ҃݅ ೙ਃ
    Higher Security Better Developer Experience
    ؘ੉ఠ৬ ۽૒ਸ ܻ࠙ೞৈ ডѾ೤(Loose coupling)
    ਢ ࢲߡо হয ए਍ ਬ૑ࠁࣻ
    ࠺૑פझ ۽૒ ୊ܻח APIীѱ ਤ੐
    CDNਸ ഝਊद औҊ উ੿੸ੋ HTTPS/SSL
    

    View Slide

22. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    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ীࢲ ഛੋೡ ࣻ ੓णפ׮.
    

    View Slide

23. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    GitHub Pages + CloudFlare
    Netlify
    AWS S3 + CloudFront
    DEPLOYMENT
    

    View Slide

24. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    - 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!
    

    View Slide

25. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    DEPLOYMENT
    

    View Slide

26. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    - ৉ߑೱ ೐۾द(Reverse Proxy) ৉ೡ ࣻ೯
    - ޖܐ۽ ੹ࣁ҅ CDN ߂ SSL ੋૐࢲ, ӒܻҊ DDoS ߑয ࢲ࠺झ ઁҕ
    DEPLOYMENT
    ੗ࣁೠ ղਊ਷ cloudflare.comীࢲ ഛੋೡ ࣻ ੓णפ׮.
    Provide a CDN, DDoS mitigation, Internet security services, and distributed DNS services.
    ࢎਊઁೠ
    ѐੋ بݫੋਸ ࣗਬೞҊ ੓যঠ ೞݴ, ֎੐ࢲߡܳ CloudFlare۽ ࢸ੿ ೙ਃ
    

    View Slide

27. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    DEPLOYMENT
    

    View Slide

28. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    DEPLOYMENT
    GitHub Pages + CloudFlare
    GitHub Pages۽ ߓನೞҊ CloudFlare CDNਸ ഝਊೞৈ ࢿמ ୭੸ച
    

    View Slide

29. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    - GitHub / BitBucket / GitLabҗ ҅੿ োز ߂ ए਍ ೐۽ં౟ ഐझ౴ ઁҕ
    - ޖܐ۽ ੹ࣁ҅ CDN ߂ SSL ੋૐࢲ ૑ࣘ੸ੋ ߓನ(Continuous Deployment) ઁҕ
    - ҕध API ߂ CLI بҳ ઁҕ
    DEPLOYMENT
    ࢎਊઁೠ
    ੗ࣁೠ ղਊ਷ netlify.comীࢲ ഛੋೡ ࣻ ੓णפ׮.
    A unified platform that automates your code to create high-performant,

    easily maintainable sites and web apps.
    ѐੋ بݫੋਸ ࣗਬೞҊ ੓যঠ ೞݴ, ֎੐ࢲߡܳ Netlify۽ ࢸ੿ ೙ਃ
    

    View Slide

30. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    DEPLOYMENT
    Netlify
    GitHubী ௏٘о সؘ੉౟غݶ Netlifyীࢲ ੗୓ CDNਸ ഝਊೞৈ ੗ز ߓನ
    

    View Slide

31. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    AWS ௿ۄ਋٘ ੋ೐ۄ ࢚ীࢲ ࢲ࠺झܳ ਍৔ೞח ҃਋
    DEPLOYMENT
    AWS S3 + CloudFront
    GitHub
    

    View Slide

32. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    GitHub৬ CloudFlareܳ ੉ਊೠ ਢ য೒ܻா੉࣌ ഐझ౴
    Netlifyܳ ੉ਊೠ ਢ য೒ܻா੉࣌ ഐझ౴
    DEMO
    

    View Slide

33. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    ࢲ࠺झ੄ ݾ੸ী ݏח ਢ ӝࣿ झఖਸ ࢶఖೞ੗
    ݾ੸җ ݏ׮ݶ ਢ ࢲ࠺झ ࢸ҅द JAMstackਸ Ҋ۰ೞ੗
    ࣁ࢚ જ਷ ҕ૞ ࢲ࠺झ ଵ ݆׮
    SUMMARY
    

    View Slide

34. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    2઱ ױਤ੄ झ೐ܽ౟ܳ ߄ఔਵ۽ গ੗ੌ ೐۽ࣁझ ૓೯
    ഥҊܳ ాೠ ૑ࣘ੸ੋ ѐߊ౱ ޙച ѐࢶ
    ೐۽ࣁझ੄ ѐࢶਸ ਤೠ ׮নೠ بҳ بੑ
    ಕয೐۽Ӓې߁ / ௏ܻ٘࠭ ૓೯
    RECRUITING
    ৬ ೣԋ ࢿ੢ೡ ѐߊ੗ܳ ଺णפ׮
    ੗ࣁೠ ղਊ਷ omnious.comਸ ߑޙ೧઱दѢա joinus@omnious.comਵ۽ ޙ੄ ઱दݶ ࢿब ࢿ੄Ԉ ׹߸ܻ٘ѷणפ׮.
    ࢲߡ ѐߊ੗
    MSA ӝ߈੄ ࢲߡ য೒ܻா੉࣌ ѐߊ ߂ ੋ೐ۄ ਍৔
    ਢ ѐߊ੗
    ݽ؍ ਢ য೒ܻா੉࣌ ѐߊ ߂ ਢ పझ౴ ੗زച
    ؘ੉ఠ ࢎ੉঱౭झ౟
    ؘ੉ఠ ࠙ࢳ ߂ ݽ؛݂. ؘ੉ఠ ౵੉೐ۄੋ ҳ୷
    ݠन۞׬ ূ૑פয
    ಁ࣌ ੉޷૑ ੋध/࠙ܨ ӝࣿ ߂ ୶ୌ ঌҊ્ܻ োҳ ѐߊ
    ਋ܻח ੉ۧѱ ੌ೧ਃ
    ഌఖ ߂ ࠂ૑
    8-10द ղ ੗ਯ ୹ృӔ / ઱ 1ഥ ܻݽ౟ Ӕޖ / ׮নೠ рध ઁҕ
    بࢲ ҳݒ ૑ਗ / ѐߊ੢࠺ ૑ਗ
    

    View Slide

35. Byungjin Park · posquit0.com · posquit0
    Copyright © 2017 All Rights Reserved.
    THE END
    PLEASE DON’T ASK TOO MUCH :)
    

    View Slide