拡張機能『Live Server』 ～ HTTPSを有効にする

VS Codeの拡張機能『Live Server』で起動するローカルサーバーをHTTPS化する手順をまとめました。

HTTPSを有効にする手順

Live Serverのインストール

もしまだインストールしていない場合、ここを参考にインストールしてください。

自己署名証明書の作成

HTTPS化するには認証局の署名が入った証明書が必要ですが、ローカル環境だとパブリック認証局の署名をもらうことができません。仮にできたとしても大体は料金がかかってしまうため、検証などで試しに使いたいだけ。といった場合だと使い勝手が悪いです。であれば、ローカル認証局もしくは直接自分自身が署名できればいいですよね。
ということで、ここでは自分で署名した証明書（＝自己署名証明書。通称：オレオレ証明書）をローカルサーバーに適用したいと思います。

自己署名証明書の作成方法はここにまとめましたので参考にしてください。
※crtファイルの作成まででOKです。

Live Serverの設定変更

前段で作成した証明書と秘密鍵をLive Serverに設定します。

VS Codeで設定ファイルを開き（Ctrl + Shift + P）、下記設定を追加してください。

  "liveServer.settings.https": {
    "enable": true,
    "cert": "[自己署名証明書までのパス]\\test_crt.crt",
    "key": "[秘密鍵までのパス]\\test_private.key",
    "passphrase": ""
  },

デバッグ用設定変更

VS Codeのデバッグ用設定を開きます。

url部分をhttpsに変更して下さい。

    "configurations": [
        {
　　　　　　・
　　　　　　・
　　　　　　・
            "url": "https://127.0.0.1:5500/***",
　　　　　　・
　　　　　　・
　　　　　　・
        }
    ]

ブラウザ（Chrome）で証明書を有効化

今の時点でローカルサーバーを起動してもおそらくエラーになるはずです。
[保護されていない通信]をクリックしてください。
※エラーの内容は人によって違うかもしれません。

Chromeの設定を開きます。

エラーなくブラウザを表示できるか確認

ブラウザを再起動すると、HTTPS化できていると思います。