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

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

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

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

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