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


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'
}
}
};

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



  • entryoutput:./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

お疲れ様でした!