このアプリの構成

ビルドツール	Vite
データベース	PostgreSQL
CSSフレームワーク	Tailwind CSS
UIライブラリ	daisyUI
仮想環境	Docker
Node.jsのパッケージマネージャー	pnpm

プロジェクトの準備

Dockerのインストール

Dockerの公式サイトからDocker Desktopをダウンロードしてインストールします。

プロジェクトディレクトリの作成

mkdir ~/rails-project
cd ~/rails-project

Dockerfileの作成

RailsのイメージをビルドするためにDockerfileを作ります。

FROM ruby:3.2.2 RUN apt-get update RUN curl -sL http s://deb.nodesource.com/setup_18.x | bash - RUN apt-get install -y nodejs npm RUN npm install -g pnpm ENV PROJECT_DIR /root/rails-project RUN mkdir $PROJECT_DIR WORKDIR $PROJECT_DIR COPY Gemfile $PROJECT_DIR/Gemfile COPY Gemfile.lock $PROJECT_DIR/Gemfile.lock ENV BUNDLER_VERSION 2.4.19 RUN gem update --system RUN gem install bundler -v $BUNDLER_VERSION RUN bundle RUN bundle update --source bundler --local COPY . $PROJECT_DIR

EXPOSE 3000

compose.yamlの作成

PostgreSQLとRailsのコンテナを構築するためにcompose.yamlを作ります。

services: web: image: rails:latest build: . volumes: - .:/root/rails-project command: bash -c "rm -f tmp/pids/server.pid && rails s -b 0.0.0.0" environment: POSTGRES_DEFAULT_USER: postgres POSTGRES_DEFAULT_PASSWORD: password ports: - "3000:3000" depends_on: - db db: image: postgres:latest volumes: - postgres-volume:/var/lib/postgresql/data environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: password

volumes: postgres-volume:

GemfileとGemfile.lockの作成

Gemfileを作り、以下の内容を記述します。

source "https://rubygems.org"

gem "rails"

空のGemfile.lockも作っておきます。

Railsのイメージの作成

docker compose build

プロジェクトの作成

docker compose run web rails new . --minimal --skip-asset-pipeline -d postgresql --force

--minimal: Railsの追加機能であるAction Cable, Action Mailbox, Action Textをセットアップしない
--skip-asset-pipeline: アセットパイプラインをセットアップしない
-d: データベースを指定する
--force: ファイルを上書きする

Gemfile.lockが更新されたので、改めてRailsのイメージをビルドします。

docker compose build

データベースと通信できるようにする

config/database.yml のdefaultセクションにhost, username, passwordを追加します。

default: &default
  adapter: postgresql
  host: db
  username: <%= ENV["POSTGRES_DEFAULT_USER"] %>
  password: <%= ENV["POSTGRES_DEFAULT_PASSWORD"] %>
  encoding: unicode
  # For details on connection pooling, see Rails configuration guide
  # https://guides.rubyonrails.org/configuring.html#database-pooling
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>

...

データベースを作成してマイグレーションをします。

docker compose run web rails db:create db:migrate

デフォルトのページを表示してみましょう。以下のコマンドを実行して、http://localhost:3000にアクセスします。

docker compose up

Makefileの作成

Docker Composeのコマンドは長いので、エイリアスを設定するためにMakefileを作ります。

# イメージをビルドする .PHONY: build build: docker compose build イメージをビルドしてコンテナをフォアグラウンドで実行する .PHONY: up up: docker compose up --build --remove-orphans || true コンテナを停止する .PHONY: stop stop: docker compose stop コンテナを停止して削除する .PHONY: down down: docker compose down --remove-orphans バックグラウンドでコンテナを実行し、webコンテナに入る .PHONY: exec-web exec-web: docker compose up --build --remove-orphans -d docker compose exec web bash バックグラウンドでコンテナを実行し、dbコンテナに入る .PHONY: exec-db exec-db: docker compose up --build --remove-orphans -d docker compose exec db bash rails db:createを実行する .PHONY: create create: docker compose run web rails db:create rails db:migrateを実行する .PHONY: migrate migrate: docker compose run web rails db:migrate rails db:seedを実行する .PHONY: seed seed: docker compose run web rails db:seed rails db:purgeを実行する .PHONY: purge purge: docker compose run web rails db:purge rails db:dropを実行する

.PHONY: drop drop: docker compose run web rails db:drop

GNU Makeのインストール

Makefileを扱うにはGNU Makeが必要です。UbuntuとMacOSにおけるインストールコマンドを示します。

Ubuntu

sudo apt install -y build-essential

MacOS

brew install make
echo 'export PATH="$(brew --prefix)/opt/make/libexec/gnubin:$PATH"' >> ~/.zshrc
source ~/.zshrc

Viteのインストール

package.jsonを作ります。

{
  "devDependencies": {
  }
}

空のpnpm-lock.yamlも作っておきます。

.pnpm-storeを.gitignoreに追加します。

# See https://help.github.com/articles/ignoring-files for more about ignoring files. # # If you find yourself ignoring temporary files generated by your text editor # or operating system, you probably want to add a global ignore instead: # git config --global core.excludesfile '~/.gitignore_global' Ignore bundler config. /.bundle Ignore all logfiles and tempfiles. /log/* /tmp/* !/log/.keep !/tmp/.keep Ignore pidfiles, but keep the directory. /tmp/pids/* !/tmp/pids/ !/tmp/pids/.keep /public/assets Ignore master key for decrypting credentials and more. /config/master.key Vite Ruby /public/vite* node_modules Vite uses dotenv and suggests to ignore local-only env files. See https://vitejs.dev/guide/env-and-mode.html#env-files *.local

.pnpm-store

以下のコマンドでViteをインストールします。

make exec-web bundle add vite_rails bundle exec vite install

exit

bin/devを作り、以下の内容を記述します。

#!/usr/bin/env sh if ! gem list foreman -i --silent; then echo "Installing foreman..." gem install foreman fi

exec foreman start -f Procfile.dev "$@"

bin/devに実行権限を付与します。

sudo chmod u+x bin/dev

Procfile.devを変更して、ホストOSからコンテナの3000番ポートにアクセスできるようにします。

vite: bin/vite dev
web: bin/rails s -p 3000 -b 0.0.0.0

config/vite.jsonのdevelopmentセクションにhostセクションを追加して、ホストOSからコンテナの3036番ポートにアクセスできるようにします。

{
  "all": {
    "sourceCodeDir": "app/frontend",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "host": "0.0.0.0",
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

DockerfileにEXPOSEセクションを追加して、ホストOSからコンテナの3036番ポートにアクセスできるようにします。

FROM ruby:3.2.2 RUN apt-get update RUN curl -sL http s://deb.nodesource.com/setup_18.x | bash - RUN apt-get install -y nodejs npm RUN npm install -g pnpm ENV PROJECT_DIR /root/rails-project RUN mkdir $PROJECT_DIR WORKDIR $PROJECT_DIR COPY Gemfile $PROJECT_DIR/Gemfile COPY Gemfile.lock $PROJECT_DIR/Gemfile.lock ENV BUNDLER_VERSION 2.4.19 RUN gem update --system RUN gem install bundler -v $BUNDLER_VERSION RUN bundle RUN bundle update --source bundler --local COPY . $PROJECT_DIR

EXPOSE 3000 EXPOSE 3036

compose.yamlを変更して、webコンテナの起動時にbin/devを実行するようにします。また、ホストOSの3036番ポートからwebコンテナの3036番ポートにアクセスするようにします。

services: web: image: rails:latest build: . volumes: - .:/root/rails-project command: bash -c "rm -f tmp/pids/server.pid && bin/dev" environment: POSTGRES_DEFAULT_USER: postgres POSTGRES_DEFAULT_PASSWORD: password ports: - "3000:3000" - "3036:3036" depends_on: - db db: image: postgres:latest volumes: - postgres-volume:/var/lib/postgresql/data environment: POSTGRES_USER: postgres POSTGRES_PASSWORD: password

volumes: postgres-volume:

homeコントローラーの作成

indexアクションを持つhomeコントローラーを作ります。

make exec-web rails g controller home index

exit

config/routes.rbを変更して、rootにアクセスした際にhome#indexのビューが表示されるようにします。

Rails.application.routes.draw do root "home#index" # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html Defines the root path route ("/") root "articles#index"

end

app/assets/stylesheetsを削除し、app/frontend/entrypoints/application.cssを作ります。

app/views/layouts/application.html.erbのstylesheet_link_tagをvite_stylesheet_tagに置き換えます。

<!DOCTYPE html>
<html>
  <head>
    <title>RailsProject</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

&lt;%= vite_stylesheet_tag &#39;application&#39; %&gt;
&lt;%= vite_client_tag %&gt;
&lt;%= vite_javascript_tag &#39;application&#39; %&gt;
&lt;!--
  If using a TypeScript entrypoint file:
    vite_typescript_tag &#39;application&#39;

  If using a .jsx or .tsx entrypoint, add the extension:
    vite_javascript_tag &#39;application.jsx&#39;

  Visit the guide for more information: https://vite-ruby.netlify.app/guide/rails
--&gt;

  </head>
  <body>
    <%= yield %>
  </body>
</html>

make upを実行してから、http://localhost:3000にアクセスすると、コンソールにVite ⚡️ Railsと表示されます。

config/routes.rbとerbファイルに対してHMRを有効にする

HMR用のプラグインをインストールします。

make exec-web pnpm add -D vite-plugin-full-reload

exit

vite.config.tsにvite-plugin-full-reloadを追加します。

import { defineConfig } from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import FullReload from 'vite-plugin-full-reload'

export default defineConfig({
  plugins: [
    RubyPlugin(),
    FullReload(['config/routes.rb', 'app/views/**/*'], { delay: 100 }),
  ],
})

make upを実行してからapp/views/home/index.html.erbを変更してみましょう。HMRが動作していることを確認できます。

Tailwindのインストール

make exec-web pnpm add -D tailwindcss postcss autoprefixer pnpm tailwindcss init -p

exit

tailwind.config.jsを変更して、Tailwindがコンパイルされるようにします。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/frontend/**/*.{js,ts,jsx,tsx,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

app/frontend/entrypoints/application.cssにTailwindを追加します。

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

app/views/home/index.html.erbにTailwindのクラスを追加して動作を確認します。

<h1 class="text-3xl font-bold underline">Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

daisyUIのインストール

make exec-web pnpm add -D daisyui

exit

daisyUIをtailwind.config.jsに追加します。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/views/**/*.html.erb',
    './app/frontend/**/*.{js,ts,jsx,tsx,vue,svelte}',
  ],
  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
}

app/views/home/index.html.erbにdaisyUIのクラスを追加して動作を確認します。

<h1 class="text-3xl font-bold underline text-accent">Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

Pythonで選択ソートを実装する

シンボリックリンクはショートカットじゃない

Pythonでバブルソートを実装する

マークダウンで職務経歴書を作る

PWA (Progressive Web Apps) が流行らない理由

どうしてPHPは未だにCGIとして使われるのか

HugoにTailwind CSS 3をインストール

Cloudflare TunnelとRaspberry Piでお手軽自宅サーバ構築

C++における静的領域、スタック領域、ヒープ領域の使い分け

RailsとViteを使ったdaisyUIのインストール