1. サーバーサイド作成

まずはいつもの感じでディレクトリを作ってbundle initしましょう。

mkdir sample-app
cd sample-app
bundle init

Gemfileは以下のように。

Gemfile

source "https://rubygems.org"

ruby '2.3.3'

gem 'sinatra', '~> 1.4'
gem 'sinatra-contrib'
gem 'slim'

vendor/bundleにインストールします。

bundle install --path=vendor/bundle

忘れずに.gitignoreに/vendorを追加。

.gitignore

/vendor

準備が整ったので早速アプリを作っていきましょう。
といっても以下のファイルを置くだけ。

app.rb

require 'sinatra'
require 'sinatra/reloader'
require 'rabl'

get '/' do
  slim :app
end

views/app.slim

doctype html
html
  head
    title sample app
    script[type="text/javascript" src="bundle.js" charset="utf-8"]
  body
    h1 HELLO!
    #app
      p[v-text="massege"]

bundle.jsはこのあと作成するファイルです。

この時点でbundle exec ruby app.rbしてhttp://localhost:4567/ を開けばHELLO!と表示されるはずです。

2. フロントサイド作成

今回はyarnを使います。
以下のものをインストール。

yarn init
yarn add webpack vue coffee-script coffee-loader

webpackのversion 4以降を使う場合は別途webpack-cliも必要です(Thank you @tamano)。

yarn add webpack-cli

webpack.config.jsを作成しましょう。

webpack.config.js

module.exports = {
  entry: './frontend/main.js',
  output: {
    path: 'public',
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.coffee$/, loader: "coffee-loader" }
    ]
  },
  resolve: {
    extenstions: ['', '.js', '.json', '.html'],
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
};

だいたいこんなことが書いてあります。

entryとoutput:./frontend/main.jsを./public/bundle.jsにビルド
loaders: .coffeeファイルはcoffee-loaderを使ってコンパイル
extenstions: require(後述)するときにこの拡張子は省略できるよ
alias: vueを使うときのおまじない。詳しくは公式参照。

./frontend/main.jsを作っていきましょう。

frontend/main.js

require('./app.coffee')

main.jsというのがビルドしたときのエンドポイントになるので、ここに必要なファイルをどんどんrequireしていきます。
今回はapp.coffeeというのを作ります。

frontend/app.coffee

Vue = require('vue')

window.app = new Vue
  el: '#app'
  data:
    message: "hello vue!"

以下のコマンドでビルドします。

webpack

これでpublic/bundle.jsができているはずです。

ここでhttp://localhost:4567/ を開けばhello vueと表示されるはずです。

忘れずに.gitignoreに/node_modulesと/publicを追加します。
/publicはgitに入れるケースも有るのですが、今回はgitで管理しないことにします。

.gitignore

/vendor
/node_modules
/public

ここらでコミットを

git add .
git commit -m "Initial commit"

3. Herokuにアップ!

herokuにappを作成しましょう。
作成部分は省略します。

ここからが一番言いたかったこと
Heroku上でwebpackを実行するためにbuildpackにnodejsを追加しましょう。

heroku buildpacks:clear
heroku buildpacks:set heroku/nodejs
heroku buildpacks:add heroku/ruby --index 2

--index 2はnodejsのあとでrubyをビルドするよってことです(なくてもいいかもしれません)。

package.jsonに下記を追加しましよう。

package.json

  "scripts": {
    "heroku-postbuild": "webpack -p"
  }

あとはpushするだけ。

git push heroku master

お疲れ様でした！

sinatra+vue+webpackで作成したアプリをHerokuで公開する(初心者向け)

1. サーバーサイド作成

2. フロントサイド作成

3. Herokuにアップ!