Closed7

Rails7, esbuild, dockerのセットアップ

Kawakami TakahiroKawakami Takahiro

任意のオプションでrails newしてbundle install
セットアップはこの2つを使う

gem "jsbundling-rails"
gem "cssbundling-rails"
Kawakami TakahiroKawakami Takahiro

実行
bundle exec rails javascript:install:esbuild

出力

docker@a1ba158fc6e3:/usr/src/app$ bundle exec rails javascript:install:esbuild
Compile into app/assets/builds
      create  app/assets/builds
      create  app/assets/builds/.keep
      append  app/assets/config/manifest.js
      append  .gitignore
      append  .gitignore
Add JavaScript include tag in application layout
      insert  app/views/layouts/application.html.erb
Create default entrypoint in app/javascript/application.js
      create  app/javascript
      create  app/javascript/application.js
Add default package.json
      create  package.json
Add default Procfile.dev
      create  Procfile.dev
Ensure foreman is installed
         run  gem install foreman from "."
Fetching foreman-0.87.2.gem
Successfully installed foreman-0.87.2
1 gem installed
Add bin/dev to start foreman
      create  bin/dev
Install esbuild
         run  yarn add esbuild from "."
yarn add v1.22.19
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
└─ esbuild@0.15.7
info All dependencies
├─ esbuild-linux-64@0.15.7
└─ esbuild@0.15.7
Done in 12.58s.
Add build script
Add "scripts": { "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets" } to your package.json

出力されたとおり
package.jsonにbuildを追加した

"scripts": {
  "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets"
}
Kawakami TakahiroKawakami Takahiro

実行
bundle exec rails css:install:sass

出力

docker@a1ba158fc6e3:/usr/src/app$ bundle exec rails css:install:sass
Build into app/assets/builds
       exist  app/assets/builds
   identical  app/assets/builds/.keep
File unchanged! The supplied flag value not found!  app/assets/config/manifest.js
Stop linking stylesheets automatically
        gsub  app/assets/config/manifest.js
File unchanged! The supplied flag value not found!  .gitignore
File unchanged! The supplied flag value not found!  .gitignore
Remove app/assets/stylesheets/application.css so build output can take over
      remove  app/assets/stylesheets/application.css
Add stylesheet link tag in application layout
File unchanged! The supplied flag value not found!  app/views/layouts/application.html.erb
      append  Procfile.dev
Add bin/dev to start foreman
   identical  bin/dev
Install Sass
      create  app/assets/stylesheets/application.sass.scss
         run  yarn add sass from "."
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 17 new dependencies.
info Direct dependencies
└─ sass@1.54.9
info All dependencies
├─ anymatch@3.1.2
├─ binary-extensions@2.2.0
├─ braces@3.0.2
├─ chokidar@3.5.3
├─ fill-range@7.0.1
├─ glob-parent@5.1.2
├─ immutable@4.1.0
├─ is-binary-path@2.1.0
├─ is-extglob@2.1.1
├─ is-glob@4.0.3
├─ is-number@7.0.0
├─ normalize-path@3.0.0
├─ picomatch@2.3.1
├─ readdirp@3.6.0
├─ sass@1.54.9
├─ source-map-js@1.0.2
└─ to-regex-range@5.0.1
Done in 2.82s.
Add build:css script
Add "scripts": { "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules" } to your package.json

出力されたとおり
package.jsonにbuildを追加した

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
Kawakami TakahiroKawakami Takahiro

docker-compose.ymlでrails用コンテナの起動コマンドを下記のように設定

command: ['/bin/sh', '-c', 'rm -f tmp/pids/server.pid && bin/dev']

bin/dev -> foreman -> Prockfile.devを実行という感じのようだ

#!/usr/bin/env bash

if ! foreman version &> /dev/null
then
  echo "Installing foreman..."
  gem install foreman
fi

foreman start -f Procfile.dev "$@"

web: bundle exec rails s -p 3000 -b '0.0.0.0'
js: yarn build --watch
css: yarn build:css --watch
Kawakami TakahiroKawakami Takahiro

layoutはこうなってる

    <%= stylesheet_link_tag "application" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>

起動してjsかscssのファイルをいじればバンドルされる

Kawakami TakahiroKawakami Takahiro

scss -> sassにした

"build:css": "sass ./app/assets/stylesheets/application.sass:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
Kawakami TakahiroKawakami Takahiro

esbuildは型チェックせずにバンドルするのでtscコマンドで型チェックするようにした

  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets --target=es2022 --minify",
    "build:css": "sass ./app/assets/stylesheets/application.sass:./app/assets/builds/application.css --no-source-map --load-path=node_modules",
    "tsc": "tsc --project tsconfig.json"
  }
web: bundle exec rails s -p 3000 -b '0.0.0.0'
js: yarn build --watch
css: yarn build:css --watch
tsc: yarn tsc --watch
このスクラップは2023/10/19にクローズされました