AngularとRailsを組み合わせてみる
前回の記事では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に変更する。
...
"options": {
"outputPath": "public",
...
次に、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に追加して下さい。
Rails.application.routes.draw do
get '*other', to: 'static#index'
end
これで、Railsにルートをキャッチさせて、static_controllerにリダイレクトすることができます。また、上記のコードによってapiに必要となるどのルートも定義することができるのです。でもそれは次の機会に回しましょう！
4. Foremanを使って便利にする
Foremanを導入することによって、Webアプリを提供しやすくしましょう。
gemにforemanを追加することによってインストールして下さい。
...
# Use foreman
gem 'foreman'
...
bundle installで新しいgemをインストールします。
bundle install
Procfileと呼ばれるファイルを新しくルートディレクトリに追加します。これは組み合わせされる全てのコマンドをforemanが読み込めるようにするためのファイルです。
web: rails s -p 3000
client: ng build --watch=true
これでforemanを起動できます。
foreman start
RailsアプリとAngularアプリが同時に起動されるはずです。そして、localhost:3000にアクセスすると以下のような画面が表示されるでしょう。
完了です！これで自由にWebアプリを開発することができますし、apiにシンプルかつパワフルなフレームワークを与えるのと同時に、Angular CLIの力を用いることができます。
5.終わりに
今回、Rails5のバックエンドとAngular8のフロントエンドで、同じディレクトリに存在し、それぞれの力を最大限に活用するアプリケーションを作りました。このチュートリアルがあなたにとって役に立てれば幸いです。