VSCodeで簡単ローカルWebサーバ

アプリ開発

発端

HTML/CSS + JavaScript の静的サイトであれば、わざわざローカルにWebサーバを立てなくても、HTMLファイルをブラウザで開けば動作確認できる。しかし、JavaScriptからサイト内のファイルにアクセスする場合、例えば画像ファイルを読み込む下記のようなコードではエラーになる。これはセキュリティー上の理由からローカルファイルへのアクセスを禁止しているためである。このようなコードの動作確認のためにはWebサーバが必要になる。

const img = new Image();
img.src = "./image.png";

【エラーメッセージ】

Access to image at 'file:///C:/(中略)/image.png' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

昔話

昔々はApacheやIISでローカルにWebサーバを立てたりした。BlackJumboDogとかXAMPPなんていう便利なやつもあった。

VSCodeでLive Server

今はもっと便利な方法がある。Live ServerというVSCodeの拡張機能である。HTML/CSS + JavaScript の静的サイトに限られるが、エディタからWebサーバを起動できて超簡単である。

Live Serverのインストール

拡張機能で Live Server を検索してインストールする。


Webサーバの起動

VSCodeでサイトのフォルダを開くと、下段に「Go Live」ボタンが表示される。これをクリックするとWebサーバが起動し、自動的にブラウザも起動してサイトが表示される。


Webサーバの停止

Webサーバが起動すると、下段には停止ボタンとポート番号が表示される。これをクリックするとWebサーバが停止する。