APIサーバを Rails、フロントエンドを AngularJS で開発する [その①]

• [2014/08/25追記] 続編を書きました。
  • その②：環境構築編
• [2014/08/26追記] 続編を書きました。
  • その③：実装編

---

今回は その①：考察編 です。

ちょっとややこしいのですが、Railsアプリケーションの View で AngularJS を利用するということではなく、JavaScriptベースのフロントエンドアプリケーションとして AnuglarJS を利用し、サーバ側のデータを操作する為のバックエンドAPIを Rails で構築する、ということです。（まだややこしいかな..）

シチュエーション的には、UIリッチなフロントエンドアプリケーションを構築するが、サーバにもデータを保持する必要がある、というもの。
（例えばシングルページアプリケーション構成や、１画面=１データモデルとはならないもの。）

かつ、フロントエンドの開発は本格的にやるので、Grunt や Bower を利用したいとします。

ググった結果もあわせて、次のようにすれば開発はいけそう。

• Railsプロジェクト内にフロントエンド開発用のフォルダを作成する。
  • 仮に front フォルダとする。
• front フォルダ内に Grunt や Bower 、AngularJS の環境を構築する。
• Railsプロジェクトにおける静的ファイルの配置場所は public フォルダなので、front フォルダ内で $ grunt build すれば配布用のJavaScriptアプリケーションが public フォルダへ展開できるようにする。
• [2014/08/25追記] 開発中は、Rails のサーバ（$ rails s）と Grunt のサーバ（$ grunt serve）が立ち上がる。Grunt のタスクで Proxy し、http://localhost:9000/path_to_api を http://localhost:3000 へ経由させる。 ⇒ Rails の development 環境の場合は、Access-Control-Allow-Origin: * とすることで解決しました。
• 稼働サーバへのデプロイは、public 含めて Railsアプリケーションを丸ごと。
  • フロントエンドもバックエンドも同じサーバに配置するので、クロスドメイン(クロスオリジン)は気にしなくてもいい。
• Heroku とか使えば、簡単にサーバも作れそう。

これで、いけそうな気がします。実践編へ続く！