Zenn
🚄

Rails 7.2時代の最小構成セットアップ手順

2024/08/11に公開
Rails
Ruby
tech

環境

  • Ruby 3.3
  • Nodejs 22

はじめに

ついに今月Rails 7.2が正式リリースされた。

https://rubyonrails.org/2024/8/10/Rails-7-2-0-has-been-released

主な変更点は以下

  • デフォルト設定の改善: セキュリティとパフォーマンス向上のため、プロダクション環境のデフォルト設定がよりセキュアかつ効率的なものに変更された。
  • 開発コンテナの導入: Dockerベースの開発コンテナが導入され、開発環境のセットアップと共有が容易になった。
  • ガイドデザインの刷新: Railsガイドのデザインが新しくなり、より見やすく、使いやすくなった。

最近のRailsはフロントエンド事情がかなり変わってしまっている。例えばwebpackerはもう入っていないしsprocketsもRails8からはデフォルトから外れることが決定している。

ここでは最小構成でjsとcssが動かせるRailsサーバーの構築を1から行う手順を記す。

なお、RubyやNodejs等はすでにインストール済みとする。

構築する要件

  • Rails 7.2
  • --minimum 構成
    • Rails6.1から実装された
    • MailerとかJobとかが初期では無効になる
  • JSはesbuildでビルドする
  • CSSはBootstrap5、sassコマンドでビルドする
  • データベースはデフォルトのSQLite
  • テストは今回は含めない

ひな壇の作成

まずはyarnが入っているかを確認する。悲しいことにrails newのときにyarnコマンドが入っていないとセットアップに失敗する。

❯ yarn -v
1.22.22

適当なディレクトリを作成する

mkdir todo-app
cd todo-app

Gemfileを作成する

❯ bundle init
Writing new Gemfile to /path/todo-app/Gemfile

Railsのインストール

bundle add rails

インストールできたか確認

❯ rails -v
Rails 7.2.0

Railsのひな壇を生成する

bundle exec rails new . --minimal --javascript=esbuild --no-skip-javascript --asset-pipeline=propshaft --css=bootstrap
  • --minimal: 最小限の構成でRailsアプリケーションを作成する。
    • Active JobやAction Mailerなど、一部の機能がデフォルトで無効になる。
    • 開発に必要なコンポーネントだけを含めることで、アプリケーションの軽量化と起動時間の短縮が可能。
  • --javascript=esbuild: JavaScriptのビルドツールとしてesbuildを使用する。
    • Webpackerの代わりにesbuildを採用することで、高速なビルドを実現。
  • --no-skip-javascript: JavaScript関連ファイルを生成する。
    • --minimalオプションではデフォルトでJavaScript関連ファイルが生成されないため、明示的に指定する必要がある。
  • --asset-pipeline=propshaft: アセットパイプラインとしてPropshaftを使用する。
    • Sprocketsの代わりにPropshaftを採用することで、アセットの処理がシンプルになる。
  • --css=bootstrap: CSSフレームワークとしてBootstrapを使用する。
    • デフォルトのCSSフレームワークとしてBootstrapが設定されるため、簡単にスタイリングが可能。

すでにGemfileは作成済みなのでコンフリクトするが、上書きしたいので「a」でエンター

conflict  Gemfile
Overwrite /Users/thr3a/tmp/my-rails/todo-app/Gemfile? (enter "h" for help) [Ynaqdhm]

最終的に以下の構成になっていれば成功

├── Dockerfile
├── Gemfile
├── Gemfile.lock
├── Procfile.dev
├── README.md
├── Rakefile
├── app
├── bin
├── config
├── config.ru
├── db
├── lib
├── log
├── node_modules
├── package.json
├── public
├── storage
├── test
├── tmp
├── vendor
└── yarn.lock

起動 後述するがJSとCSSの自動ビルドが走らないので bundle exec rails s では起動しないこと！！！

今回のRailsでは ./bin/dev で起動する。

❯ ./bin/dev
(省略)
=> Booting Puma
=> Rails 7.2.0 application starting in development
=> Run `bin/rails server --help` for more startup options
Puma starting in single mode...
* Puma version: 6.4.2 (ruby 3.3.4-p94) ("The Eagle of Durango")
*  Min threads: 3
*  Max threads: 3
*  Environment: development
*          PID: 9708
* Listening on http://127.0.0.1:3000
* Listening on http://[::1]:3000
Use Ctrl-C to stop

http://localhost:3000/ を開いて表示されればOK

備考: ./bin/devでやっていること

bin/dev はただのシェルスクリプトなので最終的には以下のコマンドを実行しているだけ。

exec foreman start -f Procfile.dev --env /dev/null "$@"

foremanは複数プロセスを同時に起動させるときに役に立つ。 Procfile.dev を見てみると以下のようになっている。

web: env RUBY_DEBUG_OPEN=true bin/rails server
js: yarn build --watch
css: yarn watch:css

rails s コマンドは、Railsアプリケーションを起動するための基本的なコマンドだが、
今回の構成ではJSとCSSのビルドプロセスを別途実行する必要があるため、単独では正常に動作しない。

bin/dev スクリプトは、foremanを使用して複数のプロセスを同時に管理する。具体的には、以下のプロセスを起動する。

  • web: Railsサーバーを起動するプロセス。 rails s と同じ役割。
  • js: yarn build --watch コマンドを実行し、JSファイルを監視して変更があった場合に自動的に再ビルドするプロセス。
  • css: yarn watch:css コマンドを実行し、CSSファイルを監視して変更があった場合に自動的に再ビルドするプロセス。

つまり、 bin/dev を実行することで、Railsサーバーと同時にJS/CSSのビルドプロセスも起動され、ブラウザ上で最新の変更が反映されるようになる。 rails s のみではJS/CSSの自動ビルドが動作しないため、毎回ビルドコマンドを実行しなくてはいけなくなる。（無理

確認

scaffoldでtaskアプリ作成

TOPのWelcomeメッセージだけではなくちゃんとRailsが動作するか確認する目的でscaffoldでtasksリソースを作成してみる。

Rails経験者ならこの項目は不要だが、後述のJS/CSS確認にも使う。

rails generate でひな壇作成

❯ bundle exec rails g scaffold task title due_date:date
invoke  active_record
create    db/migrate/20240811063914_create_tasks.rb
create    app/models/task.rb
invoke    test_unit
create      test/models/task_test.rb
create      test/fixtures/tasks.yml
invoke  resource_route
  route    resources :tasks
invoke  scaffold_controller
create    app/controllers/tasks_controller.rb
invoke    erb
create      app/views/tasks
create      app/views/tasks/index.html.erb
create      app/views/tasks/edit.html.erb
create      app/views/tasks/show.html.erb
create      app/views/tasks/new.html.erb
create      app/views/tasks/_form.html.erb
create      app/views/tasks/_task.html.erb
invoke    resource_route
invoke    test_unit
create      test/controllers/tasks_controller_test.rb
invoke    helper
create      app/helpers/tasks_helper.rb
invoke      test_unit
  • rails generate scaffold task title due_date:date: Taskモデル、コントローラ、ビューなどの雛形を生成するためのコマンド
    • scaffold: Scaffolding機能を使って、CRUD操作に対応したリソースを生成する。
    • task: 生成するリソース名。
    • title: Taskモデルの属性名。文字列型として定義される。
    • due_date:date: Taskモデルの属性名。日付型として定義される。

マイグレーション

❯ bundle exec rails db:migrate
== 20240811063914 CreateTasks: migrating ======================================
-- create_table(:tasks)
   -> 0.0009s
== 20240811063914 CreateTasks: migrated (0.0009s) =============================

で再度 ./bin/devでサーバー起動

BootstrapのデフォルトのCSSしか当たっていないので表示は結構おかしいが以下のように表示されていれば成功。タスクも追加できるはず。

CSSの変更

CSSは app/assets/stylesheets/application.bootstrap.scss にて記述されている。

試しに application.bootstrap.scss に以下を追記してブラウザリロードすると画面が真っ赤になるはず。

body {
  background-color: red;
}

JavaScriptの変更

JSは app/javascript/application.js にて記述されている。同様に以下を追記してブラウザリロードすると確認できる。

alert(1);

Discussion