esa+VuePressでJamstackなドキュメントサイトを作る / Build Jamstack site with VuePress & esa

ジャムジャムJamstack勉強会

Transcript

1. esa + VuePress Ͱ Jamstack ͳ
   
   
   υΩϡϝϯταΠτΛ࡞Δ
   @KawamataRyo
   2021/09/30δϟϜδϟϜʂʂJamstack
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. KawamataRyo
   
   
   🔥 ݩফ๷࢜
   
   
   👨💻 Engineer @LAPRAS inc
   
   
   ❤ TypeScript, Vue, Firebase, Elixir
   

   View Slide

4. ࠓ೔࿩͢͜ͱ 💬
   

   View Slide

5. ʴ
   esa Λ CMS ʹ VuePress Ͱ࡞ͬͨ
   
   
   Jamstack αΠτͷ঺հ + ࣮૷ͷϙΠϯτ
   

   View Slide

6. ʮ৘ใΛҭͯΔʯͱ͍͏ࢥ૝ͷMarkdownͰॻ͚ΔυΩϡϝϯτπʔϧɻ
   
   
   ๛෋ͳwebhook΋͋ΓΤϯδχΞϑϨϯυϦʔɻ
   esaͱ͸ʁ
   

   View Slide

7. Vue.jsΛར༻ͨ͠੩తαΠτδΣωϨʔλɻVue.jsؔ࿈ͷެࣜυΩϡϝϯ
   τ౳Ͱྑ͘ར༻͞Εɺٕज़υΩϡϝϯτʹ޲͍ͨςʔϚΛ࣋ͭɻ
   VuePressͱ͸ʁ
   

   View Slide

8. ͳͥesaΛCMSʹʁ🐥
   

   View Slide

9. ɾυΩϡϝϯτ؅ཧͱͯ͠esaΛར༻͍ͯͨ͠ͷ
   Ͱɺࣥචϝϯόʔ͕esaʹ׳Ε͍ͯͨ
   
   
   ɾΤϯδχΞͷհೖΛ࠷খݶʹαΠτͷίϯςϯ
   π࡞੒ͷ଎౓ͱɺ಺༰ߋ৽ͷ༰қ͞Λ࣮ݱͨ͠
   ͔ͬͨ
   
   
   ɾesaͷWeb hook͕ͱͯ΋ศར
   

   View Slide

10. ͳͥVuePressʁ📗
    

    View Slide

11. ɾσβΠϯௐ੔ͷ޻਺Λ࠷খʹͨ͠
    ͔ͬͨʢVuePressͷૉͷςʔϚ͕
    ੔͍ͬͯΔʣ
    
    
    ɾVuePress V2͕ެ։͞Ε͍ͯͨͷͰ
    ࢼ͔ͨͬͨ͠
    

    View Slide

12. ࡞ͬͨ΋ͷ͸ʁ 🛠
    

    View Slide

13. LAPRAS૊৫ϋϯυϒοΫ
    https://organization-handbook.lapras.com/
    

    View Slide

14. γεςϜߏ੒ 🌐
    

    View Slide

15. esaͷwebhookͰGitHubʹϑΝΠϧΛ࡞੒
    
    
    GitHub ActionsͰVuePressΛϏϧυ͠ɺGitHub Pagesʹ഑ஔ
    

    View Slide

16. DEMO
    

    View Slide

17. ࣮૷ͷϙΠϯτ
    

    View Slide

18. ᶃ Ϗϧυ࣌ʹಠࣗʹϖʔδΛੜ੒
    

    View Slide

19. ࠔͬͨͱ͜Ζ 😔
    

    View Slide

20. • VuePressͷݸผϖʔδͷURL͸ `/ϑΝΠϧ໊.html` ͱͳΔ
    
    
    • esaʹग़ྗ͞ΕΔϚʔΫμ΢ϯϑΝΠϧͷϑΝΠϧ໊͕ɹɹɹɹɹɹɹ`
    هࣄID.html.md`ͳͷͰ`هࣄID.html.html`ͱͳΓඍົ
    
    
    🚫 URL͕esaͷهࣄID.html.htmlͱͳΔ
    

    View Slide

21. • VuePressͷݸผϖʔδઃఆ͸
    FrontMatter
    
    
    • esaͷੜ੒͢ΔFrontMatter͸
    VuePress૝ఆͷFrontMatterͱඍົ
    ʹҟͳΔ
    
    
    🚫 FrontMatterΛมߋग़དྷͳ͍
    esaඪ४ͷFrontMatter
    

    View Slide

22. Ͳ͏͢Δ..🤔
    

    View Slide

23. esaͷੜ੒ϑΝΠϧΛ
    
    
    ௚઀࢖ΘͣಠࣗʹϖʔδΛੜ੒͢Δ
    
    
    PluginΛ࡞Δ͜ͱͰճආ💪
    

    View Slide

24. • VuePress͸`docs/foo` ഑ԼʹmdϑΝΠϧΛ௥Ճ͢Ε͹Ϗϧυ࣌ʹࣗಈ
    ͰಡΈऔͬͯɺΑ͠ͳʹϖʔδΛ࡞ͬͯ͘ΕΔ
    ௨ৗͷϖʔδੜ੒
    `/contents/bar.html`ͱ
    
    
    `/contents/foo.html`͕ੜ੒
    ͕ɺɺ͜Εͩͱલड़ͷ໰୊͕..
    

    View Slide

25. esaͷwebhookͰͷϑΝΠϧ࡞੒ઌΛdocs഑Լͱ͸ผʹࢦఆɻ
    
    
    VuePressͷϏϧυϑοΫͰϑΝΠϧΛಡΈऔΓɺ
    
    
    APIͰϑΝΠϧΛੜ੒͢Δɻ
    ಠࣗʹϖʔδੜ੒
    VuePressͷࣗಈಡΈࠐΈͷର৅ͱͤͣɺ
    
    
    ϏϧυϑοΫͰɺfs.readFileSync()
    
    
    ͰϑΝΠϧΛಡΈࠐΉ
    ϖʔδ಺༰Λࣗ༝ʹΧελϚΠζͰ͖Δʂ
    

    View Slide

26. Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ
    

    View Slide

27. ࢦఆσΟϨΫτϦͷmd͔Β
    
    
    frontMatterͱίϯςϯπͷऔಘ
    
    
    ʢؔ਺ͷৄࡉ͸Zennهࣄʣ
    Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ
    

    View Slide

28. frontMatterͱ
    
    
    PathΛࢦఆ
    Pluginͷ࣮૷ʢesaͷੜ੒ϑΝΠϧ͔Βͷσʔλநग़ʣ
    

    View Slide

29. Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ
    

    View Slide

30. Ϗϧυ࣌ͷϑοΫʹొ࿥
    mdϑΝΠϧ͔Βϖʔδ৘ใΛ
    औಘʢલड़ͷؔ਺ʣ
    Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ
    

    View Slide

31. ϖʔδ৘ใ͔ΒݸผϖʔδΛ࡞੒
    ࡞੒ͨ͠ϖʔδΛappʹొ࿥
    Pluginͷ࣮૷ʢϖʔδͷੜ੒ʣ
    

    View Slide

32. Pluginͷ࣮૷ʢPluginͷొ࿥ʣ
    

    View Slide

33. Pluginͷ࣮૷ʢPluginͷొ࿥ʣ
    ύεΛ౉͚ͩ͢
    

    View Slide

34. ᶄ ಈతʹαΠυϦϯΫΛ࡞੒
    

    View Slide

35. ࠔͬͨͱ͜Ζ 😔
    

    View Slide

36. • VuePressͷαΠυϦϯΫ͸con
    fi
    gʹ
    จࣈྻͰఆٛ͢Δ
    
    
    • esaͷهࣄ௥ՃͷλΠϛϯάͰɺ
    con
    fi
    gΛຖճॻ͖௚͢ͷ͸໘౗
    🚫 αΠυϦϯΫ͕ݻఆ
    

    View Slide

37. Ͳ͏͢Δ..🤔
    

    View Slide

38. Ϗϧυ࣌ʹesaͷϑΝΠϧΛ͔Β
    
    
    αΠυϦϯΫͷઃఆΛੜ੒͢Δ
    
    
    εΫϦϓτͰղܾʂ💪
    

    View Slide

39. ௨ৗͷαΠυϦϯΫͷઃఆ
    `/contents`ϖʔδʹ
    
    
    `/contents/one.html`ͱ
    
    
    `/contents/bar.html`ͷ
    
    
    αΠυϦϯΫ͕ੜ੒͞ΕΔ
    

    View Slide

40. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    

    View Slide

41. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    ࢦఆσΟϨΫτϦͷϑΝΠϧΛ
    
    
    ͢΂ͯಡΈऔΓɺmdϑΝΠϧͷΈ
    Λநग़
    

    View Slide

42. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    frontMatterʹهࡌͷtitleͷ഑ྻ
    
    
    ʹม׵
    

    View Slide

43. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    λΠτϧจࣈྻͰฒͼସ͑
    
    
    ※ ࣄલʹesaهࣄλΠτϧͷઌ಄ʹ
    ߲൪߸Λ෇͚ͯ΋Β͏ࣥචϧʔϧ
    

    View Slide

44. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    VuePressͷαΠυϦϯΫͷઃఆܗࣜ
    ʹௐ੔ͯ͠Ϧλʔϯ
    

    View Slide

45. αΠυϦϯΫͷจࣈྻੜ੒ͷ࣮૷
    VuePressͷαΠυϦϯΫͷઃఆܗࣜ
    ʹௐ੔ͯ͠Ϧλʔϯ
    

    View Slide

46. αΠυϦϯΫͷઃఆ
    ੜ੒ͨ͠จࣈྻΛ
    
    
    αΠυόʔʹઃఆ
    

    View Slide

47. ᶅ ϖʔδͷඇදࣔʹରԠ͢Δ
    

    View Slide

48. ࠔͬͨͱ͜Ζ 😔
    

    View Slide

49. • esa্Ͱwebhookର৅ͷهࣄΛΞʔ
    ΧΠϒ or ࡟আͯ͠΋ɺGitHub্ͷ
    MarkdownϑΝΠϧ͸࡟আ͞Εͳ͍..
    
    
    • frontMatterͷpublished΋มߋ͞Ε
    ͳ͍
    🚫 esaͷwebhook͕هࣄ࡟আʹରԠ͍ͯ͠ͳ͍
    ΞʔΧΠϒɾ࡟আͯ͠΋
    
    
    trueͷ··
    

    View Slide

50. Ͳ͏͢Δ..🤔
    

    View Slide

51. ϖʔδɾαΠυϦϯΫੜ੒࣌ʹ
    
    
    λΠτϧΛ൑ఆ͠ϑΟϧλʔ͢Δ
    
    
    ͜ͱͰղܾ
    

    View Slide

52. ϑΟϧλʔॲཧͷ࣮૷
    ϑΟϧλʔؔ਺
    ϖʔδੜ੒ͷؔ਺
    

    View Slide

53. ϑΟϧλʔॲཧͷ࣮૷
    ϑΟϧλʔؔ਺
    ϖʔδੜ੒ͷؔ਺
    [archived]ͱ͍͏จࣈྻ͕
    
    
    ؚ·ΕΔ͔Ͳ͏͔ͷ൑ఆ
    
    
    ʢࣄલʹ࡟আ͢Δهࣄ͸λΠτϧ
    ʹ[archived]Λ෇͚Δͱௐ੔ʣ
    

    View Slide

54. ϑΟϧλʔॲཧͷ࣮૷
    ϑΟϧλʔؔ਺
    ϖʔδੜ੒ͷؔ਺ ϖʔδੜ੒࣌ʹλΠτϧΛ
    
    
    ൑ఆͯ͠࡟আهࣄ͸ؒҾ͘
    
    
    ※ αΠυϦϯΫ΋ಉ༷
    

    View Slide

55. ৼΓฦΓ
    

    View Slide

56. Keep👍
    

    View Slide

57. • εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ
    
    
    • ࣮૷͸ΠϯϑϥؚΊ2೔ఔ౓
    
    
    • JamstackͰߏ੒͕γϯϓϧͳͷͰϝϯςָ͕
    
    
    • ࣮ࡍʹฤू͢ΔϑΝΠϧ͸਺ϑΝΠϧ
    
    
    • αʔόʔ͕བྷ·ͳ͍
    
    
    • ϖʔδͷ௥Ճɾमਖ਼ָ͕
    
    
    • ΤϯδχΞ͕ؔ༩͢Δ͜ͱͳ͘௥Ճɾमਖ਼͕ਐΉ
    

    View Slide

58. • εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ
    
    
    ධ൑΋্ʑ👍ʢྑ͔ͬͨ..ʣ
    

    View Slide

59. Problem 📛
    

    View Slide

60. • ฤूݖݶͷ؅ཧ͕ग़དྷ͍ͯͳ͍
    
    
    • esaʹ͸ϝϯόʔͷݖݶ؅ཧػೳ͸ͳ͍ͷͰɺฤूऀΛ੍ݶ͢
    Δ͜ͱ͕ग़དྷͳ͍
    
    
    • ϦϦʔε؅ཧΛ͍ͯ͠ͳ͍
    
    
    • ݱঢ়͸esaฤू -> ଈσϓϩΠͱͳ͍ͬͯΔɻஸೡʹ΍ΔͳΒε
    ςʔδϯά؀ڥͷ࡞੒΍ɺϦϦʔεϒϥϯνͷ؅ཧ͕ඞཁ
    

    View Slide

61. ·ͱΊ
    

    View Slide

62. • एׯͷௐ੔͸ඞཁ͕ͩesaΛCMSʹ͢Δ͜ͱ͸Մೳ
    
    
    • ࣥචϝϯόʔ͕࢖͍΍͍͢πʔϧͰ࡞Δͱࣥච͕ḿΔ
    
    
    • VuePress ૉఢ
    
    
    • Jamstack ࠷ߴ
    

    View Slide

63. ͓ΘΓ
    

    View Slide

64. https://zenn.dev/ryo_kawamata/articles/4bf52f97165058
    ※εϥΠυͷ಺༰ɾίʔυ͸ҎԼهࣄʹ΋·ͱΊͯ·͢
    

    View Slide