Nuxt.js サイトマップXMLを動的に出力する
/ 2 min read
Table of Contents
@nuxtjs/sitemapモジュールを利用してサイトマップXMLを動的に出力する方法をまとめました。
URLの生成に使用するデータはAPIサーバーから取得する想定です。動作確認ではPostman Echoからデータを取得します。
参考: https://docs.postman-echo.com/?version=latest
プラグインをインストール
% npm install @nuxtjs/axios @nuxtjs/sitemap
検証環境
/ - nuxt.config.js - plugins/ - axios.js
検証リポジトリ: https://github.com/cuavv/sandbox-nuxt-proxy
動作確認
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}`) } }
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
% npm run dev
http://localhost:3000/sitemap.xml にアクセス

動的なURLが出力されました🙆
注意事項
npm run generate
した場合は動作しません。
⚠ Does not work in generated/static mode!