このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その1。

Angular2

2017.04.10

この記事は最終更新日から1年以上が経過しています。

どもです。

今回は、Rails5 APIモード + Angular SPA環境 をサクッと用意する手順を書いていきます。

何気に「どうやって構築するのですか??」と聞かれることも多かったりするので、記事にしてみました。

SPAで制作する際に何か参考になれば幸いです。

 

Rails5 APIモード

もう、最近では、Railsの説明をしなくて良いほど、Railsで作られるwebアプリケーションの数もかなり多くなったかと思います。

Railsは何ゆえ簡単便利で、あれやこれやと環境を用意しなくても、Railsのみですぐにwebアプリケーション制作に取り掛かる事ができます。

がしかし、フロント領域のviewまでも世話してくれるが故に、Rails Wayに乗らなければいけないはめとなり、制限されたフロント領域をフロントエンドエンジニアが切羽琢磨し、改修作業にあたっていた現状がありました。

どうにかフロントを分離したいと。。

このような思いが多くなったのかどうかは知りませんが、Rails5になってViewを生成しない「APIモード」というものが追加されました。

これまでのRailsでもAPIアプリケーションとしての利用は勿論可能だったのですが、Railsが用意している「rails new」コマンドでは、viewファイルやasstesファイルなども生成して手動で削除する必要がありました。

Rails5 APIモード」では、このようなファイルが生成されないので、手動で削除する手間もなくなった理由となります。

 

Angular

Angularは、Googleと個人や企業のコミュニティによって開発されている、完全にJavaScriptで書かれたオープンソースのフロントエンドWebアプリケーションフレームワークとなります。

前回紹介させていただいた「Angular CLI」を利用することで、容易にSPA開発に取り掛かることが可能となっております。

 

Webアプリケーション アーキテクチャ

Rails5 APIモード + Angular SPA環境」でちょこちょこ記事を目にするのが、ポート及びホストを別に持った環境作成方法だったりします。

 

このように、ポート及びホストを別に分けるとなると、色々と考慮しないといけないのですが、(そもそもSPAを行うとなると認証、認可の構築も必要となりますが、追って記述します。)

まずぶち当たる壁は、クロスドメイン通信(同一生成元ポリシー(Same Origin Policy)XHR など、現状のドメインと異なるドメインのデータを読み込むとエラーとなる。)だと思います。

これは、CORS (Cross-Origin Resource Sharing) (XMLHttpRequestでクロスドメインアクセスを実現するための仕様)で回避できるのですが、意識せずに制作できるものならばそうしたいですよね。。

 

ちなみに、Rails5で、 CORS (Cross-Origin Resource Sharing)を行うには、「rack-cors」等のgemを使用することで容易に設定は可能です。

rack-cors

https://github.com/cyu/rack-cors

 

なので、今回は、こちらの様に構築していきたいと思います。

且つ、Rails WayAngular Wayが共存する形を構築していきたいと思います。

 

環境

Rails5

・「Angular CLI

 

が、インストールされている前提となります。

 

Rails5 API アプリケーション作成

 

今回は、githubにもcommitしておりますので、順を追って確認することができます。

github

rails-api-angular-example

 

とは言え、今回の環境を用意する手順は少なく簡単なので、一通り行って躓いたら確認する程度かと思います。

では、早速 「Rails5 apiモード」でアプリケーションを生成します。

 

rails new rails-api-angular-example --api

commit

rails new rails-api-angular-example –api

 

APIアプリケーションが生成されたかと思います。

Rails serverを立ち上げてみましょう。

 

cd rails-api-angular-example
rails s

http://localhost:3000/

にアクセスし、このような画面が表示すれば成功です。

簡単ですね。

 

Angular アプリ生成

続いて、「Angular CLI」を用いて、Angularアプリケーションを生成します。

Rails APIアプリケーションのディレクトリで「ng new」コマンドを実行します。

client」という名前のAngularアプリケーションにしました。

 

ng new client

commit

ng new client

Angularアプリケーションが、生成されたのが確認できます。

きちんと起動するか、「ng server」コマンドで確認します。

ディレクトリを移動。

cd client

ng server」コマンドでサーバー起動。

ng server

以下のURLをブラウザで確認。

http://localhost:4200/

上記の様な表示となれば成功です。

お疲れ様です。

実は、これでほぼほぼ揃っていたりします。。

dist パス変更

とは言え、ちょこちょこと修正が必要なので、順を追って。

ng build –prod」コマンドでRailsのassetsコンパイルの仕組みのようにdigest付きのファイルは生成されるのですが、ビルド先がデフォルトのの「dist」ディレクトリのままなので変更します。

client/.angular-cli.json

"outDir": "dist",

↓ 変更

"outDir": "../public",

 

commit

change client dist path

 

変更後、「ng build –prod」コマンドでdigest付きのファイルをビルドします。

ng build --prod

commit
ng build –prod

ビルド完了しましたら、「ng server」コマンドでサーバー起動してみましょう。

rails s

以下のURLをブラウザで確認。

http://localhost:3000/

 

上記の表示の様になれば成功です。

Angularアプリケーションの成果物が、Railsアプリケーション側で確認出来たことになります。

お疲れ様でした!

 

proxy  設定

とは言え、もうちょっと設定が必要です。

現状、「ng server」コマンドでサーバー起動して「localhost:4200」にアクセスすると、

ng server

 

URL

http://localhost:4200/

上記の表示となりますが、Rails側を確認すると、

URL

http://localhost:3000/

元に戻って、Rails5側がバンザイしている画像が表示されてしまいました。

これは、どうやら、「ng server」コマンドで「outDir」のファイルが削除されているようです。

このままだと、都度都度 「ng build –prod」コマンドをしないと行けないので、開発効率がよろしくないので、proxyの設定を行いたいと思います。

 

client/proxy.conf.json

{
  "**": {
    "target": "http://localhost:3000",
    "secure": false
  }
}

client/package.json

"start": "ng serve",

↓ 変更

"start": "ng serve --proxy-config proxy.conf.json",

 

commit

create client/proxy.conf.json

 

このように、proxyの設定を行うことによって、「rails s」コマンドで「localhost:3000」を立ち上げつつ、「ng server」コマンドで「localhost:4200」を立ち上げると、「localhost:3000」をフックすることが可能なので、「localhost:3000」のレスポンスを受け、表示を確認しながら開発できるので効率が良いです。

 
と、以上で Rails5 APIモード + Angular SPA環境 爆速構築の手順 その1。は終わります。

すごく手順も少なく簡単でしたね。

commit logはこちらに残しておりますので、参照いただければと。

github

rails-api-angular-example

まとめ

環境構築の為に行った事 まとめ

・ Rails API アプリ生成

rails new rails-api-angular-example --api

・ Angular アプリ生成

ng new client

・ Angular dist path変更

・ Angular digest付きのファイルビルド

ng build --prod

・ client/proxy.conf.json ファイル作成

最後に

え。。

これだけじゃぁ。どうつなぎこめばいいかわからない。。

と、言った声も聞こえそうですね ><

というわけで、次回は、こちらとなります。

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。
ではでは、またまたぁ。

 

Comment

Related Article

Angular 「スマホ・PC」でcomponentとCSSを切り替える(分岐させる)方法

2017.10.15

Angular4 + SSR(サーバーサイドレンダリング)(Universal JavaScript)環境の最小最短 構築方法

2017.10.08

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その2。

2017.04.19

Rails5 APIモード + Angular SPA環境 爆速構築の手順 その1。

2017.04.10

Angular CLIで、Angularアプリをかんたん楽々構築!

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – HTTP(簡単な和訳)

2017.04.09

Angular2の始め方。Angular2 公式チュートリアル – Routing(簡単な和訳)

2017.04.06

Angular2の始め方。Angular2 公式チュートリアル – Services(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Multiple Components(簡単な和訳)

2017.04.03

Angular2の始め方。Angular2 公式チュートリアル – Master/Detail(簡単な和訳)

2017.01.20

CATEGORY LIST

LATEST NEWS

まだ間に合う!!「RSコンポーネンツ」で、ラズベリーパイが 配送料無料で購入できるキャンペーン中!

RaspberryPi

2018.12.07

IntelliJ + Spring Initializr + Gradleで、サクッとSpring Boot環境を構築

Java

2018.11.24

Mavenを用いたアプリケーション作成方法

Java

2018.11.24

Gradleを用いたアプリケーション作成方法

Java

2018.11.23

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US