Rails5.1でBootstrap3を利用してHerokuでデプロイ #jQuery

経緯

Rails5.1系をHerokuでデプロイするにあたり色々、つまずいたのでまとめます。
(※ 今までRuby on Rails チュートリアルを参考にHerokuにデプロイしてましたが、その通りではできませんでした。)
Rails5.1からjQueryを利用するために手動で設定する必要があります。Bootstrapを利用するにあたり必要でしたのでその手順もあわせます。

開発環境

Linux(Ubuntu 16.04LTS)
Ruby 2.4.1
Rails 5.1.4

yarnのインストール

jQueryを利用する為にyarnをインストールします。
※Linux(Ubuntsu)環境です。

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

$ sudo apt-get update && sudo apt-get install yarn

参考:
https://yarnpkg.com/lang/en/docs/install/

yarnでjQueryを追加

$ yarn add jquery

jQueryの最新バージョンがインストールされますがBootstrapは、最新バージョンでは動きませんのでバージョンを1.9.1より上かつ、3.0以下にします。

package.jsonでjQueryのバージョンを指定

バージョンを1.9.1に指定します。

/package.json

{
  "name": "my_project",
  "private": true,
  "dependencies": {
     "jquery": "^1.9.1"
  }
}

指定後に

$ yarn install

でプロジェクト全体に反映させます。

application.jsに設定を反映

assets/javascripts/application.js

//= require rails-ujs
//= require turbolinks
//= require jquery
//= require bootstrap
//= require_tree .

JQueryはbootstrapよりも上にかきます。

参考：
Rails5.1でjQueryを追加する方法

bootstrap-sassをbundle install

Gemfile

gem 'bootstrap-sass', '3.3.6'

.scssでbootstrapをimport

assets/stylesheet内にbootstrapをimportする為の.scssファイルを作成します。
※ ここでは、「custom.scss」という名前にします。

assets/stylesheets/custom.scss

@import "bootstrap-sprockets";
@import "bootstrap";

これでjQueryが使用できるようになります。

Herokuのセットアップ

Herokuでデプロイする為にセットアップします。
DBを開発環境では、sqlite3、本番環境ではpostgreSQLを利用しているケースです。

Gemfile

group :development, :test do
  # sqlie3をgroupの中に移動
  gem 'sqlite3'
end

group :production do
  gem 'pg'
end

package.json

{
  // 省略、以下行を追加
  "engines": {
    "yarn": "あたなのyarnのバージョン",
    "node": "あなたのnodeのバージョン"
  }
}

enginsにyarnとnodeのバージョンを記載し開発環境をHerokuに知らせる必要があるようです。

参考：
[Rails5][yarn] herokuにデプロイする際にremote rejectされる問題

上記を設定したら

$ heroku create

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/ruby

$ git push heroku master

上記でHerokuでデプロイでき、bootstrapが効いていることも確認できました。