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

2020. 4. 18. 19:44Web

728x90

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

 

@nuxtjs/sitemap

 

@nuxtjs/sitemap

Automatically generate or serve dynamic sitemap.xml for Nuxt.js projects

www.npmjs.com

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

 

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

 

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

목차 서론 Promise를 반환하는 함수 Callback을 반환하는 함수 Graphql로 SSR Generate 하기 서론 오버맵 오버맵 오버워치 워크샵 코드, 옵치 유즈맵 코드를 등록하고 공유하며, 워크샵 제작자들의 다양한 모드를..

gmyankee.tistory.com

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 을 접속해보시면 사이트맵이 출력되는 것을 볼 수 있습니다.

728x90