まず最初に
npmでadminLTEを外部依存させているrailsアプリをherokuでデプロイしようとしたら,思ってたより躓いたので備忘録兼知らない誰かの役に立てたらと思います。
heroku create から
- 各ツールのバージョン
- heroku-cli/6.11.17 (linux-x64) node-v7.10.0
- Rails 5.1.4
- 3.10.10
remoteにheroku追加
heroku create アプリ名
今回postgresqlを使ったので、herokuに設定します
heroku configとコマンドを叩いてDATABASE_URLが表示されなかったら行ってください
heroku addons:create heroku-postgresql:hobby-dev
また、production環境でpostgresqlを使うことを宣言するためにconfig/database.ymlを変更します
#~~~省略~~~
production:
url: <%= ENV['DATABASE_URL'] %>
このまま、'git push heroku master' とやったら最初のエラーが出ました
今のままでは、pushの時に npm install が呼ばれないので、外部依存のモジュールがまだインストールされてないよというエラーが発生するのでbuildpackを追加していきます。
buildpackを設定することで、push時にherokuが叩いてくれるパッケージ管理ツールを設定できます。
次のコマンドを叩いていってください。
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add --index 2 heroku/ruby
heroku buildpacksコマンドでいま設定されているbuildpackの順番が
注意点としては、--index 2でherokuがbuild時に実行するコマンドの順番を設定してます。
$ heroku buildpacks
heroku buildpacks
1. heroku/nodejs
2. heroku/ruby
こんな具合になってたら成功です。push時にまずnode_modulesがinstallされてからbundle installが動き出すように設定できました。
最初、「今までbuildpacksでruby入れなくてもbundle動いてたしrubyの方はbuildpacks追加しなくてもいけるんじゃね？」と考えてnodejsだけsetしてpushしてみたらnpmだけ動いてました。。。
そりゃそうですね、いかなる時も勝手にbundleされたらnode.jsだけをbuildしたい人が困りますもんね。
その他のエラー
これからは小さなエラーを消していく作業です。ローカルでは問題ない、ただherokuでは？といった奴らです。正直自身の知識のなさとともに自分とherokuを嫌いになっていきます
package.jsonでadmin-lteがdevDependenciesに入ってる!
devDependenciesは、基本的にタスクランナーやテストを置くところと習いました。
理由はわかりませんでしたがエラーが出てたのでdependenciesに移動させました。
scss使ってるならapplication.cssをapplication.scssに変更
ローカルでエラーが出ないので見落としがちです。
内部のscssファイルの読み込み場所
アプリケーションの内部のscssファイル(node_modulesとかで管理してないやつ)は、@import hogehogeではなく*=require hogehogeにしましょう。 Sprockets Error: can't read scss file: hogehogeみたいなエラーが出ます。
*= require hogehoge はSprocketsの書き方でまずSprocketsでscssをcssにいい感じに変換してくれるみたいです。一方@import hogehogeは、css scssの記法なのでとりあえずherokuでbuildの際にSprocketsはcssしか@importで受け付けずエラーが出るみたいです。このへんよくわからず使ってる。。。ここもローカルでは問題なく動いちゃうので見落としがちです。
引用
https://stackoverflow.com/questions/30185222/rails-difference-between-import-and-require
require_tree .はapplication.jsの一番最後に書く
基本中の基本ですが、すべての外部依存ファイルの後です。
今回の場合はadminLTE関連の後に書く必要があります
//= require rails-ujs
//= require_tree . // 変更前
//= require admin-lte/plugins/jQuery/jquery-2.2.3.min
//= require admin-lte/bootstrap/js/bootstrap.min
//= require admin-lte/dist/js/app.min
//= require admin-lte/plugins/iCheck/icheck
//= require rails-ujs
//= require admin-lte/plugins/jQuery/jquery-2.2.3.min
//= require admin-lte/bootstrap/js/bootstrap.min
//= require admin-lte/dist/js/app.min
//= require admin-lte/plugins/iCheck/icheck
//= require_tree . // 変更後
これもローカルでは何も問題なくjsが動きます。ただheroku上ではjsが動かなくなります。。。
require_tree. と require_selfの説明
require_tree . はカレントディレクトリから再帰的に同じフォーマットのファイルを自身より前に挿入します。
require_selfは複数のrequireを使用しているときに自身の読み込む順番を指定します。
最後に
これらがherokuでデプロイするまでに通ったエラーの数々です。
どれか一つでも役に立てたら幸いです。