Vue (Single Page App)의 검색엔진 노출 방법- Prerendering

한줄요약: vue-router를 histroy 모드로 변경 후, Prereding으로 빌드하도록 vue.config.js 변경

 

이번에는 Prerendering으로 사이트를 빌드하여 검색엔진에 노출시키는 법에 대해 작성하겠습니다.

 

기타 방법은 이전글(vue로 개발한 페이지 검색엔진에 노출시크는 방법)을 참고해 주세요.

 

Prerendering 은? 

프리렌더링은 웹사이트를 빌드할때 지정한 특정 페이지를 미리 렌더링해서 저장하는 기술입니다. 구현이 쉽고 빌드 타임에 모든 처리가 끝나므로 런타임에 추가로 부담이 들지 않습니다만, 빌드 타임은 당연스럽게 늘어나게 됩니다.

 

단, vue-router 이 hash 모드(xxx.com/#/home 과 같이 #이 router에 붙는 방식)가 아니라 history (xxx.com/home ) 여야만 합니다. (이 조건은 다른 방법을 쓰더라도 동일합니다.)

 

1. history 모드 적용 방법

- vue-router 가 import 되어 있는 파일에 router 항목을 찾아 아래와 같이 수정합니다.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

위와 같이 적용후 서버를 재시작 하고 주소 경로에서 #이 빠져있다면 제대로 적용한 것입니다.

 

2. prerender-spa-plugin 설치

다음 plugin을 설치합니다.

npm install --save-dev prerender-spa-plugin

설치 후 vue.config.js 파일을 수정합니다. (vue cli 3.0 기준 )

/* vue.config.js */
const path = require('path');
const PrerenderSpaPlugin = require('prerender-spa-plugin');

const productionPlugins = [
  new PrerenderSpaPlugin({
    staticDir: path.join(__dirname, 'dist'),
    routes: [
        "/",
        "/board/1",
        "/board/2",
    ],
    renderer: new PrerenderSpaPlugin.PuppeteerRenderer({
      renderAfterElementExists: '#app'
    }),
  }),
];

module.exports = {
  lintOnSave: false,
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(...productionPlugins);
    }
  },
};

필요하다면 (게시글을 포함한) 모든 페이지를 routes array에 추가할 수 있도록 코드를 작성하신 뒤 vue.config.js 파일을 저장합니다.

 

빌드 후에는 dist 경로 밑에 routes 배열에 지정한 페이지의 디렉토리가 생기고 index.html 이 해당 디렉토리마다 생성된것을 확인 가능합니다.

 

여기까지 진행되면 추가 작업없이 검색엔진에서 해당 글이 노출되는 것을 확인 할 수 있습니다.

 

** 추가 **

AWS S3-CloudFront 조합으로 페이지를 제공하고 구글에서 페이지를 가져가지 못하는 경우 CloudFront에서 디렉토리를 링크할 때 trailing slash 를 추가하시길 추천드립니다. https://xxx.com/board 이면 cloudfront는 https://xxx.com/board/ 로 redirection을 하는데 이런 과정때문에 구글에서 페이지를 못가져 가는 경우가 발생합니다.

 

감사합니다.