Vagrant上でのRails + Vue.jsのアプリ作成のための環境開発の手順メモ
こんにちはヒッキーです。
現在就活中ですが、Vagrant上でのRailsとVue.jsを使ったアプリの開発をしています。しかし環境設定の段階でかなり詰まるポイントが多かったので手順を残しておきます。また、Railsアプリに後からVue.jsを導入する方法が難しかったため、今回はVue.jsを初めから組み込んだ設定を行なっていきます。
前提条件として、今回のVagrant上の開発環境は
・Linuxディストリビューション:ubuntu
・Rails 5.2.4.1
・ruby 2.5.5
・JavaScriptパッケージマネージャー:Yarn
で設定を行なっていきます。
・nodeのインストール
こちらの記事の手順に沿ってホームディレクトリでコマンドを実行していきます。
ホームディレクトリでnodenvのインストール&nodeのバージョンを最新にします
vagrant@ubuntu-bionic:/vagrant
$ nodenv install 12.1.0
> echo 12.1.0 > .node-version
> npm install -g yarn
$ node -v
v12.1.0
・Yarnのインストール
以下の記事を参考にyarnをインストールします。
ubuntuにおけるyarnインストール手順
vagrant@ubuntu-bionic:/vagrant
$ 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 -v
1.22.0ここからは以下の記事を参考にプロジェクトを作っていきます。
Railsプロジェクトの作成
$ rails new rails-vue-app --webpack=vue --skip-turbolinks --skip-coffeeWebpackのインストール
rails webpacker:installコントローラの作成
$ rails g controller HelloVue index --no-helper --no-assetsローカルホストにアクセスし、接続を確認
http://localhost:3000/hello_vue/index app/views/layouts/application.html.erbに以下の記述を追加
<body>
<%= yield %>
<%= javascript_pack_tag "hello_vue" %>
</body>webpackのビルド&ローカルサーバの起動
vagrant/app_dir
$ bin/webpack
$ rails s -b 0.0.0.0ビルドしないとVueが起動しないので注意。
もう一度http://localhost:3000/hello_vue/index にアクセスして確認
ここから色々と開発を進めていきます。
この記事が気に入ったらサポートをしてみませんか？