Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

@tily

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

自分の 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 に置いておいた。

参考資料

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
2
Help us understand the problem. What are the problem?