はじめに

Railsでjs書くのが楽しいらしいのでちょっといじってみます^_^

前提として

Rubyインストール済み
Railsインストール済み
Herokuアカウント登録済み

参考までに↓↓↓

MacのRubyをrbenvでバージョンアップする
 Heroku初心者がHello, Herokuをしてみる

Vue.jsとwebpackをインストール

新しいプロジェクトを作成するときにオプションを付けると一緒についてきます。

$ rails new myapp --webpack=vue

早…

参考：https://github.com/rails/webpacker#vue

yarnをインストール

$ brew install yarn
# バージョン確認
$ yarn --version
  0.27.5

参考：https://yarnpkg.com/lang/en/docs/install/#mac-tab

サーバー起動

$ rails s

それで、たぶん http://localhost:3000/
こやつにアクセスすれば

こんな画面にアクセスできるはず！

出なかったらごめんなさいm(_ _)m

Hello Vue!を表示させる

コントローラー作成。

$ rails g controller Home index

ファイルを編集していきます。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
〜略〜
  <body>
    <%= yield %>
    <%= javascript_pack_tag 'hello_vue' %>　 ←この行を追加
  </body>
</html>

ルーティングを変更します。

config/routes.rb

Rails.application.routes.draw do
  root 'home#index'
end

コンパイルします。

$ bin/webpack

再度、サーバーを起動します。

$ rails s

プロジェクトルートにProcfileファイルを追加します。

web: bundle exec puma -p $PORT

http://localhost:3000/
にアクセス！

たぶん、出るはず！！！

Herokuにデプロイ

DB設定の変更が必要なので、Gemfileを編集していきます。

本番用とdev, test環境用に分けます。（一応）

〜略〜

# gem 'sqlite3' ←　削除

gem 'pg', group: :production　←　これを追加

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
  gem 'sqlite3' ←　追加
end

pg入ってないとエラーが出るのでインストールしておく。

$ brew install postgresql

bundle実行します。

$ bundle install

Herokuコマンドを入力していきます。

$ heroku create
$ heroku addons:create heroku-postgresql:hobby-dev

$ heroku buildpacks:add --index 1 heroku/nodejs
$ heroku buildpacks:add --index 2 heroku/ruby

$ git add .
$ git commit -m "first commit"
$ git push heroku master

$ heroku run rake db:migrate

$ heroku open

参考：https://devcenter.heroku.com/articles/getting-started-with-rails5
参考：https://elements.heroku.com/addons/heroku-postgresql

終わり！

終わりに

結構ググりながらやってるので途中なにか抜けてる気がしてます…

ご勘弁をm(_ _)m

RailsとVue.jsをHerokuにデプロイするまで