Herokuで運用しているRailsアプリのJS依存管理をBowerからnpmへ移行しました。

これまで、Herokuで運用しているRailsアプリにおいて各種JavaScript/CSSパッケージの依存管理をBower（およびqnyp/heroku-buildpack-ruby-bower）で行ってきましたが、

• npmによる依存管理でも同じことが実現できるようになった
• Rails内にES6環境を構築するにあたってnpmを利用する必要がでてきた

という理由から、Bowerではなくnpmを利用する構成に移行しました。

具体的な作業手順は以下のとおりです。

まず、npm initコマンドでRailsプロジェクトのルートディレクトリにpackage.jsonを生成します。

$ npm init

bower.jsonに記載していた依存パッケージのエントリをpackage.jsonに記載します。この際、パッケージ名が変わるものもあるので https://www.npmjs.com/ でnpmにおけるパッケージ名を調べておきます。

依存パッケージをnpmでインストールします。

$ npm install

これによって、Railsプロジェクトのルートディレクトリにnode_modulesディレクトリが作成され、その中にパッケージがインストールされます。node_modulesは.gitignoreに追加しておき、リポジトリには含まれないようにしておきます。

Railsの設定に以下の記述を追加します。

Rails.application.config.assets.paths << Rails.root.join('node_modules/')

これによって、npmでインストールされたパッケージのファイルをapp/assets/javascripts/application.jsなどから//= requireディレクティブで参照できるようになります。指定する際はnode_modules/からの相対パスを記述します。

Herokuにデプロイする際にnpm installが実行されるようにするために、HerokuアプリのBuildpackとしてheroku/nodejsとheroku/rubyを設定します。

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

設定した結果、以下のようにheroku/nodejsが先に実行されるようになっている必要があります。

$ heroku buildpacks
=== myapp Buildpack URLs
1. heroku/nodejs
2. heroku/ruby

以上で、Herokuへのデプロイ時にnpmによって依存パッケージがインストールされるようになります。