【Rails + Vue】変更が反映されない!?と思ったら bin/webpack-dev-server 忘れだった人の記事(foremanで一元管理する)


久々に開発を再開しようとしたら、変更したコードがビューに反映されなくて、てんやわんやしました。
Rails6 + Vue3で、webpackerを使って環境構築しており、rails sbin/webpack-dev-serverを、それぞれ手動で立ち上げていたことをすっかり忘れていただけだったのですが、いっそまとめて管理しようと心に誓いましたので、まとめます。

gem foreman を使ってみる

インストールする

gem foreman を使って一元管理を試みます。アプリケーション実行の際のコマンドをまとめて管理できるという、ありがたgemです。

Gemfileに書いて bundle install しようとしましたが、この方法は非推奨とのこと。なので、以下を実行しましょう。

$ gem install foreman

Procfileを新たに作成する

foremanは、Procfile の内容を継承するようになっているので、ここにコマンドを書いていきます。アプリケーション直下にProcfileという名前のファイルを作成します。拡張子はいりません。

rails: rails s
webpack: bin/webpack-dev-server

左側の名前は自由に変えてOK、右側が立ち上げる時に打っているコマンドですね。
Procfileの準備ができたら、あとは以下を打つだけで2つ同時に立ち上がります!

$ foreman start

ログも、1つのターミナルに2つまとめて表示されます。

02:48:15 rails.1   | started with pid 74544
02:48:15 webpack.1 | started with pid 74545
02:48:16 rails.1   | => Booting Puma
02:48:16 rails.1   | => Rails 6.0.4 application starting in development 
02:48:16 rails.1   | => Run `rails server --help` for more startup options
02:48:17 webpack.1 | ℹ 「wds」: Project is running at http://localhost:3035/

以上。ちょっと平和になったかもしれない記事でした。

少しでも役に立つことがあればうれしいです。