概要

10年ぶりくらいに、フロントエンドに専念することになって、新規サービスを立ち上げた当初の vue-cli をバージョンアップしたら見事に沼にはまったので、備忘録がてらハマった内容と対応策を記事にまとめておく

vue-cli のバージョンアップ

vue-cli を 4.5.0 → 5.0.4 に upgrade した
ドキュメントどおりに素直に

$ vue upgrade

を実施

何が起きたか

1. https options は deprecated だぜって言われる

アプリケーション起動時に下記のようなメッセージが表示された

(node:73202) [DEP_WEBPACK_DEV_SERVER_HTTPS] DeprecationWarning: 'https' option is deprecated. Please use the 'server' option.

アプリケーションは動作しているが、deprecated なのは気になるので対応したい
その時の vue.config.js はこんな感じ

module.exports = {
  ...,
  devServer: {
    https: {
      key: fs.readFileSync('/path/to/key.pem'),
      cert: fs.readFileSync('/path/to/cert.pem'),
    },
  },
};

2. server option に移行させると insecure な WebSocket だって言われる

use the 'server' option. って言われているので、server option に https 対応を移行させる

module.exports = {
  ...,
  devServer: {
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('/path/to/key.pem'),
        cert: fs.readFileSync('/path/to/cert.pem'),
      },
    },
  },
};

これで、アプリケーションを起動すると 1. と同じようにアプリケーションは起動するが、ブラウザ側で下記のようなエラーメッセージが出力されて何も動かない状態に。。

WebSocket なんて聞いてないぞ。。

3. WebSocket の client option を追加

分からなすぎて、vue-cli の migration guide を一通り読んで見たところ、WebSocketに関連する option を発見したので追加してみた
https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

module.exports = {
  ...,
  devServer: {
    host,
    port,
    server: {
      type: 'https',
      options: {
        key: fs.readFileSync('/path/to/key.pem'),
        cert: fs.readFileSync('/path/to/cert.pem'),
      },
    },
    client: {
      webSocketURL: {
        hostname: host,
        port,
        pathname: '/ws',
      },
    },
  },
};

host, port は devServer と同じものを指定
この client option を追加することで、WebSocket の問題も解決し、https option の deprecation も解決した