ジャムジャムJamstack勉強会
esa + VuePress Ͱ Jamstack ͳυΩϡϝϯταΠτΛ࡞Δ@KawamataRyo2021/09/30δϟϜδϟϜʂʂJamstack
View Slide
ࣗݾհ
KawamataRyo🔥 ݩফ࢜👨💻 Engineer @LAPRAS inc❤ TypeScript, Vue, Firebase, Elixir
ࠓ͢͜ͱ 💬
ʴesa Λ CMS ʹ VuePress Ͱ࡞ͬͨJamstack αΠτͷհ + ࣮ͷϙΠϯτ
ʮใΛҭͯΔʯͱ͍͏ࢥͷMarkdownͰॻ͚ΔυΩϡϝϯτπʔϧɻ๛ͳwebhook͋ΓΤϯδχΞϑϨϯυϦʔɻesaͱʁ
Vue.jsΛར༻ͨ͠੩తαΠτδΣωϨʔλɻVue.jsؔ࿈ͷެࣜυΩϡϝϯτͰྑ͘ར༻͞Εɺٕज़υΩϡϝϯτʹ͍ͨςʔϚΛ࣋ͭɻVuePressͱʁ
ͳͥesaΛCMSʹʁ🐥
ɾυΩϡϝϯτཧͱͯ͠esaΛར༻͍ͯͨ͠ͷͰɺࣥචϝϯόʔ͕esaʹ׳Ε͍ͯͨɾΤϯδχΞͷհೖΛ࠷খݶʹαΠτͷίϯςϯπ࡞ͷͱɺ༰ߋ৽ͷ༰қ͞Λ࣮ݱ͔ͨͬͨ͠ɾesaͷWeb hook͕ͱͯศར
ͳͥVuePressʁ📗
ɾσβΠϯௐͷΛ࠷খʹ͔ͨͬͨ͠ʢVuePressͷૉͷςʔϚ͕͍ͬͯΔʣɾVuePress V2͕ެ։͞Ε͍ͯͨͷͰࢼ͔ͨͬͨ͠
࡞ͬͨͷʁ 🛠
LAPRAS৫ϋϯυϒοΫhttps://organization-handbook.lapras.com/
γεςϜߏ 🌐
esaͷwebhookͰGitHubʹϑΝΠϧΛ࡞GitHub ActionsͰVuePressΛϏϧυ͠ɺGitHub Pagesʹஔ
DEMO
࣮ͷϙΠϯτ
ᶃ Ϗϧυ࣌ʹಠࣗʹϖʔδΛੜ
ࠔͬͨͱ͜Ζ 😔
• VuePressͷݸผϖʔδͷURL `/ϑΝΠϧ໊.html` ͱͳΔ• esaʹग़ྗ͞ΕΔϚʔΫμϯϑΝΠϧͷϑΝΠϧ໊͕ɹɹɹɹɹɹɹ`هࣄID.html.md`ͳͷͰ`هࣄID.html.html`ͱͳΓඍົ🚫 URL͕esaͷهࣄID.html.htmlͱͳΔ
• VuePressͷݸผϖʔδઃఆFrontMatter• esaͷੜ͢ΔFrontMatterVuePressఆͷFrontMatterͱඍົʹҟͳΔ🚫 FrontMatterΛมߋग़དྷͳ͍esaඪ४ͷFrontMatter
Ͳ͏͢Δ..🤔
esaͷੜϑΝΠϧΛΘͣಠࣗʹϖʔδΛੜ͢ΔPluginΛ࡞Δ͜ͱͰճආ💪
• VuePress`docs/foo` ԼʹmdϑΝΠϧΛՃ͢ΕϏϧυ࣌ʹࣗಈͰಡΈऔͬͯɺΑ͠ͳʹϖʔδΛ࡞ͬͯ͘ΕΔ௨ৗͷϖʔδੜ`/contents/bar.html`ͱ`/contents/foo.html`͕ੜ͕ɺɺ͜Εͩͱલड़ͷ͕..
esaͷwebhookͰͷϑΝΠϧ࡞ઌΛdocsԼͱผʹࢦఆɻVuePressͷϏϧυϑοΫͰϑΝΠϧΛಡΈऔΓɺAPIͰϑΝΠϧΛੜ͢ΔɻಠࣗʹϖʔδੜVuePressͷࣗಈಡΈࠐΈͷରͱͤͣɺϏϧυϑοΫͰɺfs.readFileSync()ͰϑΝΠϧΛಡΈࠐΉϖʔδ༰Λࣗ༝ʹΧελϚΠζͰ͖Δʂ
Pluginͷ࣮ʢesaͷੜϑΝΠϧ͔Βͷσʔλநग़ʣ
ࢦఆσΟϨΫτϦͷmd͔ΒfrontMatterͱίϯςϯπͷऔಘʢؔͷৄࡉZennهࣄʣPluginͷ࣮ʢesaͷੜϑΝΠϧ͔Βͷσʔλநग़ʣ
frontMatterͱPathΛࢦఆPluginͷ࣮ʢesaͷੜϑΝΠϧ͔Βͷσʔλநग़ʣ
Pluginͷ࣮ʢϖʔδͷੜʣ
Ϗϧυ࣌ͷϑοΫʹొmdϑΝΠϧ͔ΒϖʔδใΛऔಘʢલड़ͷؔʣPluginͷ࣮ʢϖʔδͷੜʣ
ϖʔδใ͔ΒݸผϖʔδΛ࡞࡞ͨ͠ϖʔδΛappʹొPluginͷ࣮ʢϖʔδͷੜʣ
Pluginͷ࣮ʢPluginͷొʣ
Pluginͷ࣮ʢPluginͷొʣύεΛ͚ͩ͢
ᶄ ಈతʹαΠυϦϯΫΛ࡞
• VuePressͷαΠυϦϯΫconfigʹจࣈྻͰఆٛ͢Δ• esaͷهࣄՃͷλΠϛϯάͰɺconfigΛຖճॻ͖͢ͷ໘🚫 αΠυϦϯΫ͕ݻఆ
Ϗϧυ࣌ʹesaͷϑΝΠϧΛ͔ΒαΠυϦϯΫͷઃఆΛੜ͢ΔεΫϦϓτͰղܾʂ💪
௨ৗͷαΠυϦϯΫͷઃఆ`/contents`ϖʔδʹ`/contents/one.html`ͱ`/contents/bar.html`ͷαΠυϦϯΫ͕ੜ͞ΕΔ
αΠυϦϯΫͷจࣈྻੜͷ࣮
αΠυϦϯΫͷจࣈྻੜͷ࣮ࢦఆσΟϨΫτϦͷϑΝΠϧΛͯ͢ಡΈऔΓɺmdϑΝΠϧͷΈΛநग़
αΠυϦϯΫͷจࣈྻੜͷ࣮frontMatterʹهࡌͷtitleͷྻʹม
αΠυϦϯΫͷจࣈྻੜͷ࣮λΠτϧจࣈྻͰฒͼସ͑※ ࣄલʹesaهࣄλΠτϧͷઌ಄ʹ߲൪߸Λ͚ͯΒ͏ࣥචϧʔϧ
αΠυϦϯΫͷจࣈྻੜͷ࣮VuePressͷαΠυϦϯΫͷઃఆܗࣜʹௐͯ͠Ϧλʔϯ
αΠυϦϯΫͷઃఆੜͨ͠จࣈྻΛαΠυόʔʹઃఆ
ᶅ ϖʔδͷඇදࣔʹରԠ͢Δ
• esa্ͰwebhookରͷهࣄΛΞʔΧΠϒ or আͯ͠ɺGitHub্ͷMarkdownϑΝΠϧআ͞Εͳ͍..• frontMatterͷpublishedมߋ͞Εͳ͍🚫 esaͷwebhook͕هࣄআʹରԠ͍ͯ͠ͳ͍ΞʔΧΠϒɾআͯ͠trueͷ··
ϖʔδɾαΠυϦϯΫੜ࣌ʹλΠτϧΛఆ͠ϑΟϧλʔ͢Δ͜ͱͰղܾ
ϑΟϧλʔॲཧͷ࣮ϑΟϧλʔؔϖʔδੜͷؔ
ϑΟϧλʔॲཧͷ࣮ϑΟϧλʔؔϖʔδੜͷؔ[archived]ͱ͍͏จࣈྻؚ͕·ΕΔ͔Ͳ͏͔ͷఆʢࣄલʹআ͢ΔهࣄλΠτϧʹ[archived]Λ͚Δͱௐʣ
ϑΟϧλʔॲཧͷ࣮ϑΟϧλʔؔϖʔδੜͷؔ ϖʔδੜ࣌ʹλΠτϧΛఆͯ͠আهࣄؒҾ͘※ αΠυϦϯΫಉ༷
ৼΓฦΓ
Keep👍
• εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨ• ࣮ΠϯϑϥؚΊ2ఔ• JamstackͰߏ͕γϯϓϧͳͷͰϝϯςָ͕• ࣮ࡍʹฤू͢ΔϑΝΠϧϑΝΠϧ• αʔόʔ͕བྷ·ͳ͍• ϖʔδͷՃɾमਖ਼ָ͕• ΤϯδχΞ͕ؔ༩͢Δ͜ͱͳ͘Ճɾमਖ਼͕ਐΉ
• εϐʔυײͷ͋Δ։ൃ͕Ͱ͖ͨධ্ʑ👍ʢྑ͔ͬͨ..ʣ
Problem 📛
• ฤूݖݶͷཧ͕ग़དྷ͍ͯͳ͍• esaʹϝϯόʔͷݖݶཧػೳͳ͍ͷͰɺฤूऀΛ੍ݶ͢Δ͜ͱ͕ग़དྷͳ͍• ϦϦʔεཧΛ͍ͯ͠ͳ͍• ݱঢ়esaฤू -> ଈσϓϩΠͱͳ͍ͬͯΔɻஸೡʹΔͳΒεςʔδϯάڥͷ࡞ɺϦϦʔεϒϥϯνͷཧ͕ඞཁ
·ͱΊ
• एׯͷௐඞཁ͕ͩesaΛCMSʹ͢Δ͜ͱՄೳ• ࣥචϝϯόʔ͕͍͍͢πʔϧͰ࡞Δͱࣥච͕ḿΔ• VuePress ૉఢ• Jamstack ࠷ߴ
͓ΘΓ
https://zenn.dev/ryo_kawamata/articles/4bf52f97165058※εϥΠυͷ༰ɾίʔυҎԼهࣄʹ·ͱΊͯ·͢