vue js webpack ssl(https) npm run dev 서버 적용 방법

vue js webpack ssl(https)  npm run dev  서버 적용 방법

webpack의 dev 환경 에서 ssl 을적용해야 할때가 생겨서 정리해 봤습니다.

일단 SSL 적용을 위해서 도메인 하나를 무료로 만들었습니다.

my.freenom.com 에서 만들었습니다.

도메인 IP 는 현재 자신 PC의 공인 IP로 셋팅 하였습니다.

그리고 나서

letsencrypt certbot 사용하기

http://idlecomputer.tistory.com/226

게시물을 보면 무료로 ssl 을 발급 받는 방법을 소개 합니다.

간단하게 하면

$ wget https://dl.eff.org/certbot-auto
$ chmod a+x certbot-auto

$ sudo /path/to/certbot-auto certonly  -d webrot360.tk

위와 같이 하면

/etc/letsencrypt/live/webrot360.tk/

에 들어가면  4개의 파일이 있습니다.

SSL 등록을 위해서 위의 파일들이 필요 합니다.

그리고 나서  webpack의

webpack.dev.conf.js

기존 설정에서

devServer: {

https: true,

https: {

key: fs.readFileSync('/etc/letsencrypt/live/webrot360.tk/privkey1.pem'),

cert: fs.readFileSync('/etc/letsencrypt/live/webrot360.tk/cert1.pem'),

ca: fs.readFileSync('/etc/letsencrypt/live/webrot360.tk/chain1.pem'),

},

}

위와 같이 devServer 에  추가해 줍니다.

그리고 나서

config 폴더의 index.js  을 열어 보면

module.exports = {

dev: {

// Paths

assetsSubDirectory: 'static',

assetsPublicPath: '/',

proxyTable: {},

// Various Dev Server settings

host: 'webrot360.tk', // 요기 부분을 바꿔 줍니다.

port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined

autoOpenBrowser: false,

errorOverlay: true,

notifyOnErrors: true,

poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

/**

* Source Maps

*/

// https://webpack.js.org/configuration/devtool/#development

devtool: 'cheap-module-eval-source-map',

// If you have problems debugging vue-files in devtools,

// set this to false - it *may* help

// https://vue-loader.vuejs.org/en/options.html#cachebusting

cacheBusting: true,

cssSourceMap: true,

},

그리고 나서

npm run dev 을 하면

위와 같이 webpack dev 서버에 https 가 적용 된것을 볼수 있습니다.