Rails7.0.4 Ruby3.1 Mysql8.0 docker-compose で環境構築する。ついでにTailwindCSS と DaisyUI も入れちゃう。

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

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

https://docs.docker.com/samples/rails/

https://qiita.com/croquette0212/items/7b99d9339fd773ddf20b

# プロジェクトの作成

```sh
mkdir test-app
cd test-app
```

# 設定ファイルの作成

```Dockerfile: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 のインストールは不要です。


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

```sh
touch Gemfile.lock
```

```sh: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 "$@"
```

```yaml: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 する
```sh
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にするオプション


```sh
docker-compose build　--no-cache
```

# DB設定

```yaml: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 で動作確認
![スクリーンショット 2022-09-20 18.57.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/5558731d-4b22-7eb9-df04-f4e91f4eb52a.png)


# Tailwind の導入
config 配下に `tailwind.config.js` があるか確認
なかったら↓のコマンドでインストール
```
docker-compose run --rm web bin/rails tailwindcss:install
```
ビルドし直す
```sh
docker-compose build　--no-cache
```
## TailwindCSSのUIフレームワークを導入
TailwindCSSのUIフレームワークを導入
~~~
# daisyuiをインストールする
$ yarn add daisyui
OR
$ npm i daisyui
~~~
https://daisyui.com/

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'),    // ← 追加
  ],
}
~~~
https://daisyui.com/docs/themes/

↑からテーマを選ぶ

~~~ruby: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` が有効化されている
![スクリーンショット 2022-06-17 8.25.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/f7332b1b-0b6c-2450-7f68-cb11160ece5a.png)

下記を追加してみる
```ruby:views/posts/index.html.erb
<button class="btn btn-primary">Button</button>
```
`daisyUI` が適用されていれば以下のようになる
![スクリーンショット 2022-09-21 6.27.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/916052/3939f655-e2e1-738b-41fb-7daa19195f73.png)

もしデザインが適用されないようなら、以下を追記
```ruby:views/layouts/application.html.erb
<%= stylesheet_link_tag "https://cdn.jsdelivr.net/npm/daisyui@2.14.1/dist/full.css" %>
```
https://stackoverflow.com/questions/71946463/rails-7-using-daisyui-with-importmap-rails

```
dokcker-compose build --no-cache
```
それでもダメなら↑をしてコンテナを立て直すこともやってみる