爆速サイトを爆速で作れるNetlify + Gatsby / Create fast site with netlify and gatsby

Transcript

1. ര଎αΠτΛര଎Ͱ࡞ΕΔ Netlify + Gatsby 2018.04.24 Roppongi.js #2 - @mottox2

2. Freelance web engineer in Roppongi @mottox2

3. #roppongijs ͜Μͳ΋ͷ࡞ͬͨ 1. Webhook 2. Pull 3. Build & Deploy

   http://gatsby-starter-esa.netlify.com/ υΩϡϝϯτ͕ߋ৽͞ΕͨΒ੩తαΠτ͕
 ు͖ग़͞ΕΔ΍ͭɻʢॴཁ࣌ؒ: 4 ࣌ؒʣ

4. #roppongijs ͦΕΑΓݟͯ͘Εʂ଎͍ͧʂ

5. #roppongijs esa.io • υΩϡϝϯτڞ༗αʔϏε
 e.g. Qiita:Team, Kibela • Webhook΍Web API͕༻ҙ͞Ε͍ͯΔ

   • ҰਓͰ࢖ͬͯΔ https://esa.io/

6. #roppongijs Netlify • ੩తαΠτͷϗεςΟϯάαʔϏεɻ https://netlify.com

7. #roppongijs • ੩తαΠτͷϗεςΟϯάαʔϏεɻ • Githubʹcommit͢Δ͚ͩͰDeploy • POSTϦΫΤετͰDeploy(Build hook) • ࣗ෼Ͱαʔόʔͷ໘౗ݟͳͯ͘Α͍

   Netlify

8. #roppongijs Gatsby • ΊͬͪΌߴ଎ͳ੩తαΠτδΣωϨʔλʔ https://www.gatsbyjs.org/

9. #roppongijs • ΊͬͪΌߴ଎ͳ੩తαΠτδΣωϨʔλʔ • reactjs.org΋Gatsby੡ • JS͚ͩͰ׬݁͢Δ • Preload, Inline

   CSS, React SPA͕σϑΥϧτͰ ಈ͘ͷͰΊͬͪΌ଎͍ʢᐌ͘ɺBlazing-fastʣ Gatsby

10. How Gatsby works

11. #roppongijs StaticFileੜ੒·ͰͷΠϝʔδ

12. #roppongijs Source • source-pluginΛೖΕGraphQLΛ࢖ͬͯݺͼग़͢ • WordPress, Markdown, ͦͷଞWeb API… •

    esa.ioͷplugin͸ͳ͔ͬͨͷͰࣗ࡞ͨ͠ • https://github.com/mottox2/gatsby- source-esa

13. #roppongijs View • ReactͰ࡞ΕΔɻ • GraphQLͰSourceͷ
 ݺͼग़͠

14. #roppongijs Build • ߴ଎ԽΛૂͬͨϑΝΠϧ
 ෼ׂ • Ϗϧυ͸ૣ͘ͳ͍ɻ • ࣗલͰ༻ҙ͠Α͏ͱ͸
 ࢥ͑ͳ͍ͷͰ࠷ߴ

15. #roppongijs Publish • Github Page΍NetlifyͳͲʹσϓϩΠ͍ͯ͠Δ ྫ͕ଟ͍ • ͦΕ΄Ͳ೉͍͜͠ͱΛ͍ͯ͠ͳ͍ͷʹߴ଎ͳ αΠτ͕࡞ΕΔɻ

16. In Real World

17. #roppongijs WordpressͷϑϩϯτͰ࢖͍͍ͨ • WordPressͷϑϩϯτΤϯυΛ෼཭͍ͨ͠ؾ ͕࣋ͪڧ͍ɻ • ͨͩߋ৽ͷ౓ʹϏϧυ͕ඞཁʹͳΔͷͰߋ৽ ස౓ͷߴ͍αΠτʹ͸޲͔ͳ͍ • ·ͨɺDataSource͕ڊେʹͳΔ΄ͲϏϧυ͕

    ஗͘ͳ͍ͬͯ͘ɻ

18. #roppongijs ݸਓͰ࢖͏ͷ͸Good Choice • ʮߋ৽ස౓͕ߴ͘ͳ͍ɺهࣄ਺΋ͦΕ΄Ͳʯ ͱ͍͏αΠτʹ͸޲͍͍ͯΔɻ • ϙʔτϑΥϦΦɾݸਓϒϩάɾυΩϡϝϯςʔ γϣϯͳͲʹ૬ੑ͕Α͍ɻ •

    ࡞Δ͚ͩͳΒςϯϓϨʔτ͕స͕ͬͯΔͷͰ 30෼͋Ε͹ެ։·Ͱग़དྷ·͢ɻ

19. Thanks