はじめに
Rails7 x Tailwind CSSでアプリを作成しようとした際、bin/devコマンドを忘れてCSSデザインが適用されず、原因究明に時間がかかってしまったため記事にすることにしました。
bin/devって何
Rails7ではrails sコマンドの代わりにbin/devコマンドを打つことで、JavaScriptやCSSがビルドされるようになっています。
ビルドとは
JSやCSSはいろんなファイルに分散して書いてある。これらを本番環境に持っていく際、下記の作業を行うことを「ビルド」という
- minify：インデントやコメントを取り除く
- transpile：新しい規格を古い規格に変換（新しい規格に対応していないブラウザがあるため）
- bundle：色んなファイルや外部ソースに散っているコードを集めて一つのファイルにまとめる
bin/devの中身を見てみると、
#!/usr/bin/env sh
if gem list --no-installed --exact --silent foreman; then
echo "Installing foreman..."
gem install foreman
fi
# Default to port 3000 if not specified
export PORT="${PORT:-3000}"
exec foreman start -f Procfile.dev --env /dev/null "$@"
「gem foremanが入ってなければインストールして、そのforemanでProcfile.devを実行する」というような内容です。
foremanって何
Using foreman you can declare the various processes that are needed to run your application using a
Procfile.
Procfileというファイルに設定を書き込むと、複数のプロセスをまとめて立ち上げてくれるようなツールらしい。
Procfileって何
アプリケーション直下に、Procfile.devというファイルがあります。development環境用のProcfileというところでしょうか。
web: bin/rails server -p 3000
js: yarn build --watch
css: yarn build:css --watch
書き方は下記の通り、プロセス名: コマンドという形式になっています。
A Procfile should contain both a name for the process and the command used to run it.
web: bundle exec thin start job: bundle exec rake jobs:work
Procfileの中で、rails sやJS、CSSのビルドが行われているのがわかります。
ちなみにここのbuildやbuild:cssはpackage.jsonで定義されています。
"scripts": {
"build": "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets",
"build:css": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --minify"
},
まとめ
bin/devコマンドを実行すると、Procfile.dev内で定義されたrails sとJS、CSSのビルドをforemanが実行していることがわかりました。