[VUE3 + Webpack] SEO 설정 파일(robots.txt, sitemap.xml) 개발/운영 환경 분기 처리

SEO 설정 파일이 운영서버에만 반영되어야 하는 요건이 생겼다.

---

1.  파일 경로 설정

public 바로 밑에 robots.txt 파일을 넣으면

https://주소/robots.txt 로 접속했을 때 브라우저에 해당 파일이 나온다.

 

하지만 개발서버에서는 해당 파일들이 나오지 않게 만들어야 해서

public 폴더 아래에 prod라는 폴더를 만들고 그 안에 파일들을 넣었다.

 

2. Webpack 플러그인 받기

파일을 복사하기위해 CopyWebpackPlugin 모듈을 받는다.

npm install copy-webpack-plugin --save-dev

 

오류가 발생하여 webpack 버전을 보니 4.x 버전을 사용하고 있어 @4를 붙여 받았다.

npm install copy-webpack-plugin@4 --save-dev

 

3. Webpack 설정

vue.config.js파일에서 웹팩설정을 관리하고 있어 해당 파일을 수정했다.

// vue.config.js
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {

/** 중략  */

configureWebpack: (config) => {
    // 기본 설정을 유지하고 추가적인 설정을 적용할 수 있도록 복제합니다.
    config.plugins = config.plugins || [];

    // isProduction이 true인 경우에만 플러그인을 추가합니다.
    if (isProduction) {
      config.plugins.push(
        new CopyPlugin([
        { from: 'public/prod/robots.txt', to: '' },
        { from: 'public/prod/sitemap.xml', to: '' }
        ])
      );
    }
  },
};

 

개발서버와 운영서버에 반영 된 후

/robots.txt 나 /sitemap.xml 로 접속했을때 

개발서버에서는 페이지를 찾을 수 없다는 오류가 발생하고

운영서버에서는 해당 파일이 나왔다.