Hexi というサイトを作りました (http2study で発表しました。)

hexi.pics

https://cloud.githubusercontent.com/assets/555645/7000462/609930fa-dc5e-11e4-8b29-f28545846d14.png


Hexi というサイトを作ったので紹介です。

What is Hexi

Hexagonal Sticker as a Service と僕が勝手に呼んでいるものです。単純に六角形のステッカーを作って、公開して、購入できるECサービスです。
六角形のステッカーって実は標準規格があって、こんな感じになっています。

Stickers Standard


この標準規格に合わせて、これ専門のステッカー作れる所作って、勉強会とかで使ってもらったら便利じゃね?と思ったので、友人の会社(絶賛エンジニア募集中)に持ちかけて、自分もバックエンドを基本に空き時間で手伝いながら作りました。

Hexi inside

割りと基本は抑えつつも突っ走った構成をしていて、

  • nginx (with SPDY)
  • ngx_small_light (画像リサイズ)
  • io.js (v1.6.4 express)
  • Amazon S3, RDS

f:id:yosuke_furukawa:20150430033203p:plain

っていう感じになっています。今回画像などのassetsが割りとたくさん存在するのでSPDYはかなり効果を発揮していて、なにもない時と比較して、200 〜 300 ms 位の差を出しています。

また、今回僕がインフラとバックエンドに徹したので、フロントのJavaScriptをconcatしたり、cssをconcatしたりっていう所謂フロントエンドタスクに手が回らなかったんですが、それも功を奏していて、SPDYであれば理論上はconcatしなくてもそれと同等の性能が得られる上に、むしろconcatして余分なJSやcssが入るよりも性能の向上が期待できるようになりました。

uglifyだけは都合上やってもらいましたが、それ以外のタスクはほとんどやっていません。

f:id:yosuke_furukawa:20150430033606p:plain

そこまでインフラにお金はかけられなかったので、最小のEC2一つだけで色々やってます。EC2一個にしては割といいパフォーマンスが出ているかなと思っています。

あと、僕が io.js の collaborator 兼 evangelist としてio.jsを採用したので、バグを踏んでは io.js へのコントリビュートという一石二鳥を積極的に狙ってやれました。(こうすることで、io.js側のバグ修正もある程度充実させることができました :D )

Hexi の反響

まず、 hexb.in っていう @maxogden がやってる六角形ステッカーのサイトに公式の販売ベンダーとして名前が載りました

NodeSchool の @finnp っていうオーガナイザーの一人からベルリンにもステッカー送ってほしいって言ってもらってすごく嬉しかった。github.com

TokyoJSのオーガナイザーからも買いたいっていう問い合わせがあって、色々と作ってよかったなという所感です。

あと、デザイナーさん達が作ってくれるステッカーに可愛いのが多いです。

hexi.pics
hexi.pics
hexi.pics

Hexi future

一応、今後は http2 にしたり、 ngx_small_light やめて AWS Lambda で事前リサイズしたりともう少しアーキテクチャは洗練していく予定です。
そろそろ出るという噂の io.js v2.0 にもする予定です。

f:id:yosuke_furukawa:20150430040130p:plain

Hexi 発表資料 (in http2study)

http2study.connpass.com