背景

Vscodeの拡張機能でRitwick Deyが開発した「Live Server」。「Go live」ボタンを押せば簡単にローカルでサーバーを立ち上げることができる便利なツールですが、「ファイルの開き方によってはGo liveボタンが表示されない」「エラーになって反応しなくなった」など不具合が生じる場合があります。そこでVscodeの拡張機能ではないコマンドラインでエディターに依存せずサーバーを立ち上げる方法があったので記事にしてみました。

※内容に間違いなどがある場合はご指摘をよろしくお願いします。

live-serverの使い方

インストールの前にどんなものなのか、使い方を紹介します。手順は以下の通り。

①コマンドラインで、まずはサーバーを起動させたいフォルダーに移動します。
②「live-server」と入力してenterキーを押す

❯ cd hogehoge

~/hogehoge
❯ live-server
Serving "/Users/username/hogehoge" at http://127.0.0.1:8080
Ready for changes

ブラウザでウィンドウが開き、サーバーが起動してページが表示されます。

live-serverを使う理由

①AJAXのリクエストはサーバーが立ち上がらないとセキュリティ上の理由で正しく表示されません。
②コードが修正されたらリアルタイムでブラウザに表示してくれます。開発が楽になりますね。

live-serverのインストール方法

①npm
以下のコードを入力します。

npm install -g live-server

いくつかエラーが出ますが、問題は起こりませんので無視します。
-gオプションはgobalを意味し、どこからでも「live-server」を使えるようになります。

②github

git clone https://github.com/tapio/live-server
cd live-server
npm install # Local dependencies if you want to hack
npm install -g # Install globally

オプションについて

live-serverにオプションを付けてサーバーを立ち上げる際のポート番号やアドレスなどを指定することもできます。

オプション	概要
--port = NUMBER	使用するポートを選択します。デフォルト：PORT env varまたは8080
--host = ADDRESS	バインドするホストアドレスを選択します。デフォルト：IP env varまたは0.0.0.0（「任意のアドレス」）
--no-browser	ブラウザの自動起動しなくなります
--browser = BROWSER	使用するブラウザを指定します
--quiet	-q
--verbose	-V
--open = PATH	PATHにブラウザを起動

参考サイト