概要
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 サーバは有効になっていないので、そちらの設定方法です。
手順は
- 証明書を作成する
-
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 を指定します。
"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