Rails + Vue.jsの開発環境を作る on Debian 9 stretch

これからVue.jsを触ってみよう!と思い、Rails + Vue.jsの環境を構築してみた。
AngularとかReactとか比較されるFWは他にもあるけど、なぜかVue.jsが気になる。簡単に始められそうっていうのはあるのかも。

環境はこんな感じ。
Debian 9 / Ruby 2.4.1 (on rbenv) / Rails 5.2.1

参考サイトがかなり良質なので簡単にいくかと思ったら、Debian固有?の壁が少しあって、ちょっとつまずいたので残しておきます。

先人の知恵をお借りして、下記サイトを参考にしました。

準備

Vue.jsはnode.jsで動くので、node.jsとYarnをインストール。

$ sudo apt-get install nodejs yarn build-essential

ひとまずこれでnode.jsとYarnはインストール完了。
build-essential はRubyをrbenvで入れている環境なら既に入っているかも。自分の環境は入ってた。
RubyとRailsは事前に入れておいてくださいね。

rails new でコケる

意気揚々と rails new app_name --webpack=vue を実行。

そしてコケる。こんな感じのエラーメッセージが出た。

rails webpacker:install
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
rails webpacker:install:vue
Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/
run bundle exec spring binstub –all

Yarnを差し替え

Yarnのバージョン?
Debian 9のyarnパッケージは仮想パッケージで、実際にはcmdtestというパッケージがインストールされる。これが問題?

と言うことで、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

これで大丈夫だろうと、 rails new app_name --webpack=vue を実行。
そしてコケる。今度はこんな感じのエラーメッセージが出た。

rails webpacker:install
sh: 1: node: not found
Webpacker requires Node.js >= 6.0.0 and you are using 4.8.2
Please upgrade Node.js https://nodejs.org/en/download/
rails webpacker:install:vue
sh: 1: node: not found
Webpacker requires Node.js >= 6.0.0 and you are using 4.8.2
Please upgrade Node.js https://nodejs.org/en/download/
run bundle exec spring binstub –all

node.jsをアップデート

Debian 9標準パッケージのnode.jsはバージョンが低く、Vue.jsは動かないらしい。node.jsは最低Ver.6が必要とのこと。
そこで Installing Node.js via package manager を参考にして最新版をインストール。
事前に、さっきインストールした標準パッケージのnodejsは削除しておいた方が良い。

$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
$ sudo apt-get install -y nodejs

改めて rails new app_name --webpack=vue を実行。
今度はいけた!

と言うことで

Debian 9にVue.jsを入れるときは、node.jsとYarnを本家の新しいパッケージに入れ替える必要がある。

いじょう