Zenn
💻

[Nuxt2]エンドポイントが複数でmicroCMSを使った際のサイトマップの作り方

2023/01/20に公開
JavaScript
Nuxt
Vue.js
microCMS
Nuxt 2
tech

[Nuxt2]エンドポイントが複数でmicroCMSを使った際のサイトマップの作り方

『エンドポイントが複数でmicroCMSを使った際のサイトマップの作り方』など、
あまりピンポイントで記事になかったので、記事にしてみました！

開発環境

package.json
{
"dependencies": {
    "@nuxt/content": "^1.15.1",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/date-fns": "^1.5.0",
    "@nuxtjs/google-fonts": "^3.0.0-0",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "@types/sanitize-html": "^2.6.2",
    "core-js": "^3.19.3",
    "gsap": "^3.11.0",
    "nuxt": "^2.15.8",
    "nuxt-microcms-module": "^2.0.1",
    "raw-loader": "^4.0.2",
    "ress": "^5.0.2",
    "sanitize-html": "^2.7.3",
    "sass": "^1.54.0",
    "sass-loader": "^10.3.1",
    "swiper": "^5.4.5",
    "three": "^0.142.0",
    "three-orbit-controls": "^82.1.0",
    "uninstall": "^0.0.0",
    "vee-validate": "3.0",
    "vue": "^2.6.14",
    "vue-awesome-swiper": "^4.1.1",
    "vue-server-renderer": "^2.6.14",
    "vue-template-compiler": "^2.6.14",
    "vue-underscore": "^0.1.4",
    "vuelidate": "^0.7.7",
    "webpack": "^4.46.0"
  }
}

主なバージョンや環境の確認

  1. Nuxtは、2.15.8
  2. Vueは、2.6.14
  3. SSG(Static Site Generator)
  4. @nuxtjs/sitemapは、 2.4.0,
     

インストールをするもの、アカウントを作るもの

  1. 今回はaxiosを使用
  1. microcmsのアカウント作る

 

実装したコード

nuxt.config.js
const baseUrl = "https://dummy.com"
const microcmsEndpoint = "https://dummy.microcms.io/api/v1" // お使いのmicocmsのエンドポイントを指定
import axios from "axios";
export default {
    // 以下、省略
    sitemap: {
    path: "/sitemap.xml",
    hostname: baseUrl,
    gzip: true,
    trailingSlash: true,
    // microcms動的生成
    routes() {
      return Promise.all([
        axios.get(`${microcmsEndpoint}/news`, {
          headers: { "X-MICROCMS-API-KEY": process.env.GET_API_KEY },
        }),
        axios.get(`${microcmsEndpoint}/works`, {
          headers: { "X-MICROCMS-API-KEY": process.env.GET_API_KEY },
        })
      ])
      .then(([news, works]) => {
        const expnews = news.data.contents.map(news => '/news/' + news.id)
        const expworks = works.data.contents.map(works => '/works/' + works.id)
        const array = [expnews, expworks]
        const flattened = array.reduce(
          (accumulator, currentValue) => accumulator.concat(currentValue),
          []
        )
        return flattened
      })
    },
}

 

ポイントは

今回のポイントは、microCMSのエンドポイントが複数である事です。
routesにnews、worksにそれぞれのエンドポイントを入れてみましたが、それでは上手く生成されないです。
 

  1. 必要なのがPromise.allです。
  • 参考URL

結果値の配列を返す必要があります。なので今回はこの参考URLに沿って、**Promise.all()**でnews、worksを纏めて取得。
 

  1. 取得した配列をArray.prototype.reduceで結合する。

mapでルーティングの設定に合わせるために整形して

  • 参考URL

このままだとnewsかworksどちらかにしかサイトマップに記載されないので、Array.prototype.reduceで

nuxt.config.js
    const flattened = array.reduce(
        (accumulator, currentValue) => accumulator.concat(currentValue),
        []
    )

結合させればnews、worksともにサイトマップに記載されます。
 

まとめ

普段、WordPressで自動的に設定してやってくれてたものが、
Nuxt.jsだと自ら設定する必要があるので「概念、ロジック」を理解するのは、かなりしんどかったです。
次回はaxiosではなく、Nuxt3でFetch APIで実装してみます！
 

参考記事URL

  • Nuxt.jsでサイトマップを動的に設定する方法
  • 【Nuxt.js】microCMSで複数のAPIからコンテンツを取得する方法
  • Array.prototype.reduce()を使いこなしたい

Discussion