Shifter Meetup West #1 はじめてのShifter 実践マイグレーション!

#getshifter #JP_Getshifter

Transcript

1. ʮ S H I F T E R ʯ ͬͯ ͳ ʹ ʁ ͱ ࠷ ৽ Ξ ο ϓ σ ʔ τ S H I F T E R M E E T U P W E S T # 1 ͸ じ Ί ͯ ͷ S h i f t e r ࣮ ફ ϚΠ グ Ϩ ʔ γ ϣ ϯ ʂ #JP_Getshifter
2. ຊ ೔ ͷ ಺ ༰
3. S H I F T E R ͱ ͸ ʁ
4. ୭΋͕࢖͍׳ΕͨWordPressα ΠτΛอकෆཁͳελςΟοΫ αΠτʹม׵͠CDNͰߴ଎഑ ৴/ެ։Ͱ͖ΔʮSaaSʯͰ͢ɻ Shifter ͱ͸ʁ
5. L I F E C Y C L E • WordPressͷϩάΠϯ࣌ʹDockerΛىಈ
 (Editorʣ • AWS ͷϦιʔεͰ੩తHTMLʹม׵
 (Generator) • CDN͔ΒίϯςϯπΛ഑৴
 (Contents Delivery) F E AT U R E • ߴ଎
 HTTP2ରԠ, ࣄલʹϏϧυ͞Εͨ੩తϑΝΠϧΛ
 ੈք100ΧॴҎ্ͷCDNڌ఺͔Βߴ଎഑৴ • ݎ࿚ͳηΩϡϦςΟ
 WordPress͸ৗ࣌ىಈෆཁɺϋοΫ͞ΕΔཁૉ͕ͳ͍ɻ • ͍҆ίετͰ؆୯ʹεέʔϦϯά
 ಥൃతͳεύΠΫ͕དྷͯ΋҆৺ʂαΠτμ΢ϯ͠ͳ͍ɻ • ϢʔβʔϑϨϯυϦʔ
 ࢖͍׳ΕͨWordPressͰ։ൃɾӡ༻͕Մೳ
 OS/ϛυϧ΢ΣΞͷอक࡞ۀɾίετ͕ෆཁ
 ϏδωεʹूதͰ͖Δ؀ڥ
6. W O R D P R E S S ͱ ͸ ?
7. M o s t p o p u l a r c o n t e n t m a n a g e m e n t s y s t e m s h t t p s : / / w 3 t e c h s . c o m / 
 s i n c e 1 M a y 2 0 1 9 Usage Change Since 1 May 2019 Market Share Change Since 1 May 2019 1.WordPress 34.0% +0.2% 60.8% +0.2% 2.Joomla 2.8% -0.1% 5.1% -0.1% 3.Drupal 1.9% 2.8% 0.1%
8. – ๭ α Π τ ੍ ࡞ ୅ ཧ ళ ͷ ੠ “ϝϯςφϯε΍ηΩϡϦςΟ͕໰୊ࢹ͞ΕΔ͕….
 ։ൃऀͷϦιʔε΍ϊ΢ϋ΢ɺΤϯυ͔Βͷೲظ΍ίετΛߟ͑Δͱ….”
9. – ๭ ৘ ใ γε ςϜ ୲ ౰ ऀ ͷ ੠ “৘γεࢹ఺Ͱ͸ӡ༻͕ͭΒ͍ͷ͚ͩͲ…..
 શ͘ར༻͠ͳ͍Θ͚ʹ΋͍͔ͳ͍ͷ͕…ݱ࣮”
10. – ๭ ϑ ϩ ϯ τ Τ ϯ δχ Ξ ͷ ੠ “WordPressҊ݅͸࢓ࣄͱͯ͠͸҆ఆ͍ͯ͠Δ͚Ͳ SPA΍JAMstackͷΑ͏ͳϞμϯͳίϯηϓτͷWeb։ൃ΋͍ͨ͠ͳ͊”
11. 㱻 ར ศ ੑ ӡ ༻ ί ε τ
12. W O R D P R E S S ͷ ӡ ༻ ɾ η Ω ϡ Ϧ ςΟ
13. Wo rd P re s s αΠ τ ͷ վ ͟ Μ ඃ ֐ ͸ 1 5 0 ສ ݅ ௒ ʹ 
 ʮ ࠷ ѱ ڃ ͷ ੬ ऑ ੑ ʯ
14. Wo rd P re s s ͸ ࠜ ຊ త ʹ ӡ ༻ ΍ η Ω ϡ Ϧ ςΟ ʹ ໰ ୊ ͕ ͋ Δ ͷ ͔ʁ
15. ɾ Wo rd P re s s C o re ͷ Ξ οϓ σ ʔ τ ͕ ස ൟ ͢ ͗ Δʁ 
 ɾ Wo rd P re s s P l u g i n ͕ ੬ ऑ ʁ 
 ɾ Wo rd P re s s T h e m e ͕ ෳ ࡶ Ͱ ϝ ϯ ς ෆ ೳ ʁ 
 ɾ ͦ ΋ ͦ ΋ … P H P ΍ M y S Q L ͳ Ͳͷ ϛ υϧ ΢ Σ Ξ ʹ ໰ ୊ ʁ
16. “ ݸ ਓ త ͳ ܦ ݧ ͔ Β ݴ ͏ ͱ ܧ ଓ త ͳ ϝ ϯ ς φ ϯε Λ ߦ ͬͯ ͍ Ε ͹ க ໋ త ͳ ໰ ୊ ʹ ͳ ͬ ͨ ͜ ͱ ͸ ͳ ͍ ” – Զ
17. ɾ ౾ ஌ ࣝ Wo rd P re s s ઐ ໳ ͷ Ϛ ω ʔ δ υ ϗ ε ςΟ ϯ ά Λ ར ༻ ͢ Δ ͜ ͱ Ͱ 
 ϝ ϯ ς φ ϯε ί ε τ ΍ φ Ϩ ο δ Λ ڞ ༗ Ͱ ͖ Δ ͷ Ͱ ؅ ཧ Ϧ ι ʔε Λ 
 ܰ ݮ Ͱ ͖ · ͢ɻ 
 ୅ ද త ͳ α ʔ Ϗ ε - Wo rd P re s s V I P 
 - W P E n g i n e - A M I M O T O 
 ͳ Ͳ ͳ Ͳ …
19. ར ศ ੑ 㱻 ӡ ༻ ί ε τ
20. අ ༻ ର ޮ Ռ ͷ ߴ ͍ બ ୒ ࢶ ͕ ཉ ͠ ͍ ! ར ศ ੑ 㱻 ӡ ༻ ί ε τ
21. S H I F T W O R D P R E S S T O S E R V E R L E S S
22. Ϣ ʔ β ʔ ମ ݧ Λ Ձ ஋ ʹ ม ͑Δ ʮ G e t S h i f t e r ʯ
24. Ͳͷ͙Β͍Ϣʔβʔମݧ͕มΘΔͷ͔ʁ
25. S H I F T E R 1.αΠϯΞοϓ/ϩάΠϯ 2.WordPress ฤूɾίϯςϯπ౤ߘ 3.GENERATEʢ੩తϑΝΠϧʹม׵ʣ 4.Webެ։ W O R D P R E S S 1.αʔό४උ 2.ϛυϧ΢ΣΞ (PHP,Nginx,MySQL) ͷΠϯετʔϧ 3.WordPress Πϯετʔϧ 4.WordPress ฤूɾίϯςϯπ౤ߘ 5.Webެ։ 6.OS / ϛυϧ΢ΣΞͷܧଓతϝϯςφϯε 7.WordPress ͷܧଓతΞοϓσʔτ 8.WordPress Plugin ͷܧଓతΞοϓσʔτ 9.ύϑΥʔϚϯεͷܧଓతͳ࠷దԽ 10.αʔϏε؂ࢹɾӡ༻อकɾαϙʔτ
26. S H I F T E R ͷ ί ϯ η ϓ τ
27. https://jamstack.org/
28. “ΫϥΠΞϯταΠυͷJavaScriptɺ࠶ར༻ՄೳͳAPIɺ
 ϏϧυࡁΈͷMarkupʹجͮ͘ϞμϯͳWeb։ൃΞʔΩςΫνϟ”
29. JAMstackʹ֘౰͠ͳ͍ύλʔϯ ΫϥΠΞϯτͱαʔό͕ີ݁߹͍ͯ͠Δ͋ΒΏΔϓϩδΣΫτ͸JAMstackͰߏங͞Εͨͱ͸ݴ͑·ͤ ΜɻԼهͷ΋ͷؚ͕·ΕΔ͜ͱ͕ଟ͍Ͱ͢ɻ •WordPressɺDrupalɺJoomlaɺͦͯ͠SquarespaceͷΑ͏ͳαʔόαΠυCMSͰߏங ͞ΕͨαΠτ • RubyɺNode΍ଞͷݴޠʹґଘ͢ΔϞϊϦγοΫͳαʔό͕ಈ࡞͢ΔWebΞϓϦέʔγϣϯ • ࣮ߦ࣌ʹαʔόଆͰϨϯμϦϯάͰϏϡʔΛߏங͢ΔSPA
30. S H I F T E R ͷ Ϣʔεέ ʔε
44. – J O H N M A E D A σβΠϯͱςΫϊϩδʔͷ༥߹Λ௥ٻ͢ΔୈҰਓऀʹ΋ ධՁ͍͖ͨͩ·ͨ͠!
 “@GetShifter — this is a v cool system.”
45. S h i f t e r ͷ Ϣ ʔεέ ʔε 
 
 Q . S h i f t e r ͸ Wo rd P re s s ͷ ۜ ͷ ஄ ؙ ʹ ͳ Γ · ͢ ͔ʁ 
 A . ࢒ ೦ ͳ ͕ Β ೉ ͠ ͍Ͱ ͢ɻ 
 
 - ࠷ ద ͳ έ ʔε ɿ 
 Πϕ ϯ τ ɾ Ω ϟϯϖʔϯ ɾ ϥ ϯ σΟ ϯ άϖʔ δ ɾ ί ʔϙ Ϩ ʔ ταΠ τ ͳ Ͳ - ෆ ޲ ͖ ͳ έ ʔε ɿ ί ϯ ς ϯ π ͷ ߋ ৽ ͕ ස ൟ ɾ ଟ ਓ ਺ Ͱ ར ༻ ͢ Δ ϝ σΟΞ ɾ ձ һ αΠ τ ͳ Ͳ
46. ࠷ ৽ ͷ U P D AT E
47. ʮPolylangʯΛ࢖ͬͨଟݴޠԽରԠαΠτͷ੩తԽʹରԠ • 40ϲࠃޠҎ্ʹରԠ • ୯७ͳࣗಈ຋༁Ͱ͸ͳ͘ݴޠ͝ͱʹద ੾ͳจষΛϢʔβʔଆͰઃఆՄೳ • ݴޠεΠονϟʔͳͲଟݴޠԽʹඞཁ ͳػೳΛ؆୯ઃఆ https://wordpress.org/plugins/polylang/
48. FormspreeΛ࢖ͬͯ5෼Ͱ͓໰߹ͤϑΥʔϜΛ࣮૷ Formspree は問合せフォームサービス のプロバイダです。
 「静的サイトと最⾼の相性」という彼ら のキャッチフレーズには、僕らも同意し ます。
 フォームの登録内容が⽬的のあて先に送 信するという点では、他のフォームと同 じではあるものの、Formspree には他 にも多くの機能が備わっています。 https://formspree.io/ https://www.digitalcube.jp/information/4573/
49. GatsbyͰbuildͯ͠Netlify΁Deploy
 - Moving to a static site with Gatsby + Netlify + Shifter - • NetlifyͳͲ֎෦ͷϗεςΟϯά؀ڥ΁ͷܧଓ తͳσϓϩΠΛ࣮ݱͰ͖ΔShifter Webhooks ػೳΛ͞ΒʹਐԽͤͨ͞΋ͷͰ͢ɻ • Ϣʔβʔ͸Shifter্ͷWordPressͰϖʔδΛ ߋ৽ޙɺShifter WebhooksϘλϯΛΫϦοΫ ͢Δ͚ͩͰɺ
 Netlify্ͷGatsbyδΣωϨʔλʔͰWordPess ͷίϯςϯπσʔλΛϏϧυ͠ɺNetlify্΁ ͷσϓϩΠ͕ՄೳʹͳΓ·͢ɻ https://www.gatsbyjs.org/ https://www.netlify.com/ https://www.digitalcube.jp/information/4434/
50. ࠓ ޙ ͷ ϩ ʔ υ Ϛ οϓ
51. • Teamϝϯόʔ΁ͷݖݶ؅ཧػೳڧԽʢUser Roleʣ • ΑΓར༻͠΍͍͢Ձ֨ઃఆͱϓϥϯ΁ͷมߋ • ը૾(Media)ઐ༻ʹCDNΛ෼཭ • Dashboard UI ͷΞοϓσʔτ • ΑΓσΟϕϩούʔϑϨϯυϦʔͳAPI • SearchɺForm౳ͷΠϯςάϨγϣϯڧԽ
52. ࣗ ෼ ͷ Ϗδ ω ε ʹ ू த ͠ Α ͏
53. Ϗʔϧձࣾɺৢ଄ॴ ʢॴ༗͔Βར༻΁ʣ “Ϗʔϧձࣾͷϛογϣϯɺ
 ίΞɾίϯϐλϯεͱ͍͏ͷ͸ɺ͍ ͔ʹඒຯ͍͠ϏʔϧΛ͍͔ʹ଎͓͘ ٬༷ʹಧ͚Δ͔Ͱ͢ɻ
 
 ൃిॴͱૹిઢ͕੔උ͞Εͨ࣌୅ʹ ࣗલͷൃిػΛ࣋ͭͱ͍͏͜ͱ͸ɺ ຊདྷ·ͬͨ͘ίΞɾίϯϐλϯεʹ ͳΒͳ͍Θ͚Ͱ͢ɻ”
54. Don’t waste another minute. Sign up for Shifter and let us do the heavy lifting. https://getshifter.io/ #JP_Getshifter