Gruntのconnectで静的サーバーを動かしつつも、動的なページを表示させたい

公開

約1年前からGrunt / Yeomanを使い始め、今や制作には欠かせないツールとなりました。そんなこの頃ですが、最近思っていたのが、connectでは動的ページ（PHP・Perl）が表示できない、それ故にLiveReloadスニペットの自動インジェクションも出来なくなることが不便ということ。何かでproxyを使えば良いと知ったので、grunt-connect-proxyを使ってみたところ、目的が達成できたので参考までに共有をと。

この話を僕の環境で実行して得られることは、拡張をインストールしなくてもLiveReloadが実現できるということのみだけど、スマートフォンやタブレットでもLiveReloadが実現できるので（たまに効かないけど）、十分使う価値はあると思っています。また、grunt-connect-proxyのページに、Grunt Connect support for proxying API calls during developmentとあるけど、そこはひとまず気にしない。使える物は使うということで。

設定方法

/contactへのアクセスを、grunt-connect-proxyでApacheに接続して表示させる例です。Apacheのバーチャルホストの設定や、Hostsの設定は済んでいるものとします（今はHomebrewでインストールしたApacheを使っていますが、「複数のバーチャルホストの設定を簡単にする方法」の内容を設定しています）。

grunt-connect-proxyをインストール

npm install --save-dev grunt-connect-proxy

Gruntfileの設定

関連部分を抜粋しました。ポイントは以下。

  • proxySnippetの追加
  • connectタスク内に、proxiesの追加
  • grunt.registerTask内に、configureProxiesを追加

Apacheが名前ベースのバーチャルホストなので、changeOrigin: trueに設定するのがポイント。

'use strict'
PROJECT_DIR = 'projectdir'
LIVERELOAD_PORT = 35729
lrSnippet = require('connect-livereload')({ port: LIVERELOAD_PORT })
proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest
mountFolder = (connect, dir) ->
 return connect.static(require('path').resolve(dir))

module.exports = (grunt) ->
 grunt.initConfig
 connect:
 livereload:
 options:
 hostname: '0.0.0.0'
 port: 3501
 middleware: (connect, options) ->
 return [
 lrSnippet
 proxySnippet
 mountFolder(connect, './htdocs')
 ]
 proxies: [
 context: '/contact'
 host: PROJECT_DIR + '.localhost'
 changeOrigin: true
 ]
 
 # Load grunt tasks.
 require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)

 # Register tasks.
 grunt.registerTask 'default', [
 'compass:dev'
 'configureProxies'
 'connect'
 'open'
 'watch'
 ]
 
 return;

余談

何かの理由で表示だけ確認したいときは、grunt connect:livereload:keepaliveのように、:keepaliveを付けてタスクを実行すると、connectタスクが永続的になるので便利なことが分かりました。