個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011

Transcript

1. ݸਓϒϩάΛ
   Next.js + Headless WordPressʹ
   ੾Γସ͑ͨ࿩
   S h i f t e r M e e t u p 2 0 2 0 / 1 1 /4
   

   View Slide

2. Agenda
   • Why do I make my blog using Headless WP with Next.js
   • How did I made it
   • Why do we make a website using Headless WP
   

   View Slide

3. https://speakerdeck.com/hideokamoto/wordcamp-osaka-2019
   

   View Slide

4. Agenda
   • Why do I make my blog using Headless WP with Next.js
   • How did I made it
   • Why do we make a website using Headless WP
   

   View Slide

5. https://wp-kyoto.net/
   

   View Slide

6. WP-Kyoto
   • 5೥΄Ͳଓ͚͍ͯΔݸਓϒϩά࣮݉ݧ৔
   • EC2(t3.micro)Λ1ʙ2୆ಈ͔ͤΔఔ౓ͷΞΫηεɾऩӹ͸͋Δ
   • 2ʙ3೥લ͔ΒͣͬͱHeadless
   • WP -> React SPA -> React SSG (Next.js)
   • ͍Ζ͍ΖࡶͳͷͰίʔυ͸͍͍ͩͨprivate
   

   View Slide

7. ͳͥHeadlessʁ
   

   View Slide

8. View Slide

9. ؾܰʹനը໘ʹͳΔͷ͕
   ݏͩͬͨ
   

   View Slide

10. Generic WordPress is 1 or 2 Tier application
    • View / AppϨΠϠʔ + DBϨΠϠʔ
    • AppͰো֐͕ى͖ΔͱɺView΋ר͖ࠐ·ΕΔ
    • ʮϓϥάΠϯߋ৽ͨ͠Βਅͬനʹͳͬͨʂʯ
    • ؾܰʹ࣮ݧ͢ΔαΠτͰো֐ΛڪΕΔͷ͸ຊ຤స౗
    

    View Slide

11. Headless WordPress is 3 Tier application
    • View ϨΠϠʔ + AppϨΠϠʔ + DBϨΠϠʔ
    • Appʹґଘ͠ͳ͍ViewΛ࡞Ε͹ɺޙํͷো֐ʹר͖ࠐ·Εͳ͍
    • SSGͳΒ͹Ϗϧυ࣌ + AjaxͰ͔͠Appʹͭͳ͕ͳ͍
    • ʮߋ৽Ͱ͖ͳͯ͘΋ɺݱঢ়ҡ࣋͸Ͱ͖Δঢ়ଶʯͷ׬੒
    

    View Slide

12. ӡ༻໘
    

    View Slide

13. Run SSG in Netlify with webhook
    • JAMstack DeploymentϓϥάΠϯͰهࣄߋ৽࣌ʹWebhook࣮ߦ
    • Netlify͕GitHubʹ͋Διʔεʢmain branch)Λऔಘͯ͠Ϗϧυ
    • git push origin main / PR merge࣌ʹ΋Ϗϧυ͕࣮ߦ͞ΕΔ
    • WP ThemeΛGit؅ཧ͍ͯ͠Δ࣌ͱ͋·ΓมΘΒͳ͍
    • ൓ө·Ͱϥά͋ΔͷͰɺͦ͜͸ׂΓ੾Δ
    

    View Slide

14. Run SSG in Netlify with webhook is better?
    • هࣄߋ৽ͷ౓ʹϏϧυ͕૸ΔͷͰɺ࿈ଓߋ৽࣌ʹͪΐͬͱ͏͍͟
    • Netlify΍Circle CIͳͲ͸Ϗϧυ࣌ؒʹ੍ݶ͕͋Δ
    • ෆඞཁͳϏϧυ͕ଟ͍ͳΒɺWebhook࣮ߦΛखಈԽ͢΂͖͔΋
    • ·ͨ͸Netlify / Circle CI / AWS / GCPͳͲΛࡳଋͰԥΖ͏
    

    View Slide

15. Headless WordPress for personal blog
    • WP͕ࣄނͬͯ΋αΠτ͕མͪͳ͍ͷ͕Headless WP
    • WP͔ΒϏϧυWebhookΛ࣮ߦ͢Δඞཁ͕͋Δ
    • ݟͨ໨ͱத਎Λݸผ(Git / WP)؅ཧͰ͖ΔͷͰɺ߹͏ਓʹ͸߹͏
    

    View Slide

16. Agenda
    • Why do I make my blog using Headless WP with Next.js
    • How did I made it
    • Why do we make a website using Headless WP
    

    View Slide

17. ͳͥNext.jsʁ
    

    View Slide

18. ࣾ಺ͰGatsby͹͔Γ
    ࿩୊ʹͳ͔ͬͯͨΒ
    

    View Slide

19. Next.js or Gatsby (Similar to Nuxt.js or Gridsome)
    • Gatsby(Gridsome)͸੩తαΠτੜ੒͕ϝΠϯ
    • Next.js(Nuxt.js)͸ϑϧελοΫͰɺSSR΍API࡞੒΋Մೳ
    • σʔλऔಘॲཧ / ϧʔςΟϯά / ϓϥάΠϯʹେ͖Ίͷ͕ࠩ͋Δ
    • WPͩͱɺςʔϚ࡞੒_s͔SageͲ͔ͬͪͭ͏ʁʹ͍͔ۙ΋
    

    View Slide

20. Next.js Gatsby
    

    View Slide

21. WordPressαʔόʔ͸ʁ
    

    View Slide

22. WordPress for Headless WP
    • ͍Ζ͍ΖׂΓ੾ͬͨӡ༻ʹͳΔ
    • ύʔϚϦϯΫ / ϓϨϏϡʔ / ςʔϚػೳ͸์غ
    • WP API / Block Editor / Build / ଟݴޠԽͷͨΊͷϓϥάΠϯબఆ
    • ϑϧϚωʔδυϗεςΟϯάΛ࢖ͬͯAPI as a Serviceʹ͠Α͏
    

    View Slide

23. How to make a Headless WordPress site
    • WordPress͸ʮ؅ཧը໘෇͖APIαʔόʔʯͩͱׂΓ੾Δ
    • React or VueɺGatsby(Gridsome) or Next.js(Nuxt.js)͸޷Έ
    -> σʔλιʔε͕ෳ਺ͳΒGraphQL͕࢖͑ΔGatsbyͷํ͕Α͍͔΋
    • WP ThemeΛϑϧεΫϥονͰ࡞Δʹ͍ۙײ֮
    • ޙʑ͠ΜͲ͍ͷͰɺؤுͬͯTypeScript΍Ζ͏
    

    View Slide

24. Agenda
    • Why do I make my blog using Headless WP with Next.js
    • How did I made it
    • Why do we make a website using Headless WP
    

    View Slide

25. JAMStack(Headless)ͷϝϦοτ
    ʮJavaScriptͰ͋Δ͜ͱʯ
    

    View Slide

26. JAMStack(Headless)ͷσϝϦοτ
    ʮJavaScriptͰ͋Δ͜ͱʯ
    

    View Slide

27. Case: Bootstrap with WordPress
    …
    
    
    
    
    Hello, world!
    Learn more
    
    
    .col-md-1
    .col-md-1
    
    

    View Slide

28. Case: Bootstrap with React
    import React from 'react';
    import { Jumbotron, Button, Row, Col } from 'reactstrap';
    export const App: FC = () => (
    <>
    
    Hello, world!
    Learn More
    
    
    .col
    
    >
    )
    

    View Slide

29. Case: Bootstrap with WordPress
    …
    
    
    
    
    Hello, world!
    
    Learn
    more
    
    
    
    .col-md-1
    .col-md-1
    
    import React from 'react';
    import { Jumbotron, Button, Row, Col } from 'reactstrap';
    export const App: FC = () => (
    <>
    
    Hello, world!
    
    Learn More
    
    
    
    .col
    
    >
    )
    

    View Slide

30. JS Frontend framework can IMPORT components
    • WordPress ThemeͰ͸ɺϚʔΫΞοϓͷίϐϖ͕ඞཁͩͬͨ
    • ReactͳͲͰ͸ɺComponentͷImportͰར༻Ͱ͖Δ
    • ࣗࣾͷUIίϯϙʔωϯτूΛϥΠϒϥϦԽ͢Δ͜ͱͰɺ
    ෳ਺ͷϓϩδΣΫτͰϚʔΫΞοϓ / CSSΛ࠶ར༻Ͱ͖Δ
    

    View Slide

31. D e s i g n s y s t e m s f o r c o m p a n y o r S a a S
    • Google: Material Design
    • Twitter: Bootstarp
    • Alibaba: Ant Design
    • AWS: NorthStar
    • Digitalcube: Galaxy
    

    View Slide

32. W P T h e m e
    • HTML / JS / CSS / PHP / SQL
    • Component͸εχϖοτͷίϐϖ
    • σϓϩΠࣗಈԽ͕ͪΐͬͱखؒ
    • طଘͷςʔϚΛར༻Ͱ͖Δ
    • ͦ΋ͦ΋ຖճ࡞Δඞཁ΋ͳ͍
    J A M s t a c k F ro n t e n d
    • HTML / CSS / JavaScript / JS and JS
    • Component͸importͰ࠶ར༻
    • ਺ΫϦοΫͰࣗಈσϓϩΠઃఆՄ
    • طଘͷςʔϚ͕ͦ΋ͦ΋ͳ͍ʹ͍ۙ
    • جຊతʹຖճεΫϥον
    

    View Slide

33. Headless WordPress frontend is…
    Full scratch WordPress Theme
    

    View Slide

34. Headless WordPress͕޲͍͍ͯΔͱࢥ͏৚݅
    • ϑϧεΫϥονͰαΠτΛߏங͍ͯ͠Δ
    • JavaScript(Ͱ͖Ε͹TypeScript)͕ॻ͚Δ
    • σβΠϯγεςϜ / ΨΠυϥΠϯ͕͋ΔνʔϜ
    • PWA / Native APP / LIFF(LINE Frontend Framework)ͳͲʹల։
    • ՝ۚϝσΟΞͳͲɺas a ServiceԽΛݕ౼͍ͯ͠Δ
    

    View Slide

35. Headless WordPress͕޲͍͍ͯͳ͍ͱࢥ͏৚݅
    • ςʔϚΧελϚΠζɾࢠςʔϚͰߏங
    • jQueryͰ͢ΒͳΔ΂͘৮Γͨ͘ͳ͍ͱࢥ͍ͬͯΔ
    • Ҋ݅͝ͱʹσβΠϯ΍ϨΠΞ΢τ͕มΘΓ΍͍͢
    • ͱʹ͔͘ૉૣ͘αΠτΛϩʔϯν͍ͨ͠
    • LP΍ΩϟϯϖʔϯαΠτͳͲɺण໋͕୹ΊͳαΠτ
    

    View Slide

36. ʮͦͷυϦϧͰͲΜͳ͕݀࡞ΕΔ͔ʯΛߟ͑Δ
    • ϑϩϯτͷσϓϩΠճ਺͕ଟ͍ͳΒɺ
    ViewͱAppΛ෼཭ͨ͠ํ͕ӨڹൣғΛߜΕΔ
    • App / DB͕མͪͯ΋αΠτ͕མͪͳ͍ͷ͸SSGͷಛ௃
    • ʮComponentͷϥΠϒϥϦԽʯͰσβΠϯͷඪ४Խ͕͠΍͍͢
    • WPςʔϚͷΑ͏ʹ਺ΫϦοΫͰ؆୯ʹαΠτ͸࡞Εͳ͍
    • ʮ࠶ར༻͍ͨ͠ / Ͱ͖ΔView͕͋Δ͔ʯ͕͓ͦΒ͘෼ਫྮ
    

    View Slide

37. Thanks you!
    • Why do I make my blog using Headless WP with Next.js
    • How did I made it
    • Why do we make a website using Headless WP
    Shifter
    https://getshifter.io
    Twitter
    @motchi0214
    GitHub
    https://github.com/hideokamoto/
    

    View Slide

38. A P P E N D I X
    ͜ ͏ ͍ ͏ ͜ ͱ ΋Ͱ ͖ Δ
    • Ionic / CapacitorಋೖͰ
    Native friendlyʹ
    • AlgoliaಋೖͰWordPress΁ͷ
    ௚઀ΞΫηεΛθϩʹ
    • Cognito / Auth0 + StripeͰ
    Paywallͷ࣮ݧͱ͔΋͍ͨ͠
    

    View Slide

39. Appendix: Trial resources
    • Example(SSG): Gatsby WordPress
    https://github.com/getshifter/example-gatsby-capacitor-wordpress
    • Example(SSR): Frontity
    https://github.com/getshifter/example-frontity-wordpress
    • Example(SPA): Ionic React with Capacitor
    https://github.com/getshifter/example-ionic-react-capacitor
    • Starter theme : Gatsby for WP with TypeScript
    https://github.com/getshifter/gatsby-starter-wordpress-typescript
    

    View Slide

40. Thanks you!
    • Why do I make my blog using Headless WP with Next.js
    • How did I made it
    • Why do we make a website using Headless WP
    Shifter
    https://getshifter.io
    Twitter
    @motchi0214
    GitHub
    https://github.com/hideokamoto/
    

    View Slide