Ruby on Rails: Asset Pipelineを使わないwebpackなRailsアプリケーションをHerokuでデプロイする

個人アプリの開発ではHerokuを使うことが多いのですが、最近webpack + Railsの環境を使っていてデプロイまわりで少しハマったので、デプロイ方法をメモしておきます📝

Herokuのデプロイついて

使用する Heroku buildpack によって、アプリケーションの開発プロセスや、コードの実行時に用意すべきアセットやランタイムが決まります。複雑なアプリケーションで複数の言語を実行する場合は、1 つのアプリケーションで複数の buildpack を使用することもできます。

Herokuのデプロイというのはbuildpackという仕組みを使って行われているようです。

devcenter.heroku.com

buildpackは様々な言語をサポートしていて、これらによってpushするだけでデプロイされるようなheroku のシンプルなしくみが実現出来ているんですね。

Herokuによる標準のRailsデプロイ

Railsアプリケーションにおいて、デフォルトでは以下のようなbuildpackな設定になっています。

$ heroku buildpacks
=== app-name Buildpack URLs
1. heroku/ruby

RubyのbuildpackではRailsのサポートが入っているので、assets:precompileがデプロイ時に実行されsprokets、webpackerで管理しているassets等のファイルのbuildが走ります。

devcenter.heroku.com

しかし、sproketsもwebpackerも使わずwebpackのみで管理しているいる場合、assets:precompileは使わないのでフロントエンドまわりのファイルのbuildが走りません。。。

WeboackなRailsをHerokuにデプロイする

ではどうするかというと、nodeのbuildpackを追加して、yarn install及びyarn buildが実行されるようにします。

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks
=== app-name Buildpack URLs
1. heroku/nodejs
2. heroku/ruby

devcenter.heroku.com

nodeのbuildpackでは、buildコマンドが実行されます。そのためpackage.jsonのscripts内のbuildにデプロイ時に実行するコマンドを定義しておきます。

{
  "scripts": {
    "build": "webpack --mode=production",

これにより以下のようにwebpackのbuild後にRailsのdeployが走るようになっています✨

-----> Node.js app detected
       
-----> Creating runtime environment
       
       NPM_CONFIG_LOGLEVEL=error
       USE_YARN_CACHE=true
       NODE_ENV=production
       NODE_MODULES_CACHE=true
       NODE_VERBOSE=false
       
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)
       engines.yarn (package.json):  unspecified (use default)
       
       Resolving node version 12.x...
       Downloading and installing node 12.19.0...
       Using default npm version: 6.14.8
       Resolving yarn version 1.22.x...
       Downloading and installing yarn (1.22.10)
       Installed yarn 1.22.10
       
-----> Restoring cache
       - yarn cache
       
-----> Installing dependencies
       Installing node modules (yarn.lock)
       yarn install v1.22.10
       Done in 12.10s.
       
-----> Build
       Running build (yarn)
       yarn run v1.22.10
       $ webpack --mode=production
       
       Done in 19.50s.
       
-----> Pruning devDependencies
       yarn install v1.22.10
       warning Ignored scripts due to flag.
       Done in 5.04s.
       
-----> Caching build
       - yarn cache
       
-----> Build succeeded!

-----> Ruby app detected
-----> Installing bundler 2.1.4
-----> Removing BUNDLED WITH version in the Gemfile.lock
-----> Compiling Ruby/Rails
-----> Using Ruby version: ruby-2.7.1
-----> Installing dependencies using bundler 2.1.4
       Bundle complete! 20 Gemfile dependencies, 55 gems now installed.
-----> Detecting rake tasks
-----> Detecting rails configuration
       Released v15

参考

www.bokukoko.info