【Ubuntu】既存Rails製アプリにVue.jsを導入する【16.04にて】

本記事はUbuntu desktop 16.04上で動作するRails製アプリケーションのフロントエンド用フレームワークとしてVue.jsを導入する際の記録である。

Ubuntu上RailsアプリにVue.jsを導入する


現状UI

UIはこんな感じです。
この記事でUI変更まで行くかどうかわかりません。→とりあえずRuby on RailsアプリにVue.jsを導入するまでを紹介します。

rails製飲酒渇望記録

現状環境の確認

Vueのインストール前に現状を確認する。Vue.jsをインストールする上でnpmが必須。

$ rails -v
Rails 5.2.3
$ node -v
v9.2.0
$ npm -v
5.7.1

n のインストール

「n」というNodeのバージョンを簡単に変更できるプラグインをインストール。stableとすると現在の安定版も一緒にインストールしくれます。

$ sudo npm install n -g
/usr/local/bin/n -> /usr/local/lib/node_modules/n/bin/n
+ n@6.1.3
updated 1 package in 2.068s

そしてnpmを5.7.1最新のstable(安定版)にする。

$ sudo n stable

現在は10系が安定です。Nodeは偶数が安定版で奇数が開発版だということをなんとなく覚えておくといいかと思います。

なにこの目からウロコの情報

上記を実行すると、

$ sudo n stable

  installing : node-v12.13.1
       mkdir : /usr/local/n/versions/node/12.13.1
       fetch : https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.gz
   installed : v12.13.1 (with npm 6.12.1)

$ npm -v
6.12.1

npmのversionが 5.7.1 -> 6.12.1 にアップデートされた♪

sudo ln -sf /usr/local/bin/node /usr/bin/node

nodeコマンドを一般ユーザーとrootユーザーが同等に使えるようにする。

npm は最新に上げる必要がある


最後にyarnをインストールする

$ sudo npm install yarn -g

railsアプリにVueを入れていく

Railsアプリディレクトリに移動して・・・

Gemfile

$ gem 'webpacker', git: 'https://github.com/rails/webpacker.git' # とりあえずファイルの一番下に書いておきましょう

Railsアプリのディレクトリで(Qiitaとかだとこのへん書いてないよね)

$ bundle install
...
...
Using webpacker 4.2.2 from https://github.com/rails/webpacker.git (at master@96af013)
Bundle complete! 23 Gemfile dependencies, 92 gems now installed.
Bundled gems are installed into `./vender/bundle`

下記を実行。さっきのYarnがうまくインストールされていないとエラーが起きるので注意。


$ bundle exec rails webpacker:install

案の定。。。yarnのエラー。。。

error An unexpected error occurred: "https://registry.yarnpkg.com/@rails%2fwebpacker: getaddrinfo EAI_AGAIN registry.yarnpkg.com".
info If you think this is a bug, please open a bug report with the information provided in "/home/******/git/desire-record-open/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
...
..
.
You need to allow webpack-dev-server host as allowed origin for connect-src.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?

errorが出ているのが気になる。

yarnのerrorに関して調査

$ sudo npm install yarn -g
npm WARN registry Unexpected warning for https://registry.npmjs.org/: Miscellaneous Warning EAI_AGAIN: request to https://registry.npmjs.org/yarn failed, reason: getaddrinfo EAI_AGAIN registry.npmjs.org
npm WARN registry Using stale data from https://registry.npmjs.org/ due to a request error during revalidation.
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.21.0
updated 1 package in 1.477s


   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.12.1 → 6.13.3       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.13.3   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

npmのバージョンが古い、、と?でもstableにした意味は?とりあえずn stableすれば戻ると思うので健気にアップデートしてyarnインストール

→原因判明、iphoneのネットワーク共有機能が切れてネット接続ができなかったから・・・

ということで繋ぎ直して再度実行したところうまくいった

$ bundle exec rails webpacker:install
.
.
.
.
Done in 30.21s.
You need to allow webpack-dev-server host as allowed origin for connect-src.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035" if Rails.env.development?
Webpacker successfully installed 🎉 🍰


ここでやっとVueの登場

$ rails webpacker:install:vue

結果、以下のように絵文字が出てくれば成功。

Done in 16.22s.
You need to enable unsafe-eval rule.
This can be done in Rails 5.2+ for development environment in the CSP initializer
config/initializers/content_security_policy.rb with a snippet like this:
if Rails.env.development?
  policy.script_src :self, :https, :unsafe_eval
else
  policy.script_src :self, :https
end
Webpacker now supports Vue.js 🎉

Webpackerについて

Webpackerとは、モダンなフロントエンド開発を強力にサポートするWebpackをRuby on Railsで使うためのgemパッケージです。

Webpackとは、CSS、JavaScript、画像などを1つのファイルとしてまとめるためのモジュールバンドラーで、node.jsのモジュールの1つです。

【Rails入門】Webpackerではじめるフロントエンド開発!Rails5.1対応 | Samurai works

というようにrailsでモダンなフロントエンド開発ができるようなNode.jsモジュールを入れられるというものです。
Rails 5.1以上でないと使えません。

最後に大事な動作確認

$ rails s

localhost:3000にアクセスして動作していれば問題ありません。
RailsアプリにVue.jsを導入する

RailsアプリにVueを導入する
心なしかボタンなどのUI部品がかっこよくなった気がする。

RailsアプリにVueを導入するのは以上です。
フロントエンドかっこよくするぞーーーー!!


参考資料

コメント

タイトルとURLをコピーしました