hitode909の日記

趣味はマリンスポーツですの日記です

HTMLとJSだけで何か作るときの

HTMLとJSだけで何か作ることが多くて,開発環境をどう作るかとか,ノウハウみたいなのがたまってきたと思う.
ローカルのHTMLファイルをブラウザで開くと,いろんな制約がある.たとえば,ファイルAPIを使えないとか,YouTubeのプレイヤー貼り付けできないとか,/js/みたいに絶対パスで指定することもできない.ページ1枚なら他のページにリンクとかいらないけど,ウェブサイトを作ってるときとかは,/help/でヘルプページを表示するとか書いたときに,ローカルのファイルを見てリンクが切れてるということになる.開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い.
サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う.HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う.


開発中は,nginxでファイルを配信するだけのHTTPサーバーを立ててそれをブラウザで見るようにしてる.
下に設定ファイルみたいなのを貼った.適当に検索したりして作ったからよくわかってないけど,コマンドを実行したディレクトリがルートディレクトリになって,キャッシュは無効で,一時的なディレクトリもできないようになってる.nginxはhomebrewでインストールされたことを想定している.

# nginx -p . -c server.conf

error_log /dev/stderr debug;
daemon off;

events {
  worker_connections 48;
}

http {
  include       /usr/local/etc/nginx/mime.types;

  client_body_temp_path /tmp/client_doby_temp 1 2;
  fastcgi_temp_path /tmp/fastcgi_temp 1 2;
  proxy_temp_path /tmp/proxy_temp 1 2;
  scgi_temp_path /tmp/scgi_temp 1 2;
  uwsgi_temp_path /tmp/uwsgi_temp 1 2;

  server {
    listen      8080;
    server_name localhost;

    root        '';
    index       index.html index.htm;

    access_log  /dev/stdout;

    expires     off;
    add_header  Cache-Control private;
  }
}


上の設定ファイルみたいなのをどこかに置いて,nginxコマンドを実行した場所のindex.htmlがlocalhost:8080で見える.ぼくは上の設定ファイルを~/tmp/とかに置いてて nginx -p . -c ~/tmp/server.conf とかやってる.


それで,ある程度できてきて,プロトタイプをちょっと人に見せたいみたいなときは,Dropboxのpublicディレクトリに置くと簡単に公開できる.最初からDropboxで開発する人もいる(ように見える)けど,ファイルを保存してから,見れるようになるまで,同期される間ちょっと待たないといけなくて,効率よく開発できないと思う.
下のは去年bonを作ってたときのプロトタイプで,こんなのを作って,どうですかとか言って進めてた.


HTMLとJSのファイルをDropboxのpublicディレクトリに置くだけで公開できて,人にURL教えなければたぶん発見されないから,楽だと思う.
けど注意するべきことがあるかもしれないと思っていて,Dropbox,自由にJS書ける割に全ユーザーでドメインはdl.dropbox.comみたいな感じで同じだから,たとえば,パスワードを管理するアプリケーションとかをDropboxのPublicディレクトリで運営すると,悪意のあるスクリプトが設置されたDropboxの他のユーザーのページからパスワードを読み取られたりすると思う.ユーザーの入力を保存するようなコンテンツを作ったときはURLを公開して全世界の人に使ってもらったりするべきではないかもしれない.けど,どうせパスワードを管理するアプリケーションを作ったところで,Dropboxの変なURLに置いてあるのが,そんなにユーザーを獲得できるとは思えないから,あまり気にしなくてもいいかもしれない.


完成したらもっといい場所にデプロイするといいと思う.ぼくはGoogle App Engineを単なるファイル置場として使ってるけど,従量課金制みたいになってて,毎週2ドルとか払ってて,全然儲かってないし,完全に失敗してる.appspot.comみたいなURLで他のドメインに移すとかできないからロックインされてしまっててつらい.けど自分でサーバーを借りてセットアップするとかめんどうそうだし,まちがったら壊れそうだけど,Googleのはボタン押すとデプロイできるとか,お金払えば勝手にスケールするとかで,気軽に使うにはいいと思う.herokuをファイル置場にしてる人もいる.herokuは必ず1リクエスト1秒くらいかかっててちょっと遅いと思う.お金払えば速くなるのかもしれない.ちょっとしたやつならjsdo.itに置くこともできると思うけど,jsdo.itで動かすためにコードを変える必要がある.
Google App Engineをファイル置場として使うのはちょっと設定ファイルとか書かないといけない.重ね着とか置いてるプロジェクトはソースコードはGitHubに置いてあるけどちょっとPythonのコードも混じってる./bon/が正しいけど/bonに来る人とかいるからリダイレクトしてあげるとか書いてある.

herokuにしても何かしら書かないといけないと思う.使ったことないけどロリポップとか借りるほうが簡単かもしれない.


HTMLとJSだけで作ると,ファイルを置くだけで公開できて,開発から本番環境まで三箇所くらい環境が変わっても同じコードが動くので,楽だと思う.


追記

python -m SimpleHTTPServer 8080 簡単でよさそう