html, css, jsファイルだけ手元にあって、
でもとりあえずlocalhostで確認したいときに、
楽な方法ないかねと思いこんなのを発掘。
VS Codeで見れるのかってことで、live Server使うことにしたけど、
ChromeでHTTPSで見るまでの道のりが思ったより長かったので、備忘録も兼ねて。
live Serverのインストール
まずはここから。いれるだけ。
いれただけだと、https://ではみれない。
ただこれだけだと、ws://かなにかから始まるもので、
肝心のhttps:// or http:// から始まるやつではみれない。
なので、
①live Serverでhttpsで見れる設定をする必要がある。
でも、httpsで見れる設定をしただけだとChromeとかで保護されない通信になり諸々エラーで苦しむ。
なので、
②Chromeで自己証明書をパスするように設定しないといけない。
②→①の順で設定したらOK。
自己証明書作成
Chromeで見るのに自己証明書（オレオレ証明書）を用意。
とりあえず何も考えず証明書用意しただけだと通らず。
Chromeの仕様で、SAN(Subject Alternative Name)を設定した証明書じゃないといけない。
Chromeのバージョンが変わって仕様も変わったらここも変わることはありそう。
見た範囲ではこれが一番楽だった。
https://qiita.com/nis_nagaid_1984/items/b8f87d41ea108d47af61
とりあえず適当な場所に次の手順でkey, cer, crt, txtを作っていく。
keyファイル作成
openssl genrsa -out server.key 2048
-des3オプションつけるとパスを設定する -> パス削除になるけど、
オプションつけなければパス設定削除しなくてよいので上でOK。
csrファイル作成
openssl req -new -key server.key -out server.csr
san.txt
subjectAltName = DNS:localhost, IP:127.0.0.1
localhostでみたいので、上でOK。
crt 作成
openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt -extfile san.txt
この後、証明書ブラウザにインポートする必要があるのだが、
その前にlive Serverの設定して、一旦サーバ起動しないといけない。
VS Codeでlive Serverの設定
詳細は
VS Codeのsetting.jsonに下記をぶちこむ。
Ctrl + Shift + P -> setting で見つかるファイル。
{
"liveServer.settings.https": {
"enable": true,
"cert": "", // つくったserver.crt をフルパスでいれる
"key": "", // つくったserver.key をフルパスでいれる
"passphrase": ""
}
}
自己証明書をブラウザに登録
これで Go Liveすると、ちゃんと開くが、証明書をブラウザにいれてないので、
赤い保護されてない通信のエラーが出るけど、ブラウザに登録する。
手順はここがわかりやすい。
完了
登録後、ブラウザを再起動して、Go Liveしたら
保護された通信で表示ができる。
今回、情報がバラバラした情報を調べて試していたら2時間ぐらいかかったけど
一通りの手順さーっとするのはそんなに時間がかからないと思う。