VSCodeを用いた簡易Webサーバー構築
目的
手っ取り早くWebアプリを開発するときに,動作確認のためにサーバーをいちいち用意するのは面倒くさい.そこで今回はVSCodeの拡張機能である「Live Server」や「PHP Server」を用いて,ローカルサーバーで簡単に動作確認できるようにする.
事前準備
今回は.htmlファイルと.phpファイルをローカルサーバーで実行することを目的としている.そのためまずは必要な.htmlファイルや.phpファイルを準備する.次にVSCodeを開いて,左上部のメニューから ファイル > フォルダーを開く を選択して.htmlや.phpがあるフォルダを選択する.これをしないとうまく動作確認ができない.
Live Serverの利用手順
「Live Server」をインストールすると,VSCode内でWebサイトを作成した際に,HTMLやJavaScript,CSSなどの静的ファイルをローカルサーバーで表示することができる.
Live Serverのインストール
Live ServerをVSCodeでインストールする.インストール後VSCodeを再起動する.
ローカルサーバーの起動
.htmlを選んで,右下のGoLiveを選ぶとブラウザでhtmlが開ける.
PHP Serverの利用手順
「PHP Server」をインストールすると,VSCode 内から直接,PHP組み込みサーバーを起動し,PHPファイルをブラウザでプレビューすることができる.
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」みたいなやつをクリックすればよい.
Discussion