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

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

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

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

- OS: Ubuntu 18.04LTS
- Ruby 2.5.1
- Rails 5.2
- gemの管理はbundler (Rails環境構築の詳細は[こちら](https://qiita.com/emadurandal/items/e43c4896be1df60caef0)参照)

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

```shell
$ bundle exec rails new vue_app --webpack=vue
```
するとモダンJS開発環境構築初心者の自分の場合まず"yarn入ってねーぞ"系のエラーを食らいました。[Installation | Yarn](https://yarnpkg.com/lang/en/docs/install/#debian-stable) の**Debian/Ubuntu**の部分を参考にまずyarnを入れます。

```shell
$ 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します。

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

```shell
$ bundle exec rails webpacker:install:vue
```
ここまでやると次のようなメッセージが出るので、黄色で書かれている箇所にもあるようにconfig/initializers/content_security_policy.rbに`if Rails.env.development?`以下の部分を追記してください。
![vue_installation.png](https://qiita-image-store.s3.amazonaws.com/0/227776/424ce7b0-5c97-ae01-5ea7-b94c4f7d4080.png)

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

```shell
$ 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の設定ファイルがないということなので、言われるがままに

```shell
$ bundle exec rails webpacker:install
```
します。inotifyからちょいちょいエラーが出ていましたが一応入りました。

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

# Rails側のSQlite3のバージョン指定でエラー
さあいい加減準備できただろということで。

```shell
$ 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からのエラーだと? 
[原因](https://qiita.com/homhom_star/items/0b954411d8112d5e80bc)を調べてみたところRails側の指定しているsqlite3のversionが1.3.x代なのに対し
sqlite3の最新versionは1.4.x代ということで、 Gemfile中で```gem 'sqlite3', '~> 1.3.6'```とsqliteのバージョンをきちんと指定してあげないとダメな模様。
ついでにまだGemfile全体を載せていなかったので全部載せておきます。

```ruby: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]

```
これで

```shell
$ bundle install --path vendor/bundle
```
して解決。

# inotifyで監視できるファイル数上限に到達しエラー
...と思うじゃないですか。実はもうひと踏ん張りあるんです(白目)。

```shell
$ 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](https://github.com/guard/listen/wiki/Increasing-the-amount-of-inotify-watchers)へのリンクが貼ってあるので飛んで確認します。
どうやらプロジェクト内のファイル数が増えすぎてLinuxのデフォルト設定ではこれ以上ファイルの変更を監視できないということだそうで(詳しくは[こちら](https://qiita.com/yn-misaki/items/c850a07f7858437e4d26))。

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

```shell
$ echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
```
を実行。ArchLinuxの場合は

```shell
$ echo fs.inotify.max_user_watches=524288 | sudo tee /etc/sysctl.d/40-max-user-watches.conf && sudo sysctl --system
```
で直ります。今度こそ。

```shell
$ bundle exec rails s
```
<img src="https://qiita-image-store.s3.amazonaws.com/0/227776/23e10671-251b-afe3-c993-80f884a7f995.png" width=400>

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

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