Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Nuxt.js + microCMS + netlify

Download to read offline

動的ページの基本的な作り方とmicroCMSに絡んだ話を中心に話します。

Related Books

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Nuxt.js + microCMS + netlify

  1. 1. Nuxt.js+microCMS+netlify tottoruby#38@watti
  2. 2. Ruby3.0.0Released 22
  3. 3. @watti Ruby on Rails AWS Electron Nuxt.js 33
  4. 4. @wattiの最近 某ベンチャー → 某ベンチャー Nuxt.jsあまり触らなくなるかも知れないので旬なうちに 寝落ちするかコード書くか勉強するか AWS試験勉強進まない 受かったら M1 Macbook Air買う 44
  5. 5. Nuxt.js+microCMS+netlify 55
  6. 6. https://ja.nuxtjs.org/ 66
  7. 7. Wikipediaより抜粋 Nuxt.jsは、Vue.js、Node.js、Webpack、Babel.jsに基づ く無料のオープンソースWebアプリケーションフレームワー クです。このフレームワークは、「ユニバーサルアプリケー ションのメタフレームワーク」として宣伝されています。 77
  8. 8. https://microcms.io/ 88
  9. 9. HeadlessCMS コンテンツをAPIで取得 任意の場所だけCMS化 99
  10. 10. microCMSAPIスキーマ 1010
  11. 11. microCMS管理画⾯ 1111
  12. 12. microCMSAPIResponse { "contents": [ { "id": "gsx9tvbo4", "createdAt": "2020-12-02T13:40:42.111Z", "updatedAt": "2020-12-03T13:15:12.067Z", "publishedAt": "2020-12-02T13:40:42.111Z", "revisedAt": "2020-12-03T13:15:12.067Z", "image": { "url": "https://images.microcms-assets.io/protected/..." }, ... }, ... ] } 1212
  13. 13. https://www.netlify.com/ 1313
  14. 14. 静的コンテンツのホスティングサービス 公開簡単 CDN、独⾃ドメイン、SSL対応 Nuxt.jsをSSGでexportしたものをデプロイ 1414
  15. 15. Nuxt.js+microCMS+netlify 実装の話 例) ニュース⼀覧・詳細ページをどう作るか 1515
  16. 16. NuxtPagesdirectry-URLpath ディレクトリ構造がそのままパスになる 動的ページは _id.vue を配置 pages/index.vue # / pages/news/index.vue # /news pages/news/_id.vue # /news/:id 1616
  17. 17. 動的にコンテンツを取得(詳細ページ) microCMSにアクセスしてnewsを取得 X-API-KEY で認証 (省略) <script> export default { asyncData({ $axios, params: { id } }) { const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } }, data () { return { news: {} } } } </script> 1717
  18. 18. 動的ページにコンテンツを埋め込む titleは⽂字列 bodyはリッチテキスト(HTML)を想定 <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> 1818
  19. 19. pages/news/_id.vue <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> <script> export default { asyncData({ $axios, params: { id } }) { const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } }, data () { return { news: {} }} } </script> 1919
  20. 20. NuxtSSGRoutes Netlifyなので nuxt generate で静的コンテンツ⽣成 静的ページは⾃動で⽣成される 動的ページは nuxt.config.js の generate.routes に Array or Promise を返す関数 or callback 関数 export default { generate: { routes: ['/news/hoge', '/news/fuga', '/news/piyo'] } } 2020
  21. 21. NuxtSSG動的ページのID指定 microcmsのnews⼀覧からIDを取得してパスを⽣成する const url = 'https://watti.microcms.io/api/v1/news?fields=id' export default { generate: { routes() { axios.get(url).then(response => { return response.data.contents.map(c => `/news/${c.id}`) }) } } } 2121
  22. 22. 動的ページ表⽰遅い netlifyのエッジが遠い 画像のURLが microCMSアクセス後に わかる 2222
  23. 23. 動的ページの⽣成時にpayloadを渡す generate時にidを取るためmicroCMSにアクセスしてる generate時と実際のアクセス時とで⼆度API叩く事になる generate.routes で取得したコンテンツを渡す asyncDataで受け取れる 2323
  24. 24. generate.routesでpayloadを渡す 取得したコンテンツを payload に指定する パスは route に指定 routes() { axios.get(url).then(response => { return response.data.contents.map(c => { return { route: `/news/${c.id}`, payload: c } } }) } 2424
  25. 25. asyncDataでpayloadを受け取る nuxt dev で起動時は受け取れないので取りに⾏く asyncData({ $axios, params: { id }, payload }) { if (payload) { return { news: payload } } const url = `https://watti.microcms.io/api/v1/news/${id}` const { content } = await $axios.$get(url) return { news: content } } 2525
  26. 26. 動的ページ取得早い? generatedで⽣成された payload.jsにデータ保持 体感的には普通に 2626
  27. 27. 静的ページのpayload対応 静的ページのroutesは⾃動⽣成 exclude した上で route と payload を指定する const url = 'https://watti.microcms.io/api/v1/news' export default { generate: { exclude: ['/news'], routes() { axios.get(url).then(response => { return { route: '/news', payload: response.data.contents } }) } } } 2727
  28. 28. microCMSのコンテンツ追加への⾃動追従 generateしたタイミングのコンテンツしか持たない microCMSのAPIの Webhook 設定で netlifyのデプロイをキックする 2828
  29. 29. プレビュー (下書きの表⽰) 2929
  30. 30. microCMSの 下書き取得 DRAFT_KEY を利⽤する コンテンツ毎に⾃動発⾏ パラメータに付与する draftKey=xxx 3030
  31. 31. 画⾯プレビュー⽤URL設定 https://xxx.netlify.app/news/{CONTENT_ID}?draftkey=?{DRAFT_KEY} {CONTENT_ID} {DRAFT_KEY} は⾃動で埋まる microCMSのコンテンツ画⾯から、 画⾯プレビューボタンを押すと上記URLに⾶ぶ 3131
  32. 32. microCMSの下書きと画⾯プレビュー ⾃サイトに DRAFT_KEY 付きでアクセス それを使ってmicroCMSのAPIを叩く asyncData({ params: { id }, payload, query: { draftKey } }) { if (payload) { return { news: payload } } const url = `https://watti.microcms.io/api/v1/news/${id}` const options = {} if (draftKey) { options.params = { draftKey } } const { content } = await $axios.$get(url, options) return { news: content } } 3232
  33. 33. 画⾯プレビューの問題点 コンテンツ毎に DRAFT_KEY の値が違う ⼀覧等、複数コンテンツを読む場合 DRAFT_KEY 使えない 3333
  34. 34. GLOBAL_DRAFT_KEYを使ったプレビュー 全下書きコンテンツを⼀度に取得するための認証キー リクエストヘッダに X-GLOBAL-DRAFT-KEY を設定 Nuxt.js側で持っておいて、適宜使う 画⾯プレビューのURL設定からは渡せない netlifyのpreview環境のみ有効にする、とか 3434
  35. 35. 下書き全般の問題点 他のコンテンツを参照できる 下書き状態のものも設定できる が、参照先の下書きは取れない 3535
  36. 36. 未公開コンテンツの下書き問題 generate時に動的ページを⽣成しても通常下書きは含まない microCMSから下書きを表⽰しようとすると404 preview環境だけでも⾒たいなら ⼀覧ページから辿る仕組みを作る (htmlは作らない) preview環境だけ下書きの動的ページを⽣成する 404ページを利⽤する 3636
  37. 37. 未公開コンテンツの下書き更新問題 新ページの下書きが初めて作成された時だけフックしたい microCMSで コンテンツの下書き保存時 のwebhook 作成 or 更新の区別がない 下書き保存されるたびにビルドが⾛る Netlifyのビルド時間がどんどん削られる ビルドの⾼速化 cache: true は必須 コード変更ないので nuxt build がスキップされる 3737
  38. 38. ⼩ネタ 3838
  39. 39. microCMSCDNEdge 国内CDNを経由~としか書いてないので聞いた microCMSの管理画⾯のチャットから サポートチャットはエンジニア ブログ書いてる⼈だった CloudFront を利⽤しているらしい All Edge Locations 3939
  40. 40. microCMS外部サービス埋め込みにハマる URL指定で埋め込める https://www.youtube.com/watch?v=xxx APIレスポンスはHTMLなので v-html で埋め込む <script> タグが⼊っているので Vue.js側でエラー mounted / updated 時に置換して埋め込み・実⾏ 遅延表⽰もあるらしいので強制発⽕ https://the-fukui.com/blog/microcms-sugeeeeee/ 4040
  41. 41. microCMSプラン移⾏問題 プラン API数 Webhook数 料⾦ 旧Starter 無制限 10 ¥2,640~ Standard 10 (+¥2,000/個) 無制限 ¥4,900~ Webhook⾜りないからって安易に移⾏したら 云万円になるのでちゃんと⾃⼒で⾒積もりましょう 4141
  42. 42. まとめ 4242
  43. 43. microCMSの良いところ シンプルな管理画⾯ 馴染みのREST API CDNが All Edge Locations チャットの問い合わせがエンジニア直通 4343
  44. 44. microCMSの困ったところ 参照先が公開されてないとどうやっても取れない microCMS上のファイル管理UIがイマイチ 動画ファイルはサムネ出して欲しい、事故る 画像は画像だけで選べるがディレクトリ欲しい 外部サービス埋め込みどう使うのが正解? エンジニア向けのサービス感 (API Schemaとか) 4444
  45. 45. Nuxt+HeadlessCMS ページ構成の変更に弱い 画像メインで扱う分には良さそう 結局スタイル修正になることが多い 巨⼤・複雑なページは⼤変そう けど⾯⽩かった 4545
  46. 46. 良いお年を〜 4646

動的ページの基本的な作り方とmicroCMSに絡んだ話を中心に話します。

Views

Total views

56

On Slideshare

0

From embeds

0

Number of embeds

20

Actions

Downloads

0

Shares

0

Comments

0

Likes

0

×