Live Server for Visual Studio Code で HTTPS を有効にする

概要

Visual Studio Code (以下、VScode) の機能拡張 Live Server で HTTPS を有効にする方法です。

Live Server とは

https://www.nxworld.net/services-resource/vscode-extension-live-server.html こちらで

ライブリロード機能を備えた簡易ローカルサーバーを起動できる拡張機能

と紹介されてますが、まさにその通りです。インストールした後、ディレクトリを VScode で開くと Go Live ボタンが出てくるので、それをクリックするだけで Live Reload が有効になったローカルサーバとブラウザが立ち上がります。

なんで探してたのか

たとえば WebWorker とか file:/// では実行できないようなものをサクっと実行したいなという思いからです。
今までは python3 -m http.server とか Python3 でワンライナー HTTPdを立ち上げてたりしてたんですけど、引数を毎度忘れてしまったり、HTTPS に対応させる方法が面倒だったという背景です。

Live Server の HTTPS を有効にする

標準では HTTPS サーバは有効になっていないので、そちらの設定方法です。
手順は

1. 証明書を作成する
2. settings.json を書く

となります

証明書を作成する

ローカルですのでオレオレ(自己署名証明書)で構わないと思います。

$ openssl req -x509 -newkey rsa:4096 -sha256 \
 -nodes -keyout vscode_live_server.key.pem \
 -out vscode_live_server.cert.pem \
 -subj "/CN=example.com" -days 3650
$ ls
vscode_live_server.cert.pem  vscode_live_server.key.pem

※ ワンライナーで作れちゃうんですね

settings.json を書く

先ほど作った .pem を指定します。

settings.json

"liveServer.settings.https": {
        "enable": true,
        "cert": "C:\\Users\\YOUR\\Documents\\vscode_live_server_pems\\vscode_live_server.cert.pem",
        "key": "C:\\Users\\YOUR\\Documents\\vscode_live_server_pems\\vscode_live_server.key.pem",
        "passphrase": ""
    },

以上です。次回の "Go Live" から https://127.0.0.1:PORT でブラウザが立ち上がります。
もちろん NET::ERR_CERT_AUTHORITY_INVALID となりますが、そこは気にせず開いてください。

あとがき

VScode は、もはや OS だ。

EoT