Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Byungjin Park
November 19, 2017

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

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

Byungjin Park

November 19, 2017
Tweet

More Decks by Byungjin Park

Other Decks in Technology

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ਸ ߑޙ೧઱दѢա [email protected]ਵ۽ ޙ੄ ઱दݶ ࢿब ࢿ੄Ԉ ׹߸ܻ٘ѷणפ׮.
    ࢲߡ ѐߊ੗
    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