Nuxt(SPA)でもOGPしたい/want to render ogp with nuxt spa mode

ここにSPAモードのプロッジェクトがあります。
OGP？はい、１個設定できますね。
ページごとに設定したい？いったいなにをいっているんだ。

Transcript

1. Nuxt(SPA)でも OGPしたい Ռ෺Ϧϯ@FruitRiin גࣜձࣾΏΊΈ Roppongi.vue #1 2019/05/27
2. Q. NuxtͰ ϖʔδݸผʹOGPΛ ઃఆ͍ͨ͠Ͱ͢
3. SSR, UniversalϞʔυ headͰϝλλάઃఆ
4. Yes! ͦ͏Ͱ͋Δ΂͖ʂ
5. ͱ͜ΖͰ ͜͜ʹSPAϞʔυͷ ϓϩδΣΫτ͕͋Γ·͢
6. ʮͳΜͰSPAϞʔυͳΜ͔͢ʁʯ ʮ࢓༷͔ͩΒɺܦҢ͸Θ͔ΒΜʯ ʮ͍͞Ͱʯ
7. ΫϥΠΞϯτͷσΟϨ ʮOGPग़ͳ͍ΜͰ͔͢ʁʯ
8. Ͱ͢ΑͶʔ
9. ͙͵͵͵…… SPA͔ΒUniversalϞʔυ΁ͷ੾Γସ͑…… →fetchͰͷwindow objectૢ࡞͕શ໓ Ұ෦ઃܭ΍Γͳ͓͠ ݕূίετܹ૿……
10. ΫϥΠΞϯτͷΤϯδχΞ ʮNuxtʹ౉͢લʹExpressͰ HTMLΛվ͟Μ͢Ε͹ ͍͚ΔͷͰ͸ʁʯ
11. ΓɺΓͭ͘͸Θ͔Δ Θ͔Δ͕……
12. Nuxt（SPA）でも OGPしたい 闇の魔術に対する防衛術
13. 自己紹介 • Ռ෺Ϧϯ@FruitRiin • גࣜձࣾΏΊΈ • ·΋ͳ͘ೖࣾ4ϲ݄ • ϑϩϯτΤϯδχΞɺνʔϜϦʔμʔɺPMʁ • Vue͸͍͍ͧʂ
14. ʮ͍ͬͯ͏࿩ͳΜ͚ͩͲ͞ɺ Ͱ͖Δͱࢥ͏ʁʯ ʮͪΐͬͱௐ΂ͯΈ·͠ΐ͏͔ʯ
15. ʮͰ͖ͦ͏ͳؾ͕͠·͢ʁʯ ʮϚδͰʁʯ
16. 方針：nuxt startしない プロジェクトを目指す • nuxt start͢Δͱαʔόʔ͕ىಈ͢Δ • վ͟Μͷ༨஍ͳ͠ • expressΛىಈ͢Δapp.js తͳ΋ͷΛͭ͘Δ • nuxt start ͷ୅ΘΓʹ node app.js ͢Δ
17. app.js？ • NodeͰಈ͔͢ϓϩάϥϜͱͯ͠ࢦఆ͢ΔϑΝΠϧ • ߏ੒ཁ݅ • nuxtΛexpressͷϞδϡʔϧͱͯ͠ॳظԽ • ։ൃϞʔυͷͱ͖͸ϗοτϦϩʔυ༻ʹϦϏϧυ • expressʹϦΫΤετ͕དྷͨͱ͖
 Nuxt.jsͰϨϯμϦϯά • expressΛࢦఆϙʔτͰ଴ػͤ͞Δ
18. ͳΔ΄Ͳ·ͬͨ͘Θ͔ΒΜ
19. app.js • ࢀߟจݙ: nuxt.render()
 https://ja.nuxtjs.org/api/nuxt-render/ • جຊతͳܕͱ্ͯ͠هͷίʔυΛ
 ͦͷ··ར༻͠·͠ΐ͏
20. const { Nuxt, Builder } = require('nuxt') const app = require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 // Nuxt.js ΛΦϓγϣϯͱͱ΋ʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // ͢΂ͯͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) // ϗοτϦϩʔσΟϯά͢Δ։ൃϞʔυͷͱ͖ͷΈϏϧυ͢Δ if (config.dev) { new Builder(nuxt).build() .then(listen) } else { listen() } function listen() { // αʔόʔΛ Listen ͢Δ app.listen(port, '0.0.0.0') console.log('Server listening on `localhost:' + port + '`.') }
21. ͦ͏͍͏΋ͷͩͱఘΊͯ͘Ε
22. 備考:create-nuxt-app • Use a custom server framework? ʹ
 -> express ͱճ౴͢Δ • server/index.js Λࣗಈੜ੒ͯ͘͠ΕΔʂʂ • ಺༰͸ઌఔͷϑΝΠϧͱ֓Ͷಉ͡
23. HTMLを取得したい • HTMLͷऔಘʹ͸ nuxt.renderRoute() Λ࢖͏ • SPAϞʔυͰ͸࣮࣭ςϯϓϨʔτ͕औಘͰ͖Δ • ฦΓ஋ͷΦϒδΣΫτʹؚ·ΕΔ html ʹ
 ϨϯμϦϯά͠Α͏ͱͨ͠HTML͕ೖ͍ͬͯΔ
24. ಛఆϧʔςΟϯάͷͱ͖ͷΈͷॲཧ • ϧʔςΟϯάͰॲཧΛ෼͚͍ͨˠapp.get() ͳͲΛ࢖͏ • express ͷgetϝιου • app.get(‘/detail’) , app.get(‘/user/:userId’) ͳͲ
25. const { Nuxt, Builder } = require('nuxt') const app = require('express')() const isProd = (process.env.NODE_ENV === 'production') const port = process.env.PORT || 3000 // Nuxt.js ΛΦϓγϣϯͱͱ΋ʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // ͢΂ͯͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) // ϗοτϦϩʔσΟϯά͢Δ։ൃϞʔυͷͱ͖ͷΈϏϧυ͢Δ if (config.dev) { new Builder(nuxt).build() .then(listen) } else { listen() } function listen() { // αʔόʔΛ Listen ͢Δ app.listen(port, '0.0.0.0') console.log('Server listening on `localhost:' + port + '`.') } େࣄͦ͏
26. // Nuxt.js ΛΦϓγϣϯͱͱ΋ʹΠϯελϯεԽ͢Δ const config = require('./nuxt.config.js') config.dev = !isProd const nuxt = new Nuxt(config) // detailͰಛผॲཧ app.get(‘/detail', async (req, res) => { const result = await nuxt.renderRoute('/'); console.log(result.html) }) // ͢΂ͯͷϧʔτΛ Nuxt.js ͰϨϯμϦϯά͢Δ app.use(nuxt.render) ௥Ճ͠·ͨ͠ ↑Ͱॲཧ͞Εͳ͚Ε͹ ɹͬͪ͜Ͱॲཧ͢Δ
28. axiosで必要なデータを引っ張る • ͜͜͸ීஈͱ͋·ΓมΘΒͳ͍ • axios.get() ͳΓͳΜͳΓ
29. 改ざんしてレンダリング • Կ΋ߟ͑ͣʹ೴ےͰ String.replace() • String.replace(/<meta data-hid=“og:title”.*?>/,
 'ʢུʣ') • ஔ׵ͨ͠΋ͷΛ res.send() ͢Δ
30. // detailͰಛผॲཧ app.get("/detail", async (req, res) => { const result = await nuxt.renderRoute("/"); let html = result.html; const meta = await axios.get("/someting-meta") html = html.replace(/<meta data-n-head="true" data-hid=“og:title".*?>/, `<meta title="og:title" content="${meta.title}">`) res.send(html) }); ௥Ճ͠·ͨ͠
33. ΊͰͨ͠ɹΊͰͨ͠
34. メリット • Ҡߦʹൺ΂Ε͹ݕূίετ͕͍ܰ • طଘͷSPAͷॲཧΛݟ௚͞ͳͯ͘Α͍ • αʔόʔͰDOMͷܭࢉΛ͠ͳ͍ͰΑ͍ • expressΛىಈ͢Δඞཁ͸͋ΔͷͰɺ
 αʔόʔϦιʔεΛ৯Θͳ͍Θ͚Ͱ͸ͳ͍
35. デメリット • UniversalϞʔυͰ͍͍ͳΒ
 UniversalϞʔυͷ΄͏͕Α͍ • Expressͷ஌͕ࣝଟগඞཁ • ΍Δ͜ͱ͕టष͍
36. デメリット２ • ϖʔδίϯϙʔωϯτͷϧʔςΟϯάͱ
 վ͟ΜॲཧͷϧʔςΟϯά͕Ұக͠ͳ͍ • NuxtͷࣗಈϧʔςΟϯάͷԸܙΛड͚ΒΕͳ͍ • ̍ϖʔδͷॲཧ͕2Օॴʹ෼͔ΕΔ • ର৅ͷϖʔδ͕૿͑Δͱίʔυ͕΍ͨΒ௕͘ͳΔ
37. ͍ͬͯ͏͔ UniversalϞʔυͰ͖ΔͳΒ ຊ౰ʹͦͷํ͕͍͍
38. ཁ݅ʹ߹Θͤͯ SPAϞʔυͰ։ൃΛਐΊ͍͍ͯͷ͔ ࠓҰ౓ߟ͑Α͏
39. SPAϞʔυ͡Ό OGP͸ग़ͳ͍ͧͬʂ