『Yeomanでフロントエンドとバックエンドサーバを一緒に開発する』 を yo angular でやってみたら『Cannot GET /』とかなった場合のメモ

問題

前回やった方法だとapiサーバ、フロントエンドサーバ、プロキシサーバを立ち上げてとかちょっと面倒。

• 『YeomanでフロントエンドとREST APIサーバーを同時に開発する方法』 を yo angular でやってみたメモ - 牌語備忘録 - pygo

前回の参考サイトの追記にあるこの grunt task を使う方法のが良さげ。

• Yeomanでフロントエンドとバックエンドサーバを一緒に開発する

なのだが grunt server を立ち上げてブラウザで確認すると『Cannot GET /』となってしまう。

対処

stackoverflow で対処法発見

• gruntjs - Can't implement grunt-connect-proxy - Stack Overflow

前回のを修正してみる
（server/proxyServer.js は使わないので削除）

インストール

$ npm install -D grunt-connect-proxy

修正

Gruntfile.js

+var proxySnippet = require('grunt-connect-proxy/lib/utils').proxyRequest;
+
 module.exports = function (grunt) {
 :
      },
+      proxies: [{
+        context: '/api',
+        host: 'localhost',
+        port: '3000',
+        https: false,
+        changeOrigin: false
+      }],
       livereload: {
         options: {
+          middleware: function (connect, options) {
+            var middlewares = [];
+            options.base.forEach(function(base) {
+              // Serve static files.
+              middlewares.push(connect.static(base));
+            });
+            middlewares.push(proxySnippet);
+            return middlewares;
+          },
           open: true,
           base: [ 
:
     grunt.task.run([
       'clean:server',
       'concurrent:server',
+      'configureProxies',
       'autoprefixer',

確認

起動サーバ

$ cd server/api-server
$ easymock
Server running on http://localhost:3000
:

$ grunt server
Running "server" task
:

Webブラウザで確認。
おけ。