Docker×Rails×tailwindCSS×DaisyUI環境構築(開発環境編)

:::note info
未経験エンジニアの為効率的な記述でないもしくは間違っている場合があります。
気になった箇所はコメント頂けると幸いです。
使用OSはwindowsです。使用OSに関わるエラーはお答えできない場合があります。
:::

### 前提 Docker Ruby 3.2.2 Rails:7.1.3.2はlocalにinstall済です。

### Docker×Rails環境構築
アプリのディレクトリを作成し、ディレクトリに移動
```
mkdir testRails
cd testRails
```
ディレクトリ内でRailsアプリを作成、アプリ内に移動

:::note info
-d postgresql:PostgreSQL使用の方は追加
-j esbuild:tailwindCSSとDaisyUIの環境構築する為に必要です。
tailwindCSSのオプションを追加するとDaisyUIの構築に失敗するので注意
:::

```
rails new my_app -d postgresql -j esbuild
cd my_app
```
アプリ内で.env、entrypoint.sh、docker-compose.yml、Gemfile、Gemfile.lockを作成し以下のコードを記述。Dockerfileは上書き。

:::note info
ユーザーネームを入れると権限エラーで./bin/dev時にforemanがinstallできなかったため、root推奨です。ここを解決できた方居ましたらコメントお待ちしてます。
:::

```.env
USERNAME=root
```

```entrypoint.sh
#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /app/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: postgres:15.5 # バージョンを15.5にしています
    environment:
      POSTGRES_DB: app_development
      POSTGRES_USER: root
      POSTGRES_PASSWORD: password
    volumes:
      - postgres_data:/var/lib/postgresql/data
    ports:
      - "5432:5432"
  web:
    build:
      context: .
      dockerfile: Dockerfile
      args:
        USERNAME: ${USERNAME} # パーミッションエラー対策にユーザー名の環境変数を設定
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    container_name: my_app_web
    volumes:
      - .:/app
    environment:
      - RAILS_ENV=development
    ports:
      - "3000:3000"
    depends_on:
      - db
volumes:
  postgres_data:
```
Dockerfile

:::note info
Install yarnの箇所はtailwindCSSとDaisyUIを構築する際に必要です。
:::

```Dockerfile
FROM ruby:3.2.2
RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs postgresql-client

# Install yarn
RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - \
  && wget --quiet -O - /tmp/pubkey.gpg https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && apt-get update -qq \
  && apt-get install -y nodejs yarn

WORKDIR /app

COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock

RUN gem install bundler
RUN bundle install

COPY . /app

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]

# ビルド時の引数を定義
ARG USERNAME
# 環境変数を設定
ENV USERNAME ${USERNAME}

# 環境変数を使用
RUN if [ "$USERNAME" != "root" ]; then useradd $USERNAME --create-home --shell /bin/bash; fi && \
    chown -R $USERNAME:$USERNAME db log storage tmp
USER $USERNAME

EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]
```

database.ymlを編集
```
# PostgreSQL. Versions 9.3 and up are supported.

default: &default
  adapter: postgresql
  encoding: unicode
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  host: db
  username: root
  password: password

development:
  <<: *default
  database: my_app_development

test:
  <<: *default
  database: my_app_test

production:
  <<: *default
  database: my_app_production
  username: my_app
  password: <%= ENV["MY_APP_DATABASE_PASSWORD"] %>
```

アプリ内でdockerイメージを構築
```
docker compose build
```
アプリ内でdockerコンテナを構築・起動
```
docker compose up 
```
dockerコンテナに入り、dbを構築
```
docker compose exec web bash
bin/rails db:create
```
ここでDocker×Rails構築が完了します
![スクリーンショット 2024-04-21 150957.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529717/e3985b71-3e9c-914d-55cd-c68dfbec6e7a.png)
### tailwindCSSの環境構築
コンテナ内のまま実行していきます。
permission対策の為インストール先と参照先を変更してgemをインストール
```
bundle install --path vendor/bundle
```
環境構築検証を兼ねたトップ画面を作成
```
rails g controller Tops index
```

```app/views/tops/index.html.erb
<h1 class="text-3xl font-bold underline">
    Hello world!
</h1>

<button class="bg-gray-900 hover:bg-gray-800 text-white rounded px-4 py-2">tailwind</button>

<button class="btn">daisyUI</button>
```

ルーティング調整
```routes.rb
Rails.application.routes.draw do
  root 'tops#index'
end
```
![スクリーンショット 2024-04-21 152514.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529717/f03ccf02-49f9-7aca-129a-a8c70e5380e8.png)

Gemfile
```
#tailwindCSSインストール用
gem 'cssbundling-rails'
gem 'jsbundling-rails'
```
コンテナ内で実行
```
bundle install
rails css:install:tailwind
```
![スクリーンショット 2024-04-21 152638.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529717/aa1107f6-1413-e599-62a8-02d0f97aa3c8.png)
### DaisyUIの環境構築
コンテナ内で実行
```
yarn add daisyui
```
tailwind.config.jsにプラグインを追加
```tailwind.config.js
module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js'
  ],
  plugins: [
    require('daisyui')
  ]
}
}
```
コンテナ内でサーバーを立ち上げる(なぜbin/devを使うかは参考記事をご覧ください)
```
./bin/dev
```
お疲れさまでした！本番環境はRender.comにデプロイ予定です。成功したら本番環境編も執筆予定です。
![スクリーンショット 2024-04-21 152930.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3529717/aa9893f3-217b-13a1-33bd-a55694829e91.png)

参考記事
同じスクール生のnotion
[Dockerでrails7 + tailwind + daisyuiの環境構築をする](https://qiita.com/ICU1234/items/4c7c3e974ae290e68792#:~:text=%E3%81%AA%E3%81%84%E3%81%A7%E3%81%99%E3%81%AD%E3%80%82-,tailwind%E3%81%A8daisyui%E3%81%AE%E5%B0%8E%E5%85%A5,-%E3%81%9D%E3%82%8C%E3%81%A7%E3%81%AF%E3%80%81%E5%B0%8E%E5%85%A5%E3%81%97)
[【Rails7】TailwindCSS + daisyUIを導入する](https://zenn.dev/yoiyoicho/articles/410a7e3fd892b5)
[bin/devってなんだ](https://qiita.com/eichann/items/38968db7c7aa13c1f978)