SPA な開発をしていると、RESTful API 用の Proxy が欲しくなります。でも、そのために Apache 入れたり nginx 入れるのはちょっと違うよなと思っていて、Brunch 使っている人向けの情報です。
Brunch でローカルサーバーをカスタマイズ
brunch-config.coffee でサーバーを指定すればよろしい。
brunch-config.coffee
exports.config =
# See http://brunch.io/#documentation for docs.
files:
javascripts:
joinTo:
'javascripts/app.js': /^app/
'javascripts/vendor.js': /^(?!app)/
stylesheets:
joinTo: 'stylesheets/app.css'
templates:
joinTo: 'javascripts/app.js'
server:
path: 'local-server.coffee'
run: yes
ローカルサーバーを書く
いろいろあると思いますが、オーソドックスに Express を使います。http proxy 用に request も使います。
local-server.coffee
express = require 'express'
sysPath = require 'path'
http = require 'http'
request = require 'request'
exports.startServer = (port, path, callback) ->
app = express()
app.use express.static path
proxy = 'http://192.168.80.96:8080'
api_endpoint = 'http://192.168.80.150:8002'
request = request.defaults
proxy: proxy
app.all '/api/*', (req, res) ->
req.pipe(request(api_endpoint + req.url)).pipe(res)
# rewrite other resource to index.html
app.all '/*', (req, res) ->
res.sendFile sysPath.resolve sysPath.join path, 'index.html'
server = http.createServer app
server.listen parseInt(port, 10), callback
server
実装は単純で、/api 宛てのリクエストを絶対 URL にして、request に pipe して結果を res に pipe。抽象度高すぎてしびれます。それ以外の URL については index.html を返すようにしてリロード対策。
この例では内部 proxy 指定してますけど、API サーバーに直接アクセス可能なら、いらない設定です。あとは、google maps など外部の API を呼ぶときに corporate proxy 経由しないとダメーなときに指定したりします。
はまりどころ
当初、proxy 用に http-proxy を使ってたんですが、内部 proxy を経由するとどうにもうまく動きませんでした。原因究明に疲れ果てた頃に request に出会い、試しに使ってみると拍子抜けするくらいあっさり成功。。。
下手に利用実績のあるプロダクトだと、なんとか動かそうと執着して時間を無駄にしてしまうことがあり、良くない傾向だなと反省しました。