ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話

ホットリロードの仕組みを知りたくて 車輪の再発明をしてみた話 @s__shintani 1

イントロダクション 自己紹介 新谷 修平 @s__shintani 大学卒業後1年間の独学を経て株式会社ハイヤールーに入社。 ソフトウェアエンジニアとしてコーディング試験サービス「HireRoo」 の開発に従事し、主に実践形式やシステムデザイン形式などの開発を 担当。 © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 2

Agenda 1 ホットリロードとは 2 車輪の再発明に至った経緯 3 ホットリロードの実装 - 4 まとめ 全体像 ファイルの変更を検知する ビルドプロセスを再起動する サーバーログを送信する

1. ホットリロードとは ソフトウェア開発において、アプ リケーションを再起動せずにコー ドの変更をリアルタイムで即座に 反映させる機能。 © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 4

1. ホットリロードとは どんな仕組みで動いているのだろう？🤔 © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 5

2. 車輪の再発明に至った経緯 ● ● ● HireRooにはReactやRailsなどのフレームワークを使って問題を解くことので きる実践形式と呼ばれる形式がある 実践形式では元々候補者自身がターミナルを操作できたが、ファイルのみ編 集できる仕様に変更した。それに伴って編集内容を自動でサーバーに反映さ せるホットリロードが必要となった 実践形式は様々な言語やフレームワークに対応する必要があり、将来的な拡 張性を考慮して、既に提供されているホットリロード用のライブラリに依存 するのではなく、自分たちで作ることに決めた © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 6

2. 車輪の再発明に至った経緯 スクラッチで実装してみよう💡 © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 7

3. ホットリロードの実装 全体像 ● ● ReactやRailsなどのアプリケーションサーバーの バックグラウンドでエージェントサーバーと呼ば れるGoで書かれた軽量サーバーが起動 エージェントサーバー内ではホットリロードを実 現するため2つのgoroutineが走っている ○ File Watcher: ファイルの変更を監視し、変 更があったときはBuild Runnerにシグナル を送信 ○ Build Runner: File Watcherからファイル変 更のシグナルを受け取った際に、起動中の アプリケーションサーバーのプロセスを停 止し、再度起動する © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 8

3. ホットリロードの実装 ファイルの変更を検知する ● fsnotifyを使用し、開発ディレクトリ配下の ファイルの変更を監視 ● ファイルの作成や書き込みなどのイベントを 拾ってBuild Runnerにチャンネル経由でシグナ ルを送信 © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 9

• https://github.com/fsnotify/fsnotify

3. ホットリロードの実装 ファイルの変更を検知する ● fsnotifyを使用し、開発ディレクトリ配下の ファイルの変更を監視 ● ファイルの作成や書き込みのイベントを拾っ てBuild Runnerにチャンネル経由でシグナルを 送信 © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 10

3. ホットリロードの実装 ビルドプロセスを再起動する① ● goroutineの先頭でビルドスクリプトを実行 し、サーバーを起動する ● 以降、File Watcherからチャンネル経由で受 け取ったイベントをトリガーとして、ビル ドプロセスを再起動する © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 11

3. ホットリロードの実装 ビルドプロセスを再起動する① ● goroutineの先頭でビルドスクリプトを実行 し、サーバーを起動する ● 以降、File Watcherからチャンネル経由で受 け取ったイベントをトリガーとして、サー バーを再起動する © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 12

3. ホットリロードの実装 ビルドプロセスを再起動する② ● 古いプロセスIDを指定してSIGINTを送信し、 サーバーを終了 ● 事前に登録されているサーバーの起動スクリ プトを実行し、サーバーを新しく起動 ● 重複してプロセスが存在しないようにプロセ スIDをモジュールに持たせる © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 13

3. ホットリロードの実装 ビルドプロセスを再起動する② ● 古いプロセスIDを指定してSIGINTを送信し、 サーバーを終了 ● 事前に登録されているサーバーの起動スクリ プトを実行し、サーバーを新しく起動 ● 重複してプロセスが存在しないようにプロセ スIDをモジュールに持たせる © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 14

3. ホットリロードの実装 ビルドプロセスを再起動する② ● 古いプロセスIDを指定してSIGINTを送信し、 サーバーを終了 ● 事前に登録されているサーバーの起動スクリ プトを実行し、サーバーを新しく起動 ● 重複してプロセスが存在しないようにプロセ スIDをモジュールに持たせる © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 15

3. ホットリロードの実装 サーバーログを送信する ● サーバーログを送信するWebsocketのエンドポイ ントを用意し、コネクションを確立したタイミン グでsubscriberをモジュールに登録 ● 擬似ターミナルに出力されるログをfor文で監視 ● 登録されたsubscriberにログが行単位で書き込ま れ、Websocketを経由してリアルタイムでサー バーログが送信される © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 16

3. ホットリロードの実装 サーバーログを送信する ● サーバーログを送信するWebsocketのエンドポイ ントを用意し、コネクションを確立したタイミン グでsubscriberをモジュールに登録 ● 擬似ターミナルに出力されるログをfor文で監視 ● 登録されたsubscriberにログが行単位で書き込ま れ、Websocketを経由してリアルタイムでサー バーログが送信される © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 17

3. ホットリロードの実装 サーバーログを送信する ● サーバーログを送信するWebsocketのエンドポイ ントを用意し、コネクションを確立したタイミン グでsubscriberをモジュールに登録 ● 擬似ターミナルに出力されるログをfor文で監視 ● 登録されたsubscriberにログが行単位で書き込ま れ、Websocketを経由してリアルタイムでサー バーログが送信される © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 18

4. まとめ ● やっていること自体は非常にシンプル ○ ○ ● 普段触らない低レイヤーの知識を得られる ○ ● 実装量もそれほど多くはない 実装自体も過度に複雑ではない プロセスやファイルシステムといったOS関連の知識はあらゆる技術のコアであり汎用性が高 い ゼロから作ることを一つの選択肢として持っておくと開発の幅が広がる ○ ○ 特定のフレームワークやライブラリに依存しないため将来的な拡張性が高い ライブラリの仕組みを理解しておくと応用ができる © HireRoo, Inc. ホットリロードの仕組みを知りたくて車輪の再発明をしてみた話 19

Thank you for your listening! 20