背景
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にブラウザを起動 |