Help us understand the problem. What is going on with this article?

Nuxt.jsでサイトマップを動的に設定する方法

More than 1 year has passed since last update.

Nuxt.jsでSSR対応のWebアプリケーションを作ったわいいが、サイトマップどうするん、しかも動的にルーティングしてる場合はと考えていたら、しっかりNuxt.js用のsitemapモジュールありましたね。

sitemap-module

今回はこれを使った動的なサイトマップを生成したときの話をします。

1.インストール

対象のNuxtフォルダにインストールしましょう

yarn add @nuxtjs/sitemap

2. nuxt.config.jsの設定

インストールができたらnuxt.config.jsの設定をしていきます。
まずはmodulesに追加

nuxt.config.js
modules: [
    '@nuxtjs/sitemap'
]

ここまではドキュメントと一緒ですね。

次にsitemapの設定をしていきます。

結論からいうとこういう設定にしました。

nuxt.config.js
modules: [
    '@nuxtjs/sitemap'
],
sitemap: {
    path: '/sitemap.xml',
    hostname: 'https://example.jp',
    cacheTime: 1000 * 60 * 15,
    gzip: true,
    generate: false,
    exclude: [
      '/terms',
      '/contact/complete',
      '/register/complete',
      '/privacy-policy',
      '/mypage',
      '/admin',
      '/mypage/**',
      '/admin/**'
    ],
    routes() {
      return Promise.all([
        axios.get('https://example.jp/api/posts'),
        axios.get('https://example.jp/api/columns')
      ])
        .then(([posts, columns]) => {
          let exp01 = posts.data.map(contact => '/posts/' + contact.slug)
          let exp02 = columns.data.map(contact => '/columns/' + contact.slug)
          let array = [exp01, exp02]
          let flattened = array.reduce(
            (accumulator, currentValue) => accumulator.concat(currentValue),
            []
          )
          return flattened
        })
    }
}

オプションについてドキュメントから抜粋

3. オプション

path

サイトマップを生成する場所と名前の設定ができる

hostname

サイトマップを置くサイトのルートドメインを設置する

cacheTime

サイトマップの更新頻度を設定する

gzip

gzip形式のsitemapを生成するかどうか

generate

nuxt generateするときに静的なサイトマップを生成するかどうか

exclude

除外ディレクトリの設定

/**を付けるとそのディレクトリ下を除外することが可能

ここから動的に設定した方法を説明していきます。

今回はNuxtおなじみのaxiosを使ってルーティングをしていきます。

nuxt.config.jsにaxiosを読み込みます。

nuxt.config.js
const axios = require('axios')
module.exports = {
  mode: 'universal',
  ...
}

読み込んだら、routesを設定していきます。

nuxt.config.js
routes() {
    return Promise.all([
        axios.get('https://example.jp/api/posts'),
        axios.get('https://example.jp/api/columns')
    ])
    .then(([posts, columns]) => {
        const exp01 = posts.data.map(contact => '/posts/' + contact.slug)
        const exp02 = columns.data.map(contact => '/columns/' + contact.slug)
        const array = [exp01, exp02]
        const flattened = array.reduce(
        (accumulator, currentValue) => accumulator.concat(currentValue),
        []
        )
        return flattened
    })
}

今回Rest apiからaxiosでゲットしています。
それぞれ、id,slugなどルーティングの仕方は様々だと思うのですが、今回はslugでのルーティングです。

// post
[
    { id: 0, slug: 'post01' },
    { id: 1, slug: 'post02' },
    { id: 2, slug: 'post03' }
]
// column
[
    { id: 0, slug: 'column01' },
    { id: 1, slug: 'column02' },
    { id: 2, slug: 'column03' }
]

こんな配列をgetしました。

これを今度はルーティングの設定に合わせるために整形していきます。

// /posts下を動的にサイトマップを生成したい
let exp01 = posts.data.map(contact => '/posts/' + contact.slug)
// columns下を動的にサイトマップを生成したい
let exp02 = columns.data.map(contact => '/columns/' + contact.slug)

これでさきほどの配列がこうなります。

// posts/
[
    '/posts/post01',
    '/posts/post02',
    '/posts/post03'
]
// columns/
[
    '/columns/column01',
    '/columns/column02',
    '/columns/column03'
]

ここからこの二つの配列を結合します。

const array = [exp01, exp02]
const flattened = array.reduce(
    (accumulator, currentValue) => accumulator.concat(currentValue),
    []
)

これでこうなります。

[
    '/posts/post01',
    '/posts/post02',
    '/posts/post03',
    '/columns/column01',
    '/columns/column02',
    '/columns/column03'
]

あとはreturnをして出力すれば完了です。
これで動的にルーティングがされます。

まとめ

自動的に動的にルーティングしてくれたら最高なのに

今回nuxt.config.jsに直接ルーティングの処理を設定したが、storeとかで管理してもいいと思いました。

他にもっといい方法があると思うので、別方法も教えてください。

【参考にした記事】

Nuxt.jsで静的ファイル生成時にサイトマップも自動生成する方法

showroom
SHOWROOMは、アイドルやアーティストとインターネット上でコミュニケーションが楽しめるライブ動画ストリーミングプラットフォームです。
https://www.showroom-live.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした