VSCodeを用いた簡易Webサーバー構築

目的

手っ取り早くWebアプリを開発するときに，動作確認のためにサーバーをいちいち用意するのは面倒くさい．そこで今回はVSCodeの拡張機能である「Live Server」や「PHP Server」を用いて，ローカルサーバーで簡単に動作確認できるようにする．

事前準備

今回は.htmlファイルと.phpファイルをローカルサーバーで実行することを目的としている．そのためまずは実行したい.htmlファイルや.phpファイルを準備する．次にVSCodeを開いて，左上部のメニューから「ファイル」> 「フォルダーを開く」を選択して.htmlや.phpがあるフォルダを選択する．これをしないと正常に動作しない．

Live Serverの使用

Live Serverとは

「Live Server」をインストールすると，HTMLやJavaScript，CSSなどの静的ファイルをローカルサーバーで表示することができる．

Live Serverの利用手順

Live Serverのインストール

Live ServerをVSCodeでインストールする．インストール後VSCodeを再起動する．

ローカルサーバーの起動

.htmlを選んで，右下のGoLiveを選ぶとブラウザでhtmlが開ける．

PHP Serverの使用

PHP Serverとは

「PHP Server」をインストールすると，VSCode内から直接，PHP組み込みサーバーを起動し，PHPファイルをブラウザでプレビューすることができる．

PHP Serverの利用手順

php.exeのダウンロード

php.exeをダウンロードして，PHPが使えるようにする必要がある．今回はWindowsでのやり方を記述する．「PHPのダウンロードとインストール - Windows10」を参考にした．
まずPHPの公式ページにアクセスする．次に「Windows downloads」をクリックする．

次に以下の画像のように(今後いずれApacheでの利用を念頭に置いているので)Thread SafeのZipをダウンロードする．最後にダウンロードしたZipを「C:\php\」に解凍する．

PHP Serverのインストール

VSCodeに移り，拡張機能の所でPHP Serverと検索してインストールする．

次に先ほどダウンロードしたphp.exeのパスを通す作業を行う．手順は「ファイル（F）」>「ユーザー設定」>「設定」と順にクリックし，検索ボックスに下図のように「phpserver.phpPath」と入力する．そして出てきた入力欄に先ほどのphp.exeのパスを入力する．

.phpファイルを開く

これで準備は整ったので，.phpを開いて下図のように右上のボタンを押すと，Webページに表示される．停止するときは右クリックして，メニューバーの「PHPStopServer」をクリックすればよい．