Contents Menu

Angular と Rails を組み合わせてみる

1_nmQ30kViITehpW9xALP2Rg.jpeg 前回の記事では Angular+NestJS の組み合わせについてピックアップをしましたが、今回は Ruby on Rails5 と Angular8 の組み合わせで web アプリを作成している記事があり、読んでいてとても面白い内容だったので翻訳に挑戦しました！

どちらも個人的に気に入っているフレームワークなので、世の中にこの組み合わせでの開発が増えてくると嬉しいです。

Angular8 と Rails5 (＊以下記事の翻訳)

あたなはどうか知らないが、学びやすく、素早く書けて、オープンソースという理由で私は Ruby on Rails が大好きだ。また、Ivy というクールな新しいレンダーエンジンを導入した Angular の新バージョン、Angular8 のリリースにもワクワクしている。

もしあなたが私と同じでこれら２つのフレームワークに関する興味をわかってくれて、でも、その素晴らしい２つをどう始めたら良いのかさっぱりわからない場合は、ぜひこれを読んでほしい。

さっそく初めてみよう！

慣習的に Javascript フレームワークと一緒に Rails を使う場合は、webpack が必要とされていた。しかし、Rails には webpacker と呼ばれるこれにうってつけの gem があり、Angular プロジェクトを動かしてくれる。しかし、最新バージョン(7 系以上)の Angular では内部で webpack システムを持っており、そのようなプロジェクト構成が、素晴らしい AngularCLI を使う妨げとなってしまうのだ。

その代わりに私たちがしなければならないのは、Angular からの出力ファイルを受け取り、それらを提供するコントローラを備えた API としての Rails アプリを使うことだ。

始める前に下記をインストールしてほしい。

  • node (8.9 以上)
  • NPM (5.5.1 以上)
  • Angular CLI
  • Rails 5+ (インストールに RVM または Rbenv を使うことをおすすめします)
  • Postgresql

1. Angular プロジェクトを作成する

好きなディレクトリの場所でターミナルを開いて、Rails/Angular プロジェクトを作成する。 ng new rails-angular-project Angular routing を使うか聞かれたら、迷わず「YES」を押しちゃってください！（かなり良いですよ！） その次に、好きなスタイルシートの形式を選択して下さい。(個人的には SCSS で進めてます) そして、全て完了したら先ほど作ったプロジェクトにジャンプしましょう！ cd rails-angular-project

2. Rails プロジェクトを作成する

では、現在のディレクトリに Rails プロジェクトを作成しましょう！ rails new . -database=postgresql これによって、Angular プロジェクトの内部に Rails プロジェクトを作成し始めるが、全てのマージを拒否した場合、コンフリクトが発生する。 Rails プロジェクトが作成されたなら、.gitignore ファイルにいくつかファイルを追加する必要があります。 .gitignore ファイルを開いて、下記をコピペして下さい。

# Ignore bundler config.
/.bundle

# Ignore all logfiles and tempfiles.
/log/*
/tmp/*
!/log/.keep
!/tmp/.keep

# Ignore uploaded files in development
/storage/*
!/storage/.keep

.byebug_history

# Ignore master key for decrypting credentials and more.
/config/master.key

# Ignore application configuration
/config/application.yml

3. 上記 2 つを合体する

今の段階で、Angular プロジェクトと一緒になった Rails アプリとなっており、これは API としての Rails を使用し提供している一方で、Angular フレームワークを用いた SPA の利益も享受していることと言える。しかしその前に Rails に Angular が提供するファイルにアクセスできるようにしなければならない。

通常は Angular アプリでは、ng serveを使用して開発を進めるのだが、今回はng buildを使用して Rails のパブリックディレクトリに出力するように設定する。

ルートディレクトリにあるAngular.jsonを開いて、出力先ディレクトリをdist/rails-angular-appからpublicに変更する。

angular.json
...

"options": {
    "outputPath": "public",
...

次に、app/controllers にstatic_controller.rbという名前のファイルを作成する。

app/controllers/static_controller.rb
class StaticController < Rails::ApplicationController
    def index
        render file: Rails.root.join('public', 'index.html')
    end
end

static_controller は Angular によって提供されるindex.htmlをレンダリングする役目を持ちます。

そして、下記のコードをroutes.rbに追加して下さい。

routes.rb
Rails.application.routes.draw do
    get '*other', to: 'static#index'
end

これで、Rails にルートをキャッチさせて、static_controller にリダイレクトすることができます。また、上記のコードによって api に必要となるどのルートも定義することができるのです。でもそれは次の機会に回しましょう！

4. Foreman を使って便利にする

Foreman を導入することによって、Web アプリを提供しやすくしましょう。

gem にforemanを追加することによってインストールして下さい。

Gemfile
...
# Use foreman
gem 'foreman'
...

bundle installで新しい gem をインストールします。

bundle install

Procfile と呼ばれるファイルを新しくルートディレクトリに追加します。これは組み合わせされる全てのコマンドを foreman が読み込めるようにするためのファイルです。

Procfile
web: rails s -p 3000
client: ng build --watch=true

これで foreman を起動できます。

foreman start

Rails アプリと Angular アプリが同時に起動されるはずです。そして、localhost:3000にアクセスすると以下のような画面が表示されるでしょう。

1_RCUJQELq4Gpw5AYRc7wUCQ.png

完了です！これで自由に Web アプリを開発することができますし、api にシンプルかつパワフルなフレームワークを与えるのと同時に、Angular CLI の力を用いることができます。

5.終わりに

今回、Rails5 のバックエンドと Angular8 のフロントエンドで、同じディレクトリに存在し、それぞれの力を最大限に活用するアプリケーションを作りました。このチュートリアルがあなたにとって役に立てれば幸いです。

参考記事

Angular 8+ with Rails 5+ - Sam Green