Edited at

お手軽なWebサーバーの立て方

More than 1 year has passed since last update.


始めに

最近のHTML/JavaScriptの新機能を使うには、ファイルをブラウザで直接開くのではなく(file://~)、Webサーバーを立てて http://~ にブラウザでアクセスしなければならないケースが増えてきました。

そんな時にApacheやnginxを自分でセットアップできる人は問題ないのですが、そうでない人向けに「お手軽なWebサーバーの立て方」を整理してみました。


  • Visual Studio Code 拡張機能編 (2018.07.03追加)

  • Chrome アプリ編

  • Windows アプリ編

  • Mac コマンドライン編

  • 全部入り編(お手軽ではないですが)


Visual Studio Code 拡張機能編(2018.07.03追加)

こちらの記事で便利な拡張機能について知りました。


インストール方法


  • Visual Studio Code の拡張機能タブで、"Live Server" を検索してインストール

  • あるいは Visual Studio Marketplace の Live Server のページをブラウザで開いてインストール


起動方法

Visual Studio Code のステータスバーの右下の[Go Live]をスタートすると、サーバーが開始します。

(Windowsの場合、Windowsファイヤーウォールで通信を許すかどうか聞かれるので、許可してください)

デフォルトでは5500番ポートのようです。

vscode_golive.png


Chrome アプリ編

もっともお手軽な方法です。Windows / Mac / Linuxデスクトップ / Chromebook で使えます。

※2018年6月時点で、ChromeアプリはChromebookのみの公開に限定されています。WindowsやMacで検索しても見つかりません。が、URLを直接開くとまだダウンロードすることができます。


Web Server for Chrome


ストアのページ

chome_web_server.png


ランチャーから起動

chrome_app_launcher.png


設定

chome_web_server_setting.png


Windows アプリ編

Windowsの場合、手軽に動かせるWebサーバーアプリがあります。


簡単WEBサーバー


設定

Portを指定→[追加]ボタンでフォルダーを選択→[待ち受け開始します]ボタンでスタート

kantan_web_server_setting.png


04WebServer


  • http://www.vector.co.jp/soft/dl/winnt/net/se305171.html

  • 短縮URL http://goo.gl/SYPf4j

  • シンプルだけど、もう少し高機能なWebサーバー

  • TLSでの通信や、CGIの実行にも対応(しているらしいです)

  • サービスとしての起動も可能(お手軽に試す分には、サービス化は不要です)

  • 起動はスタートメニューから
    ※起動時にWindowsファイアーウォールの確認ダイアログが表示されたら、[アクセスを許可]してください


ポートの指定

04web_server_port.png


フォルダの指定

04web_server_dir.png


Mac コマンドライン編

Mac OS X の場合、Apacheがあらかじめインストールされています。その使い方が分かる人はそのまま使ってください。

Apacheの使い方が分からなくても、ターミナルでコマンドラインが操作できる人は、次の方法があります。


Pythonを利用


  • Mac OS X に最初からインストールされている Python を利用

  • 参考 http://qiita.com/mamoida/items/45a31859bdac6d0ab86c

  • ターミナルで操作


    • cd ドキュメントルートとなるフォルダ

    • python -m SimpleHTTPServer 8080

    • 8080は利用したいポート




PHPを利用


全部入り編

もはやお手軽ではなく、Apache + MySQL + PHPなどの言語を一式インストールする場合です。GUI操作のできるインストーラーや、管理ツールがついているので、コマンドラインが苦手な人でもセットアップは可能です。


XAMPP


MAMP


終わりに

WebRTC Conference Japan 2016で、2/17に「WebRTC Boot Camp」と題して初心者向けのハンズオンを担当します。

http://webrtcconference.jp/session/

ハンズオンに参加される方は、こちらの記事を参考にWebサーバーをご準備のうえ、ご参加ください。

お待ちしています!