grunt-connect-proxyのめも

---

Gruntで起動したwebサーバにリバースプロキシの設定を追加するめも

---

プラグインのインストール

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

---

設定追加

Gruntfile.jsに追加していく

モジュールの読込

connect:livereload:options:middlewareで読み込める場所に宣言する

var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;

middlewareの部分に読み込んだモジュールを追加

  connect: {
    options: {
      port: 9000,
      open: true,
      livereload: 35729,
      // Change this to '0.0.0.0' to access the server from outside
      hostname: 'localhost'
    },
    livereload: {
      options: {
        middleware: function(connect) {
          return [
            // 追加
            proxySnippet,
            connect.static('.tmp'),
            connect().use('/bower_components', connect.static('./bower_components')),
            connect.static(config.app)
          ];
        }
      }
    },
    // ~省略~
  }

プロキシの設定を追加

オプションは下記を参照

https://github.com/drewzboto/grunt-connect-proxy#options

  connect: {
    options: {
      port: 9000,
      // change this to '0.0.0.0' to access the server from outside
      hostname: 'localhost'
    },
    proxies: [
      {
        // `localhost:9000/cortex`へのリクエストは`localhost:8080/cortex`へプロキシされるようになる
        context: '/cortex',
        host: 'localhost',
        port: 8080
      },
      // 試しに天気情報を公開しているAPIにプロキシしてみる
      {
        context: '/data/',
        host: 'api.openweathermap.org',
        port: '80'
      }
    ],
    // ~省略~
  }

serveタスクにconfigureProxiesを追加

  grunt.registerTask('serve', 'start the server and preview your app, --allow-remote for remote access', function (target) {
    if (grunt.option('allow-remote')) {
      grunt.config.set('connect.options.hostname', '0.0.0.0');
    }
    if (target === 'dist') {
      return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
      'clean:server',
      'wiredep',
      'concurrent:server',
      // 追加
      'configureProxies',
      'autoprefixer',
      'connect:livereload',
      'watch'
    ]);
  });

---

実行

webサーバ起動

$ grunt serve

http://localhost:9000/data/2.5/weather?q=Okinawa,jpへアクセスしたら値が取得できる

実行結果

{
   "coord":{
      "lon":127.8,
      "lat":26.34
   },
   "sys":{
      "type":1,
      "id":7625,
      "message":0.0345,
      "country":"JP",
      "sunrise":1417989865,
      "sunset":1418027821
   },
   "weather":[
      {
         "id":500,
         "main":"Rain",
         "description":"light rain",
         "icon":"10n"
      },
      {
         "id":701,
         "main":"Mist",
         "description":"mist",
         "icon":"50n"
      }
   ],
   "base":"cmc stations",
   "main":{
      "temp":288.78,
      "pressure":1024,
      "humidity":100,
      "temp_min":288.15,
      "temp_max":290.15
   },
   "wind":{
      "speed":3.6,
      "deg":50
   },
   "clouds":{
      "all":1
   },
   "dt":1418055660,
   "id":1894616,
   "name":"Okinawa",
   "cod":200
}

---

参考にしましたm(__)m