Rails5.2+Vue.jsのセットアップ手順 on Ubuntu 18.04

Keiです。
自分はこれまでデータ分析やサーバーサイドの開発を中心に学んできたためフロントエンドに疎かったのですが、同じくサーバーサイドを主に触っている友人から
「Vue.jsならサーバーサイドの人間でも比較的触りやすいよ!」
という話を聞いてついに重い腰を上げてJSに立ち向かう決意をしました(もっとはよ気付け!とか言わないで...)

せっかくなのでサーバーサイドには普段インターン先でも使っているRailsを使いたいと思い少し調べていた所、今の自分にドンピシャハマる神記事に出くわしました↓
Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた
@naoki85 さん、ありがとうございます

早速こちらの記事を参考にプロジェクトのセットアップを進めていったのですが、ちょいちょい謎のエラーに遭遇しましたのでその一部始終を共有したいと思います。なお開発環境は以下を前提としています。

• OS: Ubuntu 18.04LTS
• Ruby 2.5.1
• Rails 5.2
• gemの管理はbundler (Rails環境構築の詳細はこちら参照)

Railsプロジェクト作成

まずは上の記事にもあるようにRailsプロジェクトを--webpack=vueオプション付きで作成します。

$ bundle exec rails new vue_app --webpack=vue

するとモダンJS開発環境構築初心者の自分の場合まず"yarn入ってねーぞ"系のエラーを食らいました。Installation | Yarn のDebian/Ubuntuの部分を参考にまずyarnを入れます。

$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
$ sudo apt-get update && sudo apt-get install yarn

はい、Yarn入りましたので今度こそrails newします。

$ bundle exec rails new vue_app --webpack=vue

今度は成功しました。
(3/24 追記) 多くの記事ではこれだけでWebpackerの設定は全て終わりかのように書いてあるのですが、実際は更に次のコマンドまで実行しないとvue-loaderやデフォルトのapp.vueファイル等多くの重要なファイルがインストールされていないままなのでご注意を。

$ bundle exec rails webpacker:install:vue

ここまでやると次のようなメッセージが出るので、黄色で書かれている箇所にもあるようにconfig/initializers/content_security_policy.rbにif Rails.env.development?以下の部分を追記してください。

Railsサーバーの起動を確認

次にRailsサーバーの起動を確認します。Yay! You’re on Rails! されたいのですが、、、

$ bundle exec rails s

(鬼のようなエラー)
(鬼のようなエラー)
(鬼のようなエラー)
...
vue_app/vendor/bundle/ruby/2.5.0/gems/webpacker-3.5.5/lib/webpacker/configuration.rb:79:in `rescue in load': Webpacker configuration file not found
/home/user/Desktop/vue_app/config/webpacker.yml. Please run rails webpacker:install Error: No such file or directory @ rb_sysopen - /home/user/Desktop/vue_app/config/webpacker.yml (RuntimeError)

で怒られます。webpackerの設定ファイルがないということなので、言われるがままに

$ bundle exec rails webpacker:install

します。inotifyからちょいちょいエラーが出ていましたが一応入りました。

Webpacker successfully installed 🎉 🍰

プロジェクト内を見直すとconfig/webpack以下に4つのJSファイルが生成され、app/javascript/packs/application.jsという見慣れないファイルも作成されています。

Rails側のSQlite3のバージョン指定でエラー

さあいい加減準備できただろということで。

$ bundle exec rails s

#<LoadError: Error loading the 'sqlite3' Active Record adapter. 
Missing a gem it depends on? can't activate sqlite3 (~> 1.3.6), already activated sqlite3-1.4.0. Make sure all dependencies are added to Gemfile.>

またか...しかもSQLiteからのエラーだと?
原因を調べてみたところRails側の指定しているsqlite3のversionが1.3.x代なのに対し
sqlite3の最新versionは1.4.x代ということで、 Gemfile中でgem 'sqlite3', '~> 1.3.6'とsqliteのバージョンをきちんと指定してあげないとダメな模様。
ついでにまだGemfile全体を載せていなかったので全部載せておきます。

Gemfile

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.5.1'
gem 'rails', '~> 5.2.0'
gem 'sqlite3', '~> 1.3.6'
gem 'puma', '~> 3.11'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'webpacker'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'jquery-rails'
gem 'materialize-sass'
gem 'material_icons'
gem 'bootsnap', '>= 1.1.0', require: false

group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  gem 'foreman'
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
  gem 'capybara', '>= 2.15', '< 4.0'
  gem 'selenium-webdriver'
  gem 'chromedriver-helper'
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

これで

$ bundle install --path vendor/bundle

して解決。

inotifyで監視できるファイル数上限に到達しエラー

...と思うじゃないですか。実はもうひと踏ん張りあるんです(白目)。

$ bundle exec rails s

FATAL: Listen error: unable to monitor directories for changes.
Visit https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers for info on how to fix this.
Exiting

なんだこれ(n回目)。とりあえずエラーメッセージにGithubへのリンクが貼ってあるので飛んで確認します。
どうやらプロジェクト内のファイル数が増えすぎてLinuxのデフォルト設定ではこれ以上ファイルの変更を監視できないということだそうで(詳しくはこちら)。

これはLinux系ではよくあるエラーらしく、ちゃんと解決策が用意されていました。自分のようにDebian/RedHat系を使用している方はターミナルで

$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

を実行。ArchLinuxの場合は

$ echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system

で直ります。今度こそ。

$ bundle exec rails s

やれやれやっと全部直ったか...

さあこれで快適なRails+Vueライフを楽しむぞ!!