Nuxt.js + Apollo GraphQL Sitemap.xml 만들기

Nuxt.js와 Apollo GraphQL Client를 사용하는 Front End Server에서 사이트맵(Sitemap)을 만드는 방법을 소개하고자 합니다.

 

@nuxtjs/sitemap

@nuxtjs/sitemap

위 라이브러리를 이용하면 굉장히 쉽게 사용할 수 있습니다.

 

방식은 지난 https://gmyankee.tistory.com/291

Nuxt + Apollo Graphql => Generate로 SSR/SEO 적용하기

Generate 생성 방식과 90% 이상이 유사합니다.

 

// package.json
{
	// ... 중략
    "dependencis": {
    	// ... 중략
        "@nuxtjs/sitemap": "^2.2.0"
        // ... 생략
    }
    //... 생략
}

package.json 파일에서 @nuxtjs/sitemap을 추가하거나 수동으로 설치를 진행합니다.

 

 

 

// nuxt.config.js

const { createApolloFetch } = require('apollo-fetch')

export default {
	// ... 중략
    modules: [
    	'@nuxtjs/sitemap',
    ],
    sitemap: {
    	hostname: 'https://example.com',  // 사이트 주소
        gzip: true,
    	routes: function() {
          const uri = process.env.GRAPHCMS_URL
          const apolloFetch = createApolloFetch({ uri })
          const query = `
            query{
              ... 여기 쿼리채우는 거 아시죠?
            }
          `
          return apolloFetch({ query })
            .then(result => {
              const { data } = result
              return data.codes.edges.map(workshop => `/workshop/${workshop.node.id}`)
            })
            .catch(error => {
              console.log(`dynamic routes error: ${error}`)
            })
        }
    }
}

요렇게 하시고 사이트 주소에서

https://example.com/sitemap.xml 을 접속해보시면 사이트맵이 출력되는 것을 볼 수 있습니다.