Pro Yearly is on sale from $80 to $50! »

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

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

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

69b4dadef85efe143ac825b62d36ed7c?s=128

果物リン

May 27, 2019
Tweet

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) ௥Ճ͠·ͨ͠ ↑Ͱॲཧ͞Εͳ͚Ε͹ ɹͬͪ͜Ͱॲཧ͢Δ
  27. None
  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) }); ௥Ճ͠·ͨ͠
  31. None
  32. None
  33. ΊͰͨ͠ɹΊͰͨ͠

  34. メリット • Ҡߦʹൺ΂Ε͹ݕূίετ͕͍ܰ • طଘͷSPAͷॲཧΛݟ௚͞ͳͯ͘Α͍ • αʔόʔͰDOMͷܭࢉΛ͠ͳ͍ͰΑ͍ • expressΛىಈ͢Δඞཁ͸͋ΔͷͰɺ
 αʔόʔϦιʔεΛ৯Θͳ͍Θ͚Ͱ͸ͳ͍

  35. デメリット • UniversalϞʔυͰ͍͍ͳΒ
 UniversalϞʔυͷ΄͏͕Α͍ • Expressͷ஌͕ࣝଟগඞཁ • ΍Δ͜ͱ͕టष͍

  36. デメリット2 • ϖʔδίϯϙʔωϯτͷϧʔςΟϯάͱ
 վ͟ΜॲཧͷϧʔςΟϯά͕Ұக͠ͳ͍ • NuxtͷࣗಈϧʔςΟϯάͷԸܙΛड͚ΒΕͳ͍ • ̍ϖʔδͷॲཧ͕2Օॴʹ෼͔ΕΔ • ର৅ͷϖʔδ͕૿͑Δͱίʔυ͕΍ͨΒ௕͘ͳΔ

  37. ͍ͬͯ͏͔ UniversalϞʔυͰ͖ΔͳΒ ຊ౰ʹͦͷํ͕͍͍

  38. ཁ݅ʹ߹Θͤͯ SPAϞʔυͰ։ൃΛਐΊ͍͍ͯͷ͔ ࠓҰ౓ߟ͑Α͏

  39. SPAϞʔυ͡Ό OGP͸ग़ͳ͍ͧͬʂ