Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

開発用・簡易Webサーバー/プロクシサーバーkokoをつくった

More than 5 years have passed since last update.

つくりました。当初やりたかったところまで実装終わったのでご紹介。
githubとnpmで公開中です。

どんなもの?

クライアントサイドの開発をするときに、速攻で起動するサーバーです。
ざっくり言うと、コマンド一発で起動できるwebrickあるいはcharlesみたいなもの?

インストールは、nodeをインストールした上で、以下。

% npm -g install koko

使い方はこんな感じ。

% cd ~/Desktop/project/
% ls
css     index.html  js
% koko 
document root   : /Users/fnobi/Desktop/project
[listen 4299]

これで、ブラウザでhttp://localhost:4299にアクセスすれば、
/Users/fnobi/Desktop/projectをドキュメントルートにしたサーバーにアクセスできるというわけです。

いいところ

1, 起動が早い

名前の由来は、「とにかくここが見たいんじゃ!」の「ここ」です。
そんな雰囲気なので、とにかくすぐ起動できることを重視してます。

プロジェクトディレクトリに行ってkokoだけ打てば起動されますし、
さらにkoko -oと打てば、ブラウザが勝手に起動してくれます。(※Mac限定)

% koko -o
document root   : /Users/fujisawa-shin/Desktop/project
[listen 14535]
[open http://localhost:14535/]
(→デフォルトブラウザが立ち上がって、http://localhost:14535が開く)

2, 使用ポートをランダムに選択

plackupとかweblickのワンライナーでも、似たようなことできるんですが、
ポートは起動時の決め打ちになっているので、2つ以上同時に起動するときは、いちいちポート番号を考えなくちゃいけません。

これがだるいので、kokoでは適当に空いてるポートを見つけてきて使う形になっています。
(上のサンプルでも、実際ちがうポートが使われています)

-oオプションを使うとブラウザの起動までやってくれるので、
ポート番号をブラウザにコピペする手間もありません。

3, proxy serverにもなる

たとえば、既に公開されている http://fnobi.com というサイトの、
index.htmlだけ修正したい場合。

http://fnobi.com を作っているファイル全部をローカルでそろえてもいいですが、Webアプリケーションの場合は結構厄介です。
そこで、kokoのproxy server機能を使えば、手元ではindex.htmlだけ用意すればOKになります。

% mkdir fnobi.com
% cd fnobi.com
% curl -O http://fnobi.com/index.html
% koko -u http://fnobi.com -o
document root: /Users/fujisawa-shin/Desktop/fnobi.com
proxy: fnobi.com:80
[listen 51434]
[open http://localhost:51434/]

これでhttp://localhost:51434では、

  • 手元にファイルがある場合はそれを参照 (この場合index.htmlだけ)
  • その他のアクセスは http://fnobi.com からとってきて参照 (その他の画像やjsなどのファイル)

という形になります。わーい。

「サーバー環境をローカルに構築するとかムリ! ぼくフロント専門!」
という方にもおすすめです。

4, gruntに対応

先日、grunt-pluginも作成しました。

インストールはこんな感じで。

% cd your/grunt/project/root
% npm install grunt-koko --save-dev

これをGruntfileでloadすれば、
taskとしてkokoの起動ができます。

Gruntfile.js
// Gruntfileのサンプル
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        koko: {
            dev: { // dev環境でのkoko設定
                openPath: '/'
            },
            debug: { // debug環境でのkoko設定
                openPath: '/top.html',
                proxyURL: 'http://fnobi.com/'
            }
        }
    });

    grunt.loadNpmTasks('grunt-koko');

    grunt.registerTask('default', ['koko:dev']);
};

これで、koko起動時にブラウザを開くか、proxyのURLをどうするかなどを、
オプションで書かなくても済むようになります。やっほい!

% grunt koko:debug
document root: /Users/fujisawa-shin/Desktop/fnobi.com
proxy: fnobi.com:80
[listen 51434]
[open http://localhost:51434/top.html]

特にproxyのURLについては、プロジェクトごとに決まっていることが多いと思うので、
gruntを導入しているプロジェクトではぜひ使ってみてください。

不便なところ

1, 使用ポートをランダムに選択してしまう

これはすなわち、同じプロジェクトでも、
起動するたびに開発用URLが変わってくるということなので面倒っちゃ面倒です。

いま、プロジェクトごとにポートを固定する機能とか付けようかなぁとも思ってますが、
とりあえずは-oオプションがあるので、そんなに気にならないかも。

2, proxy serverとしては雑

charlesみたいに、ブラウザにまで干渉するタイプのproxy serverではないです。

たとえばhttp://fnobi.comのproxyとして起動した状態では、

<script src="/js/main.js"></script>と指定されていたら、手元のjs/main.jsを参照しますが、
<script src="http://fnobi.com/js/main.js">とhttpから指定されていたら、オリジナルの方が出ます。

これはちょっと現在の仕様だとしょうがない。

他にも、charlesはオプションがもっといろいろあったり、
アクセスの解析もできたりと多機能ですが、そういうのはできないです。

開発意図

クライアントサイドの開発時に、
MacならApacheを入れておいて~/Sitesを使うのが早いし、
nginxを立てておくんでもいいんですが、

やっぱり、開発中でないものにまで常時アクセスできるようになっていると鬱陶しいし、
http://localhost/~(ユーザー名)/...って感じのURLを覚えるのも地味に面倒くさい。

そこで、プロジェクトごとに開発用のサーバーを立てることを考えたんですが、
plackupとかwebrickも、ワンライナーが長くて面倒くさい。

そんなわけで、nodeだとサーバー作るの簡単だし、さらっと書こう! と思ったのがきっかけです。

その後、せっかくだしproxy serverも付けよう! とか思いついていまの形になりました。
が、個人的にはただのWebサーバーでもだいたい満足してます。

npmのhttp-proxyの使い方を調べたり、
ついでにempty-portっていうパッケージを書いたり、勉強になりました。

empty-portもそれなりに便利なので、また使うかも。
(ただし、もう少し賢いrandom port実装はあるみたい)

まとめ

自分でもがっつり使うツールができたのはいいことです。
みなさまもよろしければ、インストールしてみてください。

バグやご要望は https://github.com/fnobi/koko/issues まで!

fnobi
面白法人のテクニカルディレクター 兼 作曲家 兼 ドルヲタ ⌨️ http://github.com/fnobi 🎼 http://soundcloud.com/fnobi
http://fnobi.com/
kayac
古都鎌倉から新しい技術と面白いサービスを、次々にリリースする面白法人カヤックのフロントエンジニアチーム
http://www.kayac.com
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