0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-10-07

久々に開発を再開しようとしたら、変更したコードがビューに反映されなくて、てんやわんやしました。
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/

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?