SpringBoot DevToolsのHot RestartとLiveReloadでサクサク開発を行う

エキサイト株式会社エンジニアの佐々木です。2021年エキサイトホールディングスアドベントカレンダー19日を担当させていただきます。

余談

エキサイトのメディア事業部では、SpringBootを使用して過去の技術的負債に立ち向かっております。私がジョインしてから1.5年以上が経過しましたが、半年以上の開発を経てメンバーも、悪い設計の見直しや改善、無駄処理の置き換え、クエリチューニングやパフォーマンス改善を通してサーバコストの圧縮を行っており成果がではじめています。サーバコストが半分以下になっていながらも、アプリケーションの負荷対策や開発速度などのパフォーマンスは上がっているところがほとんどで、技術観点や設計観点でも、ジョインしたときと比べて、成長をしているかと思います。

はじめに

SpringBootで開発する際に、Javaはコンパイル言語であるのでコードを編集したらアプリケーションの再起動が必要になります。スクリプト言語のように次回実行時に動的にロードされるとかは通常ありません。SpringBootでは、Hot Reloadはないけど、Hot Restartはあるよといったものです。Hot Reloadより遅いけど、Hot Restartでも十分戦えるものになっているかと思います。バックエンドとフロントエンドの両方をご紹介します。

バックエンド

まず、バックエンド側のHot Restartの設定を紹介になります。

設定

依存関係を解消してくれるbuild.gradleに、SpringBoot devtoolsのパッケージを追加します。

dependencies {
    ...
        developmentOnly 'org.springframework.boot:spring-boot-devtools'    // この設定を追加
    ...

SpringBootの設定ファイルであるapplication.yaml(application.properties)に下記の設定を追加します。

spring.devtools.restart.enabled=true

これで準備は完了になります。

動作確認

動作確認は、

IntelliJでSpringBootを起動
コードを編集(コメントアウトしているコードのコメントを解除)
ビルド (ファイル単体ビルド ⌘ + Shift + F9 or プロジェクトビルド ⌘ + F9 )

を実行します。これを行うと、SpringBoot DevToolsが変更を検知して、Hot Restartをしてくれます。このHot Restartは、アプリケーション全部を再起動しているわけではなく、必要な箇所だけやっているっぽいので、通常の再起動よりかなり高速です。

f:id:earu:20211219141741g:plain

さらに

ビルドのショートカットすら押したくない人もいるかと思います。IntelliJは、SpringBoot実行時には、コンパイルが走らないという設定があるので、これを解除します。

Preferences > Build, Execution, Deployment > Compiler > Build Project Automatically にチェックを入れます
Preferences > Advanced Settings > Allow auto-make to start even if developed application is currently running にチェックを入れます ※ Intellijの古いバージョンだと registly設定からauto-make で検索してください!!!

Auto Make は、ちょっとディレイがあるので、個人的には面倒でもビルドショートカットを押すのがオススメです。

フロントエンド

フロントエンドでは、LiveReloadという機構がありますので、これを使います。SpringBoot DevToolsは、このLiveReloadに依存しています。

livereload.com

設定

application.properties(application.yaml)に下記の設定を行います。

spring.devtools.livereload.enabled=true
spring.thymeleaf.cache=false

Chrome Extensionをインストール

Chromeに下記のExtensionをインストールします。

chrome.google.com

LiveReloadを動作させたいURLを開き、有効にします。

f:id:earu:20211219122336p:plain — LiveReloadのExteion

設定は以上で完了です。

動作確認

動作確認は、

IntelliJでSpringBootを起動
コードを編集(Hello, Spring -> Hello, LiveReload)
ビルド (ファイル単体ビルド ⌘ + Shift + F9 or プロジェクトビルド ⌘ + F9 )

標準出力(テンプレートを通さない出力)もサーバサイドテンプレート出力もどちらにも対応しています。

標準出力

f:id:earu:20211219144738g:plain

サーバサイドテンプレート出力

f:id:earu:20211219143631g:plain

テンプレートのみ修正の場合

テンプレートのみ修正の場合は、再起動なしでOKです。SpringBoot DevToolsがファイル変更を検知して、LiveReloadをキックしてくれます。

f:id:earu:20211219143144g:plain

まとめ

バックエンドはスクリプト言語のようにまではいきませんが、少しはサクサク開発ができるようにはなります。設定がやや必要にはなりますが、静的型付け言語が持つ便利さを享受するのと引き換えにこのくらいの簡単な設定であれば、許容範囲ないかなと思います。フロントエンドの方は、最近ではReact.jsやVue.jsなどクライアントサイドのフレームワークが充実し、サーバサイドテンプレートは流行りませんが、SPAだとSEOは不安ですし、SSGやISRだとビルドのタイミング等に気を配る必要があります。規模によって適切なものを選択するのがいいかとおもいます。