タグ別アーカイブ: http

フロントエンドの開発でファイルプロトコル(file://…)ではなくHttpプロトコル(http://)を使う


※ローカルにApacheを立ててバーチャルホストを作って云々という話ではありません。


背景

フロントエンドの開発において、htmlファイルをサクッとブラウザで開けば(file://…)、Javascript, css が動くというのはとてもメリットだと思うのですが、実際にサーバにアップロードしてアクセスするときにはほぼ100% Httpプロトコル(http://)でアクセスすると思います。そういった環境をローカル開発でも使うといいと思います。

file://hoge/fuga/index.html」などをブラウザ確認するとファイル内で imgタグ, scriptタグ, linkタグ などは以下のように 相対パス で書くことになると思うのですが、それをサーバにアップする時に 絶対パス に直すということをしている人は多いと思います。

<img src="img/hoge.png">
<link rel="stylesheet" href="css/hoge.css" />
<script src="js/hoge.js"></script>

その際、いちいち変換するのは面倒くさいので、pythonやrubyで動かせる簡易Webサーバを立ち上げてHttpプロトコル(http://…)で開発をしましょうという話です!

前提条件

  • Python or Rubyがインストールされているマシンを用意する(Macなら大丈夫。windowsはpythonとか入っていても起動できるかは謎)

  • ファイル構成

/tmp/workspace/
├── index.html
└── js/
    └── app.js
<html>
<head></head>
<body>
<h1>テストページ</h1>
<script src="/js/app.js"></script>     <!-- 絶対パスapp.jsを指定している -->
</body>
</html>

Pythonを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ python -m SimpleHTTPServer 3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

Rubyを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ ruby -run -e httpd . -p 3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

PHPを使った例

ドキュメントルートとなるディレクトリへ移動する
$ cd /tmp/workspace

Webサーバを立ち上げる(3000はポート番号なので開いているPortなら何番でもOK)
$ php -S localhost:3000

ブラウザを立ち上げて http://localhost:3000 へアクセスすると index.html が表示されます!

さらなるTips

Python、Rubyの場合は デフォルトの index.html がない状態でフォルダ指定してアクセスすると、DirectoryIndexが表示されファイルリストを見ることができます。
今回の場合は以下のように js フォルダにアクセスすると

http://localhost:3000/js

以下の様な画面が出力されます。(Rubyを使った場合)

Ruby-webrick-directoryindex

参考サイト

ワンライナーWebサーバを集めてみた -Qiita