Help us understand the problem. What is going on with this article?

お手軽な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サーバーをご準備のうえ、ご参加ください。
お待ちしています!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした