はじめに

勉強用にちいさなアプリを作成することがありますが、環境構築がめんどくさくて止めちゃうことありますよね？
環境構築で詰まらないように記録しておきます。

Rails の環境構築の記事はたくさんありますが、できるだけ最新のバージョンでやってみました。
Rails 7.0.4
Ruby 3.1
Mysql 8.0

参考

プロジェクトの作成

mkdir test-app
cd test-app

設定ファイルの作成

Dockerfile

FROM ruby:3.1

RUN mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

# Add a script to be executed every time the container starts.
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

# Start the main process.
CMD ["rails", "server", "-b", "0.0.0.0"]

Rails7 では yarn や node.js のインストールは不要です。

Gemfile

source 'https://rubygems.org'
gem 'rails', '~>7.0.4'

touch Gemfile.lock

entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /myapp/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

docker-compose.yml

version: '3'
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: root
    ports:
      - "3306:3306"
    volumes:
      - ./tmp/db:/var/lib/mysql

  web:
    build: .
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/myapp
    ports:
      - "3000:3000"
    depends_on:
      - db

rails new する

docker-compose run web rails new . --force --no-deps --database=mysql　 --css=tailwind --skip-jbuilder --skip-action-mailbox --skip-action-mailer --skip-test

rails new のオプションは以下となっています。（後からでも変更して導入できます）

--css=tailwind CSSフレームワークにTailwindを利用
--skip-jbuilder jbuilderを導入しないオプション
--skip-action-mailbox action-mailboxを導入しないオプション
--skip-action-mailer action-mailerを導入しないオプション
--skip-test testを導入しないオプション
--database=mysql DB設定をMySQLにするオプション

docker-compose build　--no-cache

DB設定

database.yml

development:
  <<: *default
  database: myapp_development
  host: db
  username: root
  password: password

# Warning: The database defined as "test" will be erased and
# re-generated from your development database when you run "rake".
# Do not set this db to the same as development or production.
test:
  <<: *default
  database: myapp_test
  host: db
  username: root
  password: password

developmentとtestを編集します。

DB作成

docker-compose run --rm web rails db:create

イメージの起動

docker-compose up -d

http://localhost:3000 で動作確認

Tailwind の導入

config 配下に tailwind.config.js があるか確認
なかったら↓のコマンドでインストール

docker-compose run --rm web bin/rails tailwindcss:install

ビルドし直す

docker-compose build　--no-cache

TailwindCSSのUIフレームワークを導入

TailwindCSSのUIフレームワークを導入

# daisyuiをインストールする
$ yarn add daisyui
OR
$ npm i daisyui

daisyUIを使用するよう設定

config/tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  :
  :
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('daisyui'),    // ← 追加
  ],
}

↑からテーマを選ぶ

app/views/layouts/application.html.erb

<html data-theme="pastel" >  # data-theme="pastel" でテーマを選ぶ
  <head>
    :
  </head>

  <body>
    :   
  </body>
</html>

投稿機能を作成して確認

$ rails g scaffold Post title:text            
$ rails db:migrate

http://localhost:3000/posts/
にアクセス
↓tailwind が有効化されている

下記を追加してみる

views/posts/index.html.erb

<button class="btn btn-primary">Button</button>

daisyUI が適用されていれば以下のようになる

もしデザインが適用されないようなら、以下を追記

views/layouts/application.html.erb

<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/daisyui@2.14.1/dist/full.css" %>

dokcker-compose build --no-cache

それでもダメなら↑をしてコンテナを立て直すこともやってみる