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

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

Rights Reserved. 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 য়૑חѢ żŽೞח ࠗ࠙?

The Failure of Architecture

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

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

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

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

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

Rights Reserved. A BRIEF HISTORY OF WEB DEV Web Application - SPA(Single-page Application) - ௿ۄ੉঱౟ ٣߄੉झ੄ ࢿמ ೱ࢚җ ೣԋ ࢲߡ੄ ۽٘ܳ ௿ۄ੉঱౟ীѱ  ੹җೞৈ ࢲ࠺झ੄ ੹୓੸ੋ ࢿמ ೱ࢚ - APIࢲߡ৬ ాनೞৈ ؘ੉ఠܳ ಴അೞח ৉ೡਸ ࣻ೯ - 2015֙ PWA(Progressive Web Application) ߊ಴ by Google

Rights Reserved. HTML HTML

Rights Reserved. HTML + CSS HTML + CSS

Rights Reserved. HTML + CSS + JavaScript HTML + CSS + JS

Rights Reserved. WAS HTML + CSS + JS

Rights Reserved. WAS: 3-Tier HTML + CSS + JS

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

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

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.

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)ী ਬܻ

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

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ীࢲ ഛੋೡ ࣻ ੓णפ׮.

Rights Reserved. GitHub Pages + CloudFlare Netlify AWS S3 + CloudFront DEPLOYMENT

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!

Rights Reserved. DEPLOYMENT

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

Rights Reserved. DEPLOYMENT

Rights Reserved. DEPLOYMENT GitHub Pages + CloudFlare GitHub Pages۽ ߓನೞҊ CloudFlare CDNਸ ഝਊೞৈ ࢿמ ୭੸ച

Rights Reserved. - 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۽ ࢸ੿ ೙ਃ

Rights Reserved. DEPLOYMENT Netlify GitHubী ௏٘о সؘ੉౟غݶ Netlifyীࢲ ੗୓ CDNਸ ഝਊೞৈ ੗ز ߓನ

Rights Reserved. AWS ௿ۄ਋٘ ੋ೐ۄ ࢚ীࢲ ࢲ࠺झܳ ਍৔ೞח ҃਋ DEPLOYMENT AWS S3 + CloudFront GitHub

Rights Reserved. GitHub৬ CloudFlareܳ ੉ਊೠ ਢ য೒ܻா੉࣌ ഐझ౴ Netlifyܳ ੉ਊೠ ਢ য೒ܻா੉࣌ ഐझ౴ DEMO

Rights Reserved. ࢲ࠺झ੄ ݾ੸ী ݏח ਢ ӝࣿ झఖਸ ࢶఖೞ੗ ݾ੸җ ݏ׮ݶ ਢ ࢲ࠺झ ࢸ҅द JAMstackਸ Ҋ۰ೞ੗ ࣁ࢚ જ਷ ҕ૞ ࢲ࠺झ ଵ ݆׮ SUMMARY

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

Rights Reserved. THE END PLEASE DON’T ASK TOO MUCH :)

[GDG DevFest Seoul 2017] JAMstack이 GitHub와 Clou...

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

More Decks by Byungjin Park

Other Decks in Technology

Featured

Transcript