作って学ぶRails 8入門｜Docker ComposeでMySQL環境を整え、ShlinkのUIを実装する（環境構築編）

技術
2025.09.04

はじめに

Rails を始めたいけれど「環境構築が大変そう…」と感じたことはありませんか？
今回は Docker Compose を使って Rails 8 + MySQL の環境を用意し、Shlink（オープンソースのURL短縮サービス）のUIを作る準備までを一歩ずつ解説します。

この記事を読めば、

  • Docker Compose で Rails と MySQL をまとめて動かす
  • Rails 8 の新規アプリを MySQL 前提で作る
  • importmap / Turbo / Stimulus / Tailwind を後から追加してモダンUI基盤を整える

という流れをコピペで再現できます。

本記事はシリーズの 第1回（環境構築編）。
次回は実際に Shlink API とつないで、長いURLを入力すると短縮URLを返す Bitly風UIを実装していきます。

ソースコード全体はこちら👇
👉 https://github.com/enjoydarts/shlink-ui-rails

事前準備

この記事では Docker Compose を使います。
まず Docker Desktop をインストールしてください。

インストール後、以下で動作確認します：

docker --version
docker compose version

どちらもバージョンが表示されれば準備完了です。

プロジェクトを作成する

作業用ディレクトリを作成します。

mkdir shlink-ui-rails && cd shlink-ui-rails

Dockerfile を作る

FROM ruby:3.4-bullseye

RUN apt-get update && apt-get install -y --no-install-recommends \
    build-essential git curl \
    libmariadb-dev-compat libmariadb-dev \
    libyaml-dev libreadline-dev zlib1g-dev pkg-config \
  && rm -rf /var/lib/apt/lists/*

WORKDIR /app
RUN gem install bundler

EXPOSE 3000
CMD ["bash","-lc","bundle exec rails s -b 0.0.0.0 -p 3000"]

compose.yaml を作る

Rails（web）、MySQL（db）、Tailwind watcher（css）の3サービス構成にします。

services:
  db:
    image: mysql:8.4
    environment:
      MYSQL_ROOT_PASSWORD: rootpass
      MYSQL_DATABASE: shlink_ui_rails_development
      MYSQL_USER: app
      MYSQL_PASSWORD: apppass
    volumes:
      - dbdata:/var/lib/mysql
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "127.0.0.1", "-prootpass"]
      interval: 5s
      timeout: 3s
      retries: 30

  web:
    build: .
    depends_on:
      db:
        condition: service_healthy
    environment:
      RAILS_ENV: development
    ports:
      - "3000:3000"
    volumes:
      - ./:/app
      - bundle:/usr/local/bundle
    tty: true
    stdin_open: true

  css:
    build: .
    command: bin/rails tailwindcss:watch
    volumes:
      - ./:/app
      - bundle:/usr/local/bundle
    tty: true

volumes:
  dbdata:
  bundle:

👉 こうすると docker compose up だけで Rails と Tailwind watcher が同時に動きます。

Rails を新規作成する

まずビルドします。

docker compose build

Rails をインストール：

docker compose run --rm --no-deps web gem install rails

新規アプリ作成（MySQL前提、最初はJSを抜く）：

docker compose run --rm web rails new . \
  --database=mysql --skip-system-test --skip-javascript
chmod +x bin/*
docker compose run --rm web bundle install

DB設定を整える

config/database.yml を編集：

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS", 5) %>
  host: <%= ENV.fetch("DATABASE_HOST", "db") %>
  username: <%= ENV.fetch("DATABASE_USER", "app") %>
  password: <%= ENV.fetch("DATABASE_PASSWORD", "apppass") %>
  port: 3306

development:
  <<: *default
  database: <%= ENV.fetch("DATABASE_NAME", "shlink_ui_rails_development") %>

DBを作成：

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

JS/CSS を後から追加する

Rails 8 は最初に JS を抜いて作っても、後から簡単に追加できます。ここでは 4 つの要素を導入します。

importmap-rails

Rails が公式で採用している仕組みで、Node や npm なしで JavaScript を管理できます。
ES Modules と組み合わせて、Rails らしい「設定より規約」でライブラリを読み込めます。

docker compose run --rm --no-deps web bundle add importmap-rails
docker compose run --rm --no-deps web rails importmap:install

Turbo (turbo-rails)

Hotwire の中核。ページ全体をリロードせずに 差分だけを更新できる仕組みです。
フォーム送信や部分的なリロードを、シングルページアプリに近い操作感で実現します。

docker compose run --rm --no-deps web bundle add turbo-rails
docker compose run --rm --no-deps web rails turbo:install

Stimulus (stimulus-rails)

Hotwire のもう一つの柱。小さなUIの動きをHTMLに直結して書けるJSフレームワークです。
例えば「ボタンを押したらコピー」「ロード中はスピナーを回す」といった振る舞いを、HTML属性ベースで簡単に記述できます。

docker compose run --rm --no-deps web bundle add stimulus-rails
docker compose run --rm --no-deps web rails stimulus:install

Tailwind CSS

いまや標準になりつつある ユーティリティファーストCSSフレームワーク。
.bg-gray-50 .p-4 .rounded-lg のようにクラスを組み合わせるだけでデザインを作れます。
tailwindcss-rails gem を使えば Node 環境を用意しなくても導入可能です。

docker compose run --rm --no-deps web bundle add tailwindcss-rails tailwindcss-ruby
docker compose run --rm --no-deps web rails tailwindcss:install

レイアウトを確認する

app/views/layouts/application.html.erb はこうなっていればOKです。

<!DOCTYPE html>
<html>
  <head>
    <title>shlink-ui-rails</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
  </head>
  <body class="bg-gray-50 text-gray-900">
    <%= yield %>
  </body>
</html>

起動する

docker compose up

ブラウザで http://localhost:3000 を開き、Railsの画面が出れば準備完了。
ログに tailwindcss ... watching for changes と出ていればCSSも自動ビルドされています。

まとめ

ここまでで、

  • Docker Desktop をインストールし、Docker Compose が使える環境を整えた
  • Dockerfile / compose.yaml を用意して Rails + MySQL を動かした
  • rails new --database=mysql で新規アプリを作成し、DB接続を確認した
  • importmap / Turbo / Stimulus / Tailwind を追加してモダンUIの基盤を整えた

という流れを一通り体験できました。

次回はこの環境をベースに Shlink API と連携して URL 短縮UIを実装する実践編に進みます。
Bitly風のフォームを Rails で作ってみましょう！

👉 完成版コードはこちら
https://github.com/enjoydarts/shlink-ui-rails

コメント

タイトルとURLをコピーしました