Angular8+Rails5でアプリを作ってみる

#AngularとRailsを組み合わせてみる
![1_nmQ30kViITehpW9xALP2Rg.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316359/7009cc85-e243-6cc3-904f-b56e27d097f8.jpeg)
[前回の記事](https://qiita.com/kaki_0704/items/b46e4b8de33ad39024fe)ではAngular+NestJSの組み合わせについてピックアップをしましたが、今回はRuby on Rails5とAngular8の組み合わせでwebアプリを作成している[記事](https://medium.com/@samgreen_22756/angular-8-with-rails-5-55cd186a02c9)があり、読んでいてとても面白い内容だったので翻訳に挑戦しました！

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


## 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ファイルを開いて、下記をコピペして下さい。  

```shell
# 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`に変更する。

```json:angular.json
...

"options": {
    "outputPath": "public",
...
```
次に、app/controllersに`static_controller.rb`という名前のファイルを作成する。

```ruby: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`に追加して下さい。

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

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


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

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

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

```ruby: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316359/325cb32f-71cf-e705-9fcc-4f96e0dc2cdc.png)

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

#### 5.終わりに

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

## 参考記事
[Angular 8+ with Rails 5+ - Sam Green](https://medium.com/@samgreen_22756/angular-8-with-rails-5-55cd186a02c9)