skip to content
Logo
Yurikago Blog

Nuxt.js サイトマップXMLを動的に出力する

/ 2 min read

Table of Contents

@nuxtjs/sitemapモジュールを利用してサイトマップXMLを動的に出力する方法をまとめました。

URLの生成に使用するデータはAPIサーバーから取得する想定です。動作確認ではPostman Echoからデータを取得します。

参考: https://docs.postman-echo.com/?version=latest

プラグインをインストール

Terminal window
% npm install @nuxtjs/axios @nuxtjs/sitemap

検証環境

/
- nuxt.config.js
- plugins/
- axios.js

検証リポジトリ: https://github.com/cuavv/sandbox-nuxt-proxy

動作確認

nuxt.config.js
import { axiosInstance } from './plugins/axios.js'
export default {
:
modules: [
'@nuxtjs/axios',
'@nuxtjs/sitemap'
],
// https://axios.nuxtjs.org/options#proxy
axios: {
proxy: true
},
proxy: {
'/api': {
// http://localhost:3000/api/get にアクセスすると https://postman-echo.com/get にリクエストする
target: 'https://postman-echo.com',
pathRewrite: { '^/api': '' }
}
},
sitemap: {
hostname: 'http://www.example.com',
routes: async () => {
const { data } = await axiosInstance.get('/api/get?foo1=bar1&foo2=bar2')
return Object.values(data.args).map(v => `/${v}`)
}
}
axios.js
import axios from 'axios'
/**
* baseURLを設定しない場合 /sitemap.xml にリクエストするとエラーが発生します。
* > connect ECONNREFUSED 127.0.0.1:80*
*
* npm run devで立ち上がるローカル環境のポート番号は(デフォルトだと)3000なので
* ポート番号80でリクエストしても到達できないことが原因です。
*
* axiosのリクエストURL
* baseURLあり => http://localhost:3000/api/get
* baseURLなし => http://127.0.0.1:80/api/get
**/
const instance = axios.create({
baseURL: 'http://localhost:3000',
})
export const axiosInstance = instance
Terminal window
% npm run dev

http://localhost:3000/sitemap.xml にアクセス

sitemap

動的なURLが出力されました🙆

注意事項

npm run generate した場合は動作しません。

⚠ Does not work in generated/static mode!

参考: https://www.npmjs.com/package/@nuxtjs/proxy