vue-cliのdev-serverをhttps化する

こんにちわ。

先日ついにVue.jsへ手を出し始めました。
敷居高そうで食わず嫌いしてましたが、(とりあえず入口は)全然そんな事無かったです。

さて本題。
npm run devした時のサーバーをHTTPS化するTipsです。
検索すると似たような事例は幾つかあったのですが、どれも上手く行かなかったので、自分の環境で成功した方法を記しておきます。

内部で予め用意されている証明書と、自分で用意した証明書と、どっちも使えるらしいので、簡単に変更出来るようにしました。

基本的に設定変更は./config/index.jsで行います。

./config/index.diff

--- ./config/index.js
+++ ./config/index.temp
@@ -11,10 +11,14 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {},
+    tlsKeyPath: path.resolve(__dirname, '../build/server.key'),
+    tlsCrtPath: path.resolve(__dirname, '../build/server.crt'),

     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 443, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    https: true,
+    useOwnCertificate: true,
     autoOpenBrowser: false,
     errorOverlay: true,
     notifyOnErrors: true,

./build/webpack.dev.conf.diff

--- ./build/webpack.dev.conf.js
+++ ./build/webpack.dev.conf.temp
@@ -3,6 +3,7 @@ const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
 const merge = require('webpack-merge')
+const fs = require("fs")
 const path = require('path')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
@@ -33,6 +34,11 @@ const devWebpackConfig = merge(baseWebpa
     compress: true,
     host: HOST || config.dev.host,
     port: PORT || config.dev.port,
+    https: config.dev.https
+      ? config.dev.useOwnCertificate
+        ? { key: fs.readFileSync(config.dev.tlsKeyPath), cert: fs.readFileSync(config.dev.tlsCertPath) }
+        : true
+      : false,
     open: config.dev.autoOpenBrowser,
     overlay: config.dev.errorOverlay
       ? { warnings: false, errors: true }
@@ -82,7 +88,7 @@ module.exports = new Promise((resolve, r
       // Add FriendlyErrorsPlugin
       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
         compilationSuccessInfo: {
-          messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`],
+          messages: [`Your application is running here: ${devWebpackConfig.devServer.https?'https':'http'}://${devWebpackConfig.devServer.host}:${port}`],
         },
         onErrors: config.dev.notifyOnErrors
         ? utils.createNotifierCallback()