Rails 7.2時代の最小構成セットアップ手順
環境
- Ruby 3.3
- Nodejs 22
はじめに
ついに今月Rails 7.2が正式リリースされた。
主な変更点は以下
- デフォルト設定の改善: セキュリティとパフォーマンス向上のため、プロダクション環境のデフォルト設定がよりセキュアかつ効率的なものに変更された。
- 開発コンテナの導入: 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