Rails 5.1 + Ruby 2.5.0 + Vue.jsの開発環境をつくる

この記事は1分で読めます。

初詣のおみくじで「今年は全力で勉強しろ」と書かれていたので、さっそく勉強を初めてみる。以前から気になっていたフロントエンド周りを少しずつ触っていってみる。具体的なフレームワークとしてはvue.js。

というわけで’rails new’をしますが、最初からwebpackとvueを使う予定なので、yarnをインストールし、オプションをつけてnewします。あ、そういえばruby 2.5からbundlerがデフォになったんだっけ?まあとりあえずgem i bundlerしておく。

$ brew install yarn
$ rbenv gemset init foobar
$ gem i bundler
$ bundle init

Gemfileにrailsを書いてbundle install。

$ bundle
$ rails new . --webpack=vue

で、開発時はwebpackのコンパイルにwebpackerを立ちあげないといけないらしく、それを楽にするためにforemanを使用するのが良いらしいので導入。

Gemfile
gem 'foreman'

Procfileをルートディレクトリに作成し、以下のように書いて保存する。

Procfile
rails: rails s
webpack: ./bin/webpack-dev-server

そしたらforeman startでサーバーが起動します。

$ foreman start

って思ったらなんかエラーでた。

The RUBYGEMS_GEMDEPS environment variable is set. This enables RubyGems' experimental Gemfile mode, which may conflict
with Bundler and cause unexpected errors. To remove this warning, unset RUBYGEMS_GEMDEPS.
15:34:01 rails.1   | started with pid 45749
15:34:01 webpack.1 | started with pid 45750
15:34:01 webpack.1 | Unable to resolve dependency: user requested 'tzinfo-data (>= 0)'
15:34:01 webpack.1 | You may need to `gem install -g` to install missing gems
15:34:01 webpack.1 |
15:34:01 rails.1   | Unable to resolve dependency: user requested 'tzinfo-data (>= 0)'
15:34:01 rails.1   | You may need to `gem install -g` to install missing gems
15:34:01 rails.1   |
15:34:01 webpack.1 | Your `bin/bundle` was not generated by Bundler, so this binstub cannot run.
15:34:01 webpack.1 | Replace `bin/bundle` by running `bundle binstubs bundler --force`, then run this command again.
15:34:01 webpack.1 | exited with code 1
15:34:01 system    | sending SIGTERM to all processes
15:34:01 rails.1   | terminated by SIGTERM

bundle binstubs bundler --forceしろと書かれています。ので、言われるがまま実行。

$ bundle binstubs bundler --force

これでforeman startしたら無事起動しました。というわけで、勉強を開始してみたいと思います。

🙇 参考にした記事

t4traw

いつか学んだ知識や技術で人の役にたつ事を目標に日々勉強しています。音楽とウイスキーとRubyが好きです。最近はキャンプと釣り(ライトソルトルアー)も好きです。

コメントください🙋

わかりにくい所や、共感していただける事がありましたら、お気軽にコメントください✋ ブログのコメントでもTwitterなど、どこでも反応します👍

comments powered by Disqus
rss facebook twitter github gitlab youtube mail spotify lastfm instagram linkedin google google-plus pinterest medium vimeo stackoverflow reddit quora quora