Rails 7+Docker+MySQL+Tailwind+DaisyUIで環境構築手順

## はじめに

本記事では、Dockerを使用してRails 7の開発環境を構築する手順を解説します。

現在RUNTEQで学習中であり、実際にDockerを使って初めてのアプリ制作での備忘録として記事を作成することにしました。
わかりにくい点などあるかと思いますが、ご了承くださいませ。
※責任は負いかねます。

### なぜDockerを使うのか？
1. **環境の統一**
   - チームメンバー全員が同じ環境で開発可能
   - 「自分の環境では動くのに...」という問題を防げる

2. **環境構築の簡略化**
   - 複雑なセットアップを自動化
   - 新しいメンバーの参加時もスムーズ

3. **本番環境との一貫性**
   - 開発環境と本番環境の差異を最小限に
   - デプロイ時のトラブルを減らせる

### 使用する技術とバージョン
```
Ruby: 3.3.6
Rails: 7.0
MySQL: 8.0
Node.js: 20
Tailwind CSS
DaisyUI
```

## 1. プロジェクトの初期設定

### 必要なファイルの作成
```bash
mkdir アプリ名
cd アプリ名
touch Dockerfile.dev
touch .dockerignore
touch compose.yml
```

各ファイルの役割：

1. **Dockerfile.dev**
   - 開発環境用のDockerイメージを定義
   - アプリケーションの実行に必要なパッケージやツールをインストール
   - `.dev`をつけることで本番環境用と区別

2. **.dockerignore**
   - Dockerイメージに含めない不要なファイルを指定
   - イメージサイズの削減とビルド時間の短縮に貢献
   - Gitの`.gitignore`と同じような役割

3. **compose.yml**
   - 複数のDockerコンテナの設定を定義
   - WebアプリとデータベースのCRUDを連携
   - 開発環境全体の構成を管理

## 2. 各設定ファイルの詳細

### .dockerignoreの設定
```
.git
.gitignore
.env
log/*
tmp/*
node_modules
```

これらのファイルを除外する理由：
- `.git`、`.gitignore`: バージョン管理用のファイルは不要
- `.env`: 機密情報を含むため除外
- `log/*`, `tmp/*`: 一時ファイルは環境ごとに生成
- `node_modules`: NPMパッケージはコンテナ内で改めてインストール

### Dockerfile.devの作成
```dockerfile
# ベースイメージの指定
FROM ruby:3.3.6

# 環境変数の設定
ENV LANG C.UTF-8
ENV TZ Asia/Tokyo

# 必要なパッケージのインストール
RUN apt-get update -qq && \
    apt-get install -y build-essential \
                       libssl-dev \
                       nodejs \
                       yarn \
                       vim \
                       git

# アプリケーションディレクトリの設定
RUN mkdir /アプリ名
WORKDIR /アプリ名
RUN gem install bundler
COPY . /アプリ名
```

各設定の説明：
- `FROM`: Rubyの公式イメージを基にする
- `ENV`: 文字コードとタイムゾーンを設定
- `RUN`: 必要なパッケージをインストール
- `WORKDIR`: 作業ディレクトリの設定
- `COPY`: ソースコードをコンテナにコピー

## 3. Dockerコンテナの設定

### compose.ymlの詳細な解説
```yaml
services:
  db:
    image: mysql:8.0
    environment:
      TZ: Asia/Tokyo
      MYSQL_ROOT_PASSWORD: password
      MYSQL_DATABASE: アプリ名_development
    volumes:
      - mysql_data:/var/lib/mysql
      - ./db/mysql-confd:/etc/mysql/conf.d
    ports:
      - "3307:3306"
    healthcheck:
      test: mysqladmin ping -h 127.0.0.1 -uroot -ppassword
      interval: 10s
      timeout: 10s
      retries: 3
      start_period: 30s
```

**dbサービスの各設定の意味：**
- `image`: MySQL version 8.0を使用
- `environment`: 環境変数の設定
  - `MYSQL_ROOT_PASSWORD`: データベースのrootパスワード
  - `MYSQL_DATABASE`: 開発用DBの名前
- `volumes`: データの永続化
  - `mysql_data`: DBデータの保存
  - `mysql-confd`: MySQL設定ファイルの配置
- `ports`: ポートフォワーディング（ローカルの3307をコンテナの3306に接続）
- `healthcheck`: コンテナの健康状態をチェック

```yaml
  web:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: bash -c "bundle install && bundle exec rails db:prepare && rm -f tmp/pids/server.pid && ./bin/dev"
    volumes:
      - .:/アプリ名:cached
      - bundle_data:/usr/local/bundle:cached
      - node_modules:/アプリ名/node_modules:cached
      - tmp-data:/アプリ名/tmp
      - log-data:/アプリ名/log
    environment:
      TZ: Asia/Tokyo
      RAILS_ENV: development
      MYSQL_USERNAME: root
      MYSQL_PASSWORD: password
      MYSQL_HOST: db
    ports:
      - "3000:3000"
    depends_on:
      db:
        condition: service_healthy
```

**webサービスの各設定の意味：**
- `build`: Dockerイメージのビルド設定
- `command`: コンテナ起動時のコマンド
  - Bundlerでgemをインストール
  - データベースの準備
  - サーバープロセスIDファイルの削除
  - Railsサーバーの起動
- `volumes`: ファイルの永続化と同期
  - アプリケーションコード
  - gemのキャッシュ
  - Node.jsパッケージ
  - 一時ファイルとログ
- `environment`: 環境変数の設定
- `depends_on`: DBコンテナへの依存関係

## 4. Railsアプリケーションの作成

```bash
# イメージのビルド
docker compose build

# Railsのインストールと新規プロジェクト作成
docker compose run --rm web gem install rails -v '~> 7.0'
docker compose run --rm web rails new . -d mysql -j esbuild --css=tailwind --skip-test
```

**各コマンドの説明：**
- `docker compose build`: Dockerイメージを構築
- `gem install rails`: 指定バージョンのRailsをインストール
- `rails new`: 新規Railsプロジェクトを作成
  - `-d mysql`: MySQLを使用
  - `-j esbuild`: JavaScriptバンドラーとしてesbuildを使用
  - `--css=tailwind`: TailwindCSSを使用
  - `--skip-test`: 初期のテストファイルを生成しない


## 5. データベースの設定

### config/database.ymlの設定
```yaml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch("MYSQL_USERNAME", "root") %>
  password: <%= ENV.fetch("MYSQL_PASSWORD", "password") %>
  host: <%= ENV.fetch("MYSQL_HOST", "db") %>

development:
  <<: *default
  database: アプリ名_development

test:
  <<: *default
  database: アプリ名_test
```

**各設定の説明：**
- `adapter`: MySQL用のアダプター指定
- `encoding`: 文字エンコーディング（emoji対応）
- `pool`: 同時接続数
- `host: db`: Docker compose内のサービス名を指定

## 6. フロントエンド環境の設定

### DaisyUIのセットアップ
```bash
# DaisyUIのインストール
docker compose exec web yarn add daisyui@latest

# PostCSSの設定ファイル作成
touch postcss.config.js
```

### postcss.config.jsの設定
```javascript
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
```

### tailwind.config.jsの設定
```javascript
module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/helpers/**/*.rb',
    './app/assets/stylesheets/**/*.css',
    './app/javascript/**/*.js',
    './app/components/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark", "cupcake"],
  },
}
```

**設定の説明：**
- `content`: Tailwindが解析対象とするファイル
- `themes`: 利用可能なDaisyUIテーマ

## 7. 開発環境の起動と動作確認

```bash
# アプリケーションの起動
docker compose up -d

# データベースの作成
docker compose exec web rails db:create
```

### 動作確認用のスキャフォールド作成
```bash
docker compose exec web bin/rails g scaffold tasks name:string --skip-jbuilder --skip-helper --skip-test-framework
docker compose exec web bin/rails db:migrate
```

ここまでの設定でエラーがなければURLを押すと
http://localhost:3000/tasks

下記内容が表示されるはずです！！
↓ライトモードの場合
[![Image from Gyazo](https://i.gyazo.com/6b2f9b4198100faf44a312f9d50d52f4.png)](https://gyazo.com/6b2f9b4198100faf44a312f9d50d52f4)

↓ダークモードの場合
[![Image from Gyazo](https://i.gyazo.com/517da04851c63a2385c98242516f1b1f.png)](https://gyazo.com/517da04851c63a2385c98242516f1b1f)

## 8. CI/CDの設定(ついでに)

### .github/workflows/ci.ymlの作成
GitHub Actionsを使用して継続的インテグレーションを設定します。

```yaml
name: CI

on:
  pull_request:
  push:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest

    services:
      mysql:
        image: mysql:8.0
        env:
          MYSQL_ROOT_PASSWORD: password
          MYSQL_DATABASE: アプリ名_test
```

## 9. セキュリティ設定(ついでに)

### .gitignoreの設定
```
/config/master.key
.env
/log/*
/tmp/*
/node_modules
/public/assets
```

### 開発環境の設定
```ruby
# config/environments/development.rb
config.hosts.clear # 開発環境でのホスト制限を解除
```

## まとめ

以上の手順で、以下の機能を持つ開発環境が構築できました：
- Docker化されたRails 7環境
- MySQL データベース
- Tailwind CSS + DaisyUI
- GitHub Actions によるCI
- セキュリティ設定

### 次のステップ
**本番環境への準備**
**デプロイ**
など

### 参考資料
- [Docker公式ドキュメント](https://docs.docker.com/)
- [Rails公式ガイド](https://guides.rubyonrails.org/)
- [TailwindCSS公式ドキュメント](https://tailwindcss.com/)

これでRails開発環境の構築は完了です。
最後までご覧いただきありがとうございました！

参考資料

Docker公式ドキュメント
Rails公式ガイド
TailwindCSS公式ドキュメント
https://hackmd.io/@SKjw2RY-RNCUNSdJfEWPig/HJE0GUClC?utm_source=preview-mode&utm_medium=rec