はじめに

本記事は錆びかけたRailsの知識を頑張ってアップデートするアドベントカレンダー19日目です。

今回は、Railsアプリにホットリロード機能を導入します。

ホットリロードとは？

Web制作などでviewを変更した場合、変更をブラウザで確認するには一度リロードする必要があります。

ホットリロードとは、コードの変更を自動で検知し、リアルタイムに変更した内容をブラウザ側に反映できることを指します。

Turbo Streamを利用したホットリロード機能の導入

Railsでホットリロードを実現するには様々な方法があります。今回は、以下のgemを利用します。

このgemを利用するためには、redisを導入する必要があります。

なので、まずはDockerで立ち上げているアプリにredisを導入します。

以下のようにdocker-compose.ymlにredisのサービスを設定します。

以下のdocker-compose.ymlは例であり、サービス名などは適当です。

docker-compose.yml

version: '3.8'
services:
  iscroll-db:  # サービス名を変更
    image: mysql:8.0.32
    command: --default-authentication-plugin=mysql_native_password
    container_name: iscroll-db  # コンテナ名を変更
    ports:
      - 4306:3306
    volumes:
      - iscroll-db:/var/lib/mysql  # ボリューム名も変更できます
    environment:
      MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
      TZ: Asia/Tokyo
    security_opt:
      - seccomp:unconfined
  i-scroll-web:
    tty: true
    stdin_open: true
    container_name: i-scroll-web
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - .:/i-scroll-web
      - bundle:/usr/local/bundle
      - public-data:/i-scroll-web/public
      - tmp-data:/i-scroll-web/tmp
    command: bash -c "rm -rf tmp/pids/server.pid && bin/dev"
    environment:
      TZ: Asia/Tokyo
    depends_on:
      - iscroll-db  # 依存関係のサービス名を更新
+     - redis
    ports:
      - 3000:3000
+ redis:
+   image: redis:latest
+   container_name: redis
+   ports:
+     - 6379:6379
volumes:
  iscroll-db:  # ボリューム名も変更できます
    driver: local
  bundle:
    driver: local
  public-data:
    driver: local
  tmp-data:
    driver: local

続いて、Gemfileのdevelopmentブロックの中にgemを記載します。

Gemfile

gem 'hotwire-livereload'

Gemfileを編集したアプリのディレクトリ内でbundle installを実行

ターミナル

bundle

同ディレクトリにて、以下のコマンドを実行します。すると、以降rails sでサーバを立ち上げている時はホットリロードになっています。

ターミナル

rails livereload:install

詳細は、GitHubのreadmeを覗いてみてください。

おわりに

ホットリロード、とても便利ですね！