ローカルサーバがChromeアプリで簡単に立てられる「Web Server for Chrome」

HTML+CSSにJavaScriptが絡んでくると、ブラウザによってはローカルサーバでないと動作確認できないこともありますよね。

職場では「XAMPP」を使っているのですが、デフォルトでは /xampp/htdocs/ 配下にローカルサーバで表示させたいファイルを置くように設定されているかと思います。
これを変更するにはhttpd.confファイルを編集しないといけなかったりします。

これはこれで良いのですが、もっと手軽に任意のフォルダでローカルサーバを立てられる方法がありました。Chromeアプリで。Chromeに追加するだけです。
簡単すぎてほんまかなと思いつつ入れてみました。

導入方法

インストール

Chromeから下記chromeウェブストアのページを開いて「Web Server for Chrome」のアプリを追加します。
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb

追加したら、アプリ一覧(chrome://apps/)に飛ばされます。「Web Server」のアイコンが追加されてるのでクリックすると「Web Server for Chrome」がポップアップで出てきます。ここから設定をしていきます。

※アプリ一覧(chrome://apps/)かウェブストアのページ(https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb)をブックマークしておくと便利です。

「Web Server for Chrome」の設定

1)Web Server: STARTED にする(デフォルトでなってるかも)
2)「CHOOSE FOLDER」をクリックしてローカルサーバに置きたいフォルダやファイル(index.htmlなど)を選択
3)Web Server URL(s)のURLをクリックしてチェック!

これで確認できるかと思います。
当たり前ですが、他のブラウザでも確認できます…すごいお手軽。
ただ、phpは確認できなかったです。HTML+CSS+JavaScriptのみの構成であれば使えるなあと思いました!

参考記事:https://twitter.com/tonkotsuboy_com/status/868397954532495360

タイトルとURLをコピーしました