Heroku buildpacks を追加して Node.js, Ruby on Rails の順番でビルドする設定方法

Tadashi Shigeoka ·  Sun, August 27, 2017

Heroku buildpacks を追加して Node.js → Ruby on Rails の順番でビルドする設定方法をご紹介します。

Heroku

なぜ Buildpacks の順番を変更するのか?という前提

今回は Yarn のバージョンが古くて Webpacker 3 をインストールできないというエラーが発生しました。

Ruby on Rails アプリの場合、フロントエンドのパッケージ管理はデフォルトで yarn が利用されています。

yarn のタスクは Ruby に依存しないので、Ruby のビルドパックよりも先に Node.js (Yarn) のビルドパックを優先して実行させると、今回のような依存関係に悩まされることはなくなると思います。

heroku buildpacks の確認

まず、heroku buildpacks コマンドでビルドパックに何が設定されているか確認します。

heroku buildpacks
=== yourapp Buildpack URLs
1. heroku/ruby

app.json の Heroku buildpacks を設定する

app.json Schema | Heroku Dev Center の公式ドキュメントを参考にしつつ、以下のように “heroku/ruby” の前に “heroku/nodejs” を追加するだけで設定完了です。

diff --git a/app.json b/app.json
--- a/app.json
+++ b/app.json
   ],
   "buildpacks": [
     {
+      "url": "heroku/nodejs"
+    },
+    {
       "url": "heroku/ruby"
     }
   ]

変更した buildpacks で Heroku アプリ作成する

Heroku Production app 編

Production なら git push heroku master しましょう。

git push heroku master

Counting objects: 34, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (31/31), done.
Writing objects: 100% (34/34), 4.28 KiB | 0 bytes/s, done.
Total 34 (delta 15), reused 1 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> Node.js app detected
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=true
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=production
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        engines.yarn (package.json):  unspecified (use default)
remote:        
remote:        Resolving node version 6.x...
remote:        Downloading and installing node 6.11.2...
remote:        Using default npm version: 3.10.10
remote:        Resolving yarn version (latest)...
remote:        Downloading and installing yarn (0.28.4)...
remote:        Installed yarn 0.28.4
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (yarn.lock)
remote:        yarn install v0.28.4
remote:        [1/4] Resolving packages...
remote:        [2/4] Fetching packages...
remote:        warning [email protected]: The platform "linux" is incompatible with this module.
remote:        info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
remote:        [3/4] Linking dependencies...
remote:        warning "[email protected]" has incorrect peer dependency "ajv@>=5.0.0".
remote:        [4/4] Building fresh packages...
remote:        Done in 28.46s.
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote: 
remote: -----> Build succeeded!
remote: -----> Ruby app detected
remote: -----> Compiling Ruby/Rails
remote: -----> Using Ruby version: ruby-2.4.1
remote: -----> Installing dependencies using bundler 1.15.2

(以下、略)

Heroku Review app 編

Heroku Review app の場合、アプリをリビルドすればいいと思いますが、念のため一旦 Delete してから Create Review App しました。

Heroku Create Review App

Heroku buildpacks の順番確認

Heroku Buildpacks

Heroku アプリの管理画面から、

  1. Node.js app detected
  2. Ruby app detected

の順番で buildpacks が設定がされてることが確認できます。

app.json が無い場合 heroku buildpacks:add で追加する

app.json ファイルが無い場合 heroku buildpacks:add コマンドでビルドパックを追加します。

heroku buildpacks:add --index 1 heroku/nodejs

Buildpack added. Next release on yourapp will use:
  1. heroku/nodejs
  2. heroku/ruby
Run git push heroku master to create a new release using these buildpacks.

app.json がある場合は、app.json の方を修正しないと Heroku Review apps 機能で Production app からアプリをコピーされたときに buildpacks の設定が引き継がれないので注意が必要です。

僕の場合、先に heroku buildpacks:add —index 1 heroku/nodejs だけして、app.json の buildpacks の項目を修正しておらず Heroku Review app の buildpacks が変更前の設定のままで、1時間ぐらい悩んでしまいました。

Heroku を利用する場合 app.json ファイルがある場合はメンテナンスすることを忘れないようにしないとですね。