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

69
Like
3
Comment

posted at 2016-01-08

More than 1 year has passed since last update.

始めに

最近のHTML/JavaScriptの新機能を使うには、ファイルをブラウザで直接開くのではなく(file://～)、Webサーバーを立てて http://～にブラウザでアクセスしなければならないケースが増えてきました。
そんな時にApacheやnginxを自分でセットアップできる人は問題ないのですが、そうでない人向けに「お手軽なWebサーバーの立て方」を整理してみました。

Chrome アプリ編
Windows アプリ編
Mac コマンドライン編
全部入り編（お手軽ではないですが）

Chrome アプリ編

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

Web Server for Chrome

ストアのページ

ランチャーから起動

設定

Windows アプリ編

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

簡単WEBサーバー

http://www.vector.co.jp/soft/dl/winnt/net/se381431.html
短縮URL http://goo.gl/vGsBv1
インストーラー無し。解凍して KantanWEBServer.exe を直接起動します ※起動時にWindowsファイアーウォールの確認ダイアログが表示されたら、[アクセスを許可]してください

設定

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

04WebServer

http://www.vector.co.jp/soft/dl/winnt/net/se305171.html
短縮URL http://goo.gl/SYPf4j
シンプルだけど、もう少し高機能なWebサーバー
TLSでの通信や、CGIの実行にも対応（しているらしいです）
サービスとしての起動も可能（お手軽に試す分には、サービス化は不要です）
起動はスタートメニューから ※起動時にWindowsファイアーウォールの確認ダイアログが表示されたら、[アクセスを許可]してください

ポートの指定

フォルダの指定

Mac コマンドライン編

Mac OS X の場合、Apacheがあらかじめインストールされています。その使い方が分かる人はそのまま使ってください。
Apacheの使い方が分からなくても、ターミナルでコマンドラインが操作できる人は、次の方法があります。

Pythonを利用

Mac OS X に最初からインストールされている Python を利用
参考 http://qiita.com/mamoida/items/45a31859bdac6d0ab86c
ターミナルで操作
- cd ドキュメントルートとなるフォルダ
- python -m SimpleHTTPServer 8080
- ※8080は利用したいポート

PHPを利用

Mac OS X に最初からインストールされている PHP を利用
参考 http://blog.mach3.jp/2012/09/21/check-html-with-simple-server.html
ターミナルで操作
- cd ドキュメントルートとなるフォルダ
- php -S localhost:8080
- ※8080は利用したいポート

全部入り編

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

XAMPP

X(色々なOSを意味する)のための Apache + MySQL + PHP + Perl のセット
https://www.apachefriends.org/jp/index.html
http://pc-karuma.net/xampp/
※詳細はサイトをご覧ください

MAMP

Mac + Apache + MySQL + PHP　(といいつつ、Windows用もあり)
https://www.mamp.info/en/
http://pc-karuma.net/mamp/
※詳細はサイトをご覧ください

終わりに

WebRTC Conference Japan 2016で、2/17に「WebRTC Boot Camp」と題して初心者向けのハンズオンを担当します。
http://webrtcconference.jp/session/
ハンズオンに参加される方は、こちらの記事を参考にWebサーバーをご準備のうえ、ご参加ください。
お待ちしています！

#始めに
最近のHTML/JavaScriptの新機能を使うには、ファイルをブラウザで直接開くのではなく(file://～)、Webサーバーを立てて http://～ にブラウザでアクセスしなければならないケースが増えてきました。
そんな時にApacheやnginxを自分でセットアップできる人は問題ないのですが、そうでない人向けに「お手軽なWebサーバーの立て方」を整理してみました。

* Chrome アプリ編
* Windows アプリ編
* Mac コマンドライン編
* 全部入り編（お手軽ではないですが）

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

## Web Server for Chrome

* https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja
* 短縮URL https://goo.gl/q0QFjz

#### ストアのページ

![chome_web_server.png](https://qiita-image-store.s3.amazonaws.com/0/19403/d0e729e4-e1b0-df50-62a4-bb9b60568f31.png)

#### ランチャーから起動
![chrome_app_launcher.png](https://qiita-image-store.s3.amazonaws.com/0/19403/1929f477-7955-d0f8-0a12-45434cadfa97.png)

#### 設定
![chome_web_server_setting.png](https://qiita-image-store.s3.amazonaws.com/0/19403/71dcec94-1df5-2858-0607-32dc574d0f70.png)

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

## 簡単WEBサーバー
* http://www.vector.co.jp/soft/dl/winnt/net/se381431.html
* 短縮URL http://goo.gl/vGsBv1
* インストーラー無し。解凍して KantanWEBServer.exe を直接起動します
※起動時にWindowsファイアーウォールの確認ダイアログが表示されたら、[アクセスを許可]してください

#### 設定
Portを指定→[追加]ボタンでフォルダーを選択→[待ち受け開始します]ボタンでスタート
![kantan_web_server_setting.png](https://qiita-image-store.s3.amazonaws.com/0/19403/607f1165-b3e5-941a-6104-34de6372e34d.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](https://qiita-image-store.s3.amazonaws.com/0/19403/ee05374d-04c4-493f-bb6b-ec2428aee99b.png)

#### フォルダの指定
![04web_server_dir.png](https://qiita-image-store.s3.amazonaws.com/0/19403/b4909d5b-d2b2-5c90-fcfd-b2a6e003cf17.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を利用
* Mac OS X に最初からインストールされている PHP を利用
* 参考 http://blog.mach3.jp/2012/09/21/check-html-with-simple-server.html
* ターミナルで操作
    * cd *ドキュメントルートとなるフォルダ*
    * php -S localhost:*8080*
    * ※*8080*は利用したいポート

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

## XAMPP
* X(色々なOSを意味する)のための Apache + MySQL + PHP + Perl のセット
* https://www.apachefriends.org/jp/index.html
* http://pc-karuma.net/xampp/
* ※詳細はサイトをご覧ください

## MAMP
* Mac + Apache + MySQL + PHP　(といいつつ、Windows用もあり)
* https://www.mamp.info/en/
* http://pc-karuma.net/mamp/
* ※詳細はサイトをご覧ください

# 終わりに
WebRTC Conference Japan 2016で、2/17に「WebRTC Boot Camp」と題して初心者向けのハンズオンを担当します。
http://webrtcconference.jp/session/
ハンズオンに参加される方は、こちらの記事を参考にWebサーバーをご準備のうえ、ご参加ください。
お待ちしています！