Recommended
More Related Content
What's hot
What's hot (20)
Similar to Nuxt.js + microCMS + netlify
Similar to Nuxt.js + microCMS + netlify (20)
Recently uploaded
Recently uploaded (10)
Nuxt.js + microCMS + netlify
- 4. @wattiの最近 某ベンチャー → 某ベンチャー Nuxt.jsあまり触らなくなるかも知れないので旬なうちに 寝落ちするかコード書くか勉強するか AWS試験勉強進まない 受かったら M1 Macbook Air買う 44
- 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
- 16. NuxtPagesdirectry-URLpath ディレクトリ構造がそのままパスになる 動的ページは _id.vue を配置 pages/index.vue # / pages/news/index.vue # /news pages/news/_id.vue # /news/:id 1616
- 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. 動的ページにコンテンツを埋め込む titleは⽂字列 bodyはリッチテキスト(HTML)を想定 <template> <div class="news"> <h1>{{ news.title }}</h1> <div class="contents" v-html="news.body"> </div> </template> 1818
- 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. 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. 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
- 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. 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
- 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. microCMSのコンテンツ追加への⾃動追従 generateしたタイミングのコンテンツしか持たない microCMSのAPIの Webhook 設定で netlifyのデプロイをキックする 2828
- 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. 画⾯プレビューの問題点 コンテンツ毎に DRAFT_KEY の値が違う ⼀覧等、複数コンテンツを読む場合 DRAFT_KEY 使えない 3333
- 37. 未公開コンテンツの下書き更新問題 新ページの下書きが初めて作成された時だけフックしたい microCMSで コンテンツの下書き保存時 のwebhook 作成 or 更新の区別がない 下書き保存されるたびにビルドが⾛る Netlifyのビルド時間がどんどん削られる ビルドの⾼速化 cache: true は必須 コード変更ないので nuxt build がスキップされる 3737
- 38. ⼩ネタ 3838
- 39. microCMSCDNEdge 国内CDNを経由~としか書いてないので聞いた microCMSの管理画⾯のチャットから サポートチャットはエンジニア ブログ書いてる⼈だった CloudFront を利⽤しているらしい All Edge Locations 3939
- 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. microCMSプラン移⾏問題 プラン API数 Webhook数 料⾦ 旧Starter 無制限 10 ¥2,640~ Standard 10 (+¥2,000/個) 無制限 ¥4,900~ Webhook⾜りないからって安易に移⾏したら 云万円になるのでちゃんと⾃⼒で⾒積もりましょう 4141
- 42. まとめ 4242
- 43. microCMSの良いところ シンプルな管理画⾯ 馴染みのREST API CDNが All Edge Locations チャットの問い合わせがエンジニア直通 4343
- 46. 良いお年を〜 4646