Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Movable Type を Headless CMS として活用した Jamstack開発手法

Avatar for redamoon redamoon
November 13, 2021
170

Movable Type を Headless CMS として活用した Jamstack開発手法

2021年11月13日(土)にオンライン開催されたMTDDC Meetup TOKYO 2021のセッション資料です。

Avatar for redamoon

redamoon

November 13, 2021
Tweet

Transcript

  1. Pro fi le ؔޱ ༐थ גࣜձࣾHAMWORKS ϑϩϯτΤϯυΤϯδχΞ ޷͖ͳMTMLɿ<mt:SetVarTemplate> झຯɿԂܳɾDIY ϋογϡλάɿ#ԂδχΞ,

    #ԂܳΤϯδχΞ ஶॻɿϓϩϑΣογϣφϧWebϓϩάϥϛϯά Vue.js MySiteɿhttps://www.redamoon.net/ Twitterɿ@redamoon
  2. "HFOEB • Headless CMS ͱ Jamstack ͱ͸ʁ • Movable Type

    ͷ Data APIͱ͸ʁ • ੩తαΠτδΣωϨʔλͷར༻ • MTMLͷ՝୊ͱ໰୊఺ • Data API Λ׆༻ͨ͠ Jamstack ͷ։ൃϫʔΫϑϩʔ • ࣄྫ঺հ
  3. )FBEMFTT$.4"1*ͱදࣔͷ෼཭ CMSαʔό WEBαʔό Database API Template CMS Image/File CSS JavaScript

    HTML ैདྷͷCMSߏ੒ CMS؅ཧ͍ͯ͠ΔςϯϓϨʔτ࢖͍ɺWebαʔό΁഑৴/ಉҰᝑମͷυΩϡϝϯτϧʔτͰ؅ཧ
  4. )FBEMFTT$.4"1*ͱදࣔͷ෼཭ Headless CMS Ampliy / Vercel etc API CMS Image/File

    CSS JavaScript HTML σʔλΛCMSͰ؅ཧ͠ߋ৽͝ͱʹCI্ͰϏϧυΛߦ͍ϗεςΟϯάઌͱͯ͠S3΍VercelΛར༻ Git/CI Template (static generator)
  5. 3FBDU΍7VFKTͳͲͷϑϨʔϜϫʔΫΛ࢖͏ར఺ • ίϛϡχςΟ͕׆ൃɾࠃ಺໰ΘͣίϯτϦϏϡʔλʔ͕ଟ਺ • Weeklyμ΢ϯϩʔυ਺͕ଟ͍ • ϑϩϯτΤϯυͷ஌ݟ΍ issue ͷ΍ΓऔΓ͕ଟ͍ •

    ಠࣗϑϨʔϜϫʔΫΑΓ΋։ൃίετ͸཈͑ΒΕΔʢυΩϡϝϯτ͕͋ΔͨΊʣ • ίʔυϑΥʔϚοτͷॆ࣮ • LintʹΑΔૣظΤϥʔݕ஌͠΍͍͢ • ςετίʔυΛॻ͖΍͍͢؀ڥ • StoryBookͳͲͷπʔϧΛར༻͢Δ͜ͱͰσβΠϯγεςϜͱ࿈ܞ͕औΓ΍͍͢
  6. /FYUKTΛར༻͢Δཧ༝ • ϑϨʔϜϫʔΫͱͯ͠ͷػೳ͕ॆ࣮͍ͯ͠Δ • ࠃ಺໰Θͣ෯޿͍৘ใྔ • ͙͢ʹ࢝ΊΒΕΔ։ൃ؀ڥߏஙʢSSG / SSR /

    SPA etcʣ • Preview Mode ͕ ౥ࡌ͞ΕͯΔ • TypeScript ͷ਌࿨ੑ͕ߴ͍ • ࠃ಺৘ใ΋૿͖͑ͯͨ
  7. ։ൃϑϩʔɾӡ༻ͷ໰୊఺ • DBʹڍ͕ͬͯΔςϯϓϨʔτ͕ຊ౰ͷ࠷৽ɾɾɾ • ؅ཧը໘͔ΒςϯϓϨฤूՄೳͳͷͰɺඇΤϯδχΞ͕मਖ਼Մೳɾɾɾ • ςϯϓϨʔτ͕յΕ͔ͯΒ࿈བྷ͕དྷΔͨΊϦϏδϣϯΛ௥͏ͷ͕େม • खݩͷίʔυͱຊ൪ίʔυͱͷࠩ෼ •

    Τϥʔݕ஌ʹऑ͍ ※λΠϙͯ͠΋Τϥʔ͸ݕ஌͞Εͳ͍ • ϞσΟϑΝΠΞʹఆٛͰ͖ΔܕఆٛͰ͖ͳ͍ͨΊɺҙਤ͠ͳ͍ڍಈ͕ى͖Δ • ίʔυิ׬͕ͳ͍ͨΊɺͲͷϞδϡʔϧ͕ݺͼग़͔͢͸ςϯϓϨϞδϡʔϧ͔Βࢀর • ෳࡶʹ࡞Γ͗ͯ͢ɺҾ͖ܧ͗ઌ͔Βຖճ࿈བྷ͕དྷΔʢୈࡾऀ͕ಡΊͳ͍ʣ 😵 😵 😴
  8. σʔλͱςϯϓϨʔτͷ෼཭ ։ൃɾӡ༻ͷݟ௚͢͠Δ఺ ※ݸਓతͳҙݟ • ςϯϓϨʔτ͸Movable Typeʹґଘͤͨ͘͞ͳ͍ • Git -> CIΛ௨ͯࣗ͠ಈԽ͍ͨ͠

    • खݩͷίʔυ࠷৽ԽͷίϐʔΞϯυϖʔετෆཁʹ͍ͨ͠ • ϏϧυલʹΤϥʔΛݕ஌͍ͨ͠ • ࣮૷தͷૣظΤϥʔΛݕ஌͍ͨ͠ • ΤσΟλ্Ͱͷิ׬͕΄͍͠ • MTMLͰ࡞ΒΕͨΦϨΦϨυΩϡϝϯτ୤٫͍ͨ͠
  9. %BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ Asset Contents ※Webhook༻ϓϥάΠϯඞཁ ίϯςϯπ؅ཧऀ ςϯϓϨʔτ؅ཧʢΤϯδχΞʣ API Gateway هࣄɾίϯςϯπσʔλɾΧςΰϦɾมߋɾ࡟আ Webhook

    URL (API Gateway΁ΤϯυϙΠϯτ΁ϦΫΤετ) Lambda Web؂ࢹʢSentryͰϑϩϯτΛ؂ࢹʣ issueԽ CIىಈ Asset -> S3 CloudFront S3 HTML CSS JavaScript Image/File ίʔυσϓϩΠ ※ςετΛ௨Βͳ͍ͱσϓϩΠ͠ͳ͍ Git push Drone etc ʢςετ/Ϗϧυʣ PRͷϚʔδࣦഊ ैདྷͷMTML͸ɺMT -> ϗεςΟϯάઌ ↓ Jamstack͸ɺMT -> Ϗϧυ / CI / ςετͳͲ͕ؒʹڬ·Δ
  10. %BUB"1*Λ׆༻ͨ͠+BNTUBDLͷ։ൃϫʔΫϑϩʔ ϝϦοτ • αʔόϨεߏ੒ʹ͢Ε͹αʔόӡ༻ෆཁ • ैདྷͷ࠶ߏஙಉ༷ʹ੩తͰ͋Δ • CDNΛར༻͢Δ͜ͱͰϖʔδεϐʔυͷվળ΋Մೳ • ϒϥϯν͝ͱͷ։ൃͱϏϧυͷࣗಈԽ͕Մೳ

    • ςϯϓϨʔτͷ֦ுੑ͕ߴ͍ • CMSʹϩοΫΠϯ͞Εͳ͍ͨΊΞαΠϯઌ͕૿͑Δ • ΦϨΦϨυΩϡϝϯτ͸ෆཁ • ෼཭ʹΑΔґଘ͕ղফ͞Εɺ໰୊ΛՄࢹԽͰ͖Δ