MENU

アプリ更新時のブラウザリロードは自動で!

エンジニアブログ

2017-04-30

第一印象は下北のバンドマン、内立です。4月からwajaにジョインしました。

 

開発って、実装→デプロイ→ブラウザリロード→確認のサイクルですが、アプリ更新されるたびにブラウザ手動でリロードするのがめんどくさい。

ということで今回は、Vagrant上のアプリにおけるLive Reloadの使い方を備忘録として書きます。(今更感ありますが)

■ Live Reload拡張機能追加(mac)

・chromeの拡張機能であるLive Reloadを追加します。(https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=ja)

 

■ リポジトリ追加(CentOS)

・yum install epel-release

 

■ nodeインストール(CentOS)

・yum install nodejs npm –enablerepo=epel

 

■ Vagrantの設定変更(mac)

・ Vagrantfileに「config.vm.network “forwarded_port”, guest: 35729, host: 35729」 を追加します。

・ sudo pfctl -ef /etc/pf.anchors/com.vagrant(Live Reloadはデフォルトポートである35729番でListenするので、ローカルホストの35729番へのアクセスをゲストへポートフォワードできるようにする。)

 

■ Vagrantファイルの再読み込み(mac)

・vagrant reload

 

■ Vagrantのプロビジョニング(mac)

・vagrant provision

 

■ livereloadXをインストールする(CentOS)

・npm install -g livereloadx

 

■ livereloadXの起動(CentOS)

・livereloadx path/to/dir(アプリのあるディレクトリを指定)

例えば、~/workspace/waja/がアプリのルートであるときは、「livereloadx ~/workspace/waja」と指定してください。

 

■ Live Reloadを有効にする(mac)

chromeに追加したLive Reloadのアイコンを押下し、中心が黒くなれば準備完了です。

 

■ 変更を加えてアプリを更新する(mac)

・アプリを更新すると自動でブラウザのリロードを行ってくれます。(htmlやcssなどの静的ファイルの更新には無意味です。)

 

以上、連休前の駆け込みブログでした。

ThymeleafとJSPを共存させた話

2017-07-03

BLOG/エンジニアブログ