Help us understand the problem. What is going on with this article?

Ruby + JS の Web アプリでビルドした JS をコミットせずに Heroku へデプロイする方法

More than 5 years have passed since last update.

自分の Ruby 製の Web アプリでいつも JS ファイルをコミットして git push heroku master しているのがダサいのでやめたいなーと思い、やり方を調べてみた。

すごく簡単だったのでこれからは JS も提供するような Ruby の Web アプリケーションを提供するようなときには必ずこのやり方を使おうと思った。

heroku-buildpack-multi

heroku のデフォルトでは 1 つのアプリに対して 1 つの buildpack しか使えないけど、ddollar/heroku-buildpack-multi を使うと 2 つの buildpack を使い、node.js + gulp でクライアントサイドの JS をビルドし、ruby + rack でサーバーサイドの Web アプリを提供する、ということができるっぽい。

アプリを作るときに heroku-buildpack-multi を指定するか、

$ heroku create your-app-name --buildpack https://github.com/ddollar/heroku-buildpack-multi.git

すでに作成したアプリに設定を追加してもよい。

$ heroku config:add BUILDPACK_URL=https://github.com/ddollar/heroku-buildpack-multi.git

で、.buildpacks ファイルに buildpack の Git URL を 1 行 1 つで書いておく。

$ cat .buildpacks
https://github.com/heroku/heroku-buildpack-nodejs.git
https://github.com/heroku/heroku-buildpack-ruby.git

試すためのアプリ

gulp buildsrc/index.jade から public/index.html を生成し、rack で public/index.html を提供するという最小限の構成で試してみた。

Gemfile

source 'https://rubygems.org'
gem 'thin'

config.ru

use Rack::Static, urls: [''], root: 'public', index: 'index.html'
run Rack::Directory.new 'public'

gulpfile.coffee

gulp = require 'gulp'
jade = require 'gulp-jade'

gulp.task 'build', ->
  gulp.src('./src/index.jade')
    .pipe jade()
    .pipe gulp.dest('public')

src/index.jade

doctype html
html
  head
    title hello
  body
    #app world

Procfile

このやり方がいいのかはよく分からないけど、Procfile には下記のように書いてみた。

web: gulp build && bundle exec thin start -p $PORT

こう書いておくと heroku push origin master するときにも gulp build が実行されるし、heroku restart でアプリを再起動するときにも gulp build が実行されるので、heroku の ephemeral filesystem でも index.html が消失してしまうという問題は起きなさそう。

うまく動いた例を tily/testing-heroku-buildpack-multi に置いておいた。

参考資料

tily
お気に入り ruby 使える python golang javascript 書いたことはある perl php 興味ある erlang 苦手 java
fjct
クラウド・IoT 関連サービスを開発・提供している企業です。(こちらは、富士通クラウドテクノロジーズの有志にて運営しております。)
https://fjct.fujitsu.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした