LoginSignup
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@yuushiba

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

Posted at

はじめに

本記事では、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. プロジェクトの初期設定

必要なファイルの作成

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の作成

# ベースイメージの指定
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の詳細な解説

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: コンテナの健康状態をチェック
  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アプリケーションの作成

# イメージのビルド
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の設定

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のセットアップ

# DaisyUIのインストール
docker compose exec web yarn add daisyui@latest

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

postcss.config.jsの設定

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

tailwind.config.jsの設定

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. 開発環境の起動と動作確認

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

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

動作確認用のスキャフォールド作成

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

↓ダークモードの場合
Image from Gyazo

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

.github/workflows/ci.ymlの作成

GitHub Actionsを使用して継続的インテグレーションを設定します。

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

開発環境の設定

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

まとめ

以上の手順で、以下の機能を持つ開発環境が構築できました：

  • Docker化されたRails 7環境
  • MySQL データベース
  • Tailwind CSS + DaisyUI
  • GitHub Actions によるCI
  • セキュリティ設定

次のステップ

本番環境への準備
デプロイ
など

参考資料

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

参考資料

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?