HTTPSのLive Serverを立てる

Bloggerがhttpからのローカルスクリプトを読み込んでくれなくなったので、httpsでサーバーをローカルサーバーを立てることが必要になりました。

live-server - npm

このnode.jsのlive-serverを使うととても簡単にhttpsサーバーを立てることができました。

Live Serverなのでファイルの更新があったらそれを察知して自動で反映してくれます。

live-serverのインストール

このnvmをインストールした状態のnode v12.2.0を使いました。

npm install -g live-server

npm install --g live-server-https

これだけで準備完了です。

pq@pq-VirtualBox:~$ nvm current
v12.2.0
pq@pq-VirtualBox:~$ npm install -g live-server
npm WARN deprecated opn@6.0.0: The package has been renamed to `open`
/home/pq/.nvm/versions/node/v12.2.0/bin/live-server -> /home/pq/.nvm/versions/node/v12.2.0/lib/node_modules/live-server/live-server.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/live-server/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ live-server@1.2.1
updated 1 package in 6.109s
pq@pq-VirtualBox:~$ npm install --g live-server-https
+ live-server-https@0.0.2
updated 1 package in 0.739s

live-server 1.2.1がインストールされました。

ローカルのHTTPSサーバーを起動する

live-server --https=./.nvm/versions/node/v12.2.0/lib/node_modules/live-server-https

これでデフォルトブラウザが立ち上がってホームフォルダのファイルにブラウザでアクセスできるようになります。

--htpps=の値はlive-server-httpsファルダのパスを指定します。

~は展開されるのですが、~自体が消えないのでパスの指定には使えませんでした。

サーバーを終了させるにはKonsoleでCtrl+Cします。

Firefoxの場合

最初に起動したときはセキュリティリスクがあると言われます。

これはlive-serverが使っている証明書が認証を受けていないためです(live-server-https - npm)。


Firefoxの場合は「詳細」ボタンをクリックして「危険性を承知で続行」をクリックするとlive-serverのhttpsにアクセスできるようになります。


安全ではないといわれていますが、自分で立てたローカルサーバーなので問題ないでしょう。

 Chromiumの場合

 「続行」をクリック。


 「永久」をクリックすると 次からこのダイアログは出てこなくなります。


「詳細設定」をクリックします。


「127.0.0.1にアクセスする（安全ではありません）をクリックするとようやくページにアクセスできます。


httpsに打ち消し線がついていますが、httpsとしてアクセスできます。

~/.live-server.jsonファイルでデフォルトオプションを指定

毎回長いオプションを指定するのは面倒なのでデフォルトオプションを~/.live-server.jsonファイルを作ってそこに書いておきます。

 {
    "https": "/home/pq/.nvm/versions/node/v12.2.0/lib/node_modules/live-server-https",
    "browser": "chromium-browser"
}

このようにlive-server-httpsへのパスとデフォルトブラウザをChromiumに指定しました。

これでlive-serverと打つだけでhttpsサーバーが立ち上がって、Chromiumで起動したフォルダにあるファイルがみれるようになります。