rails7 に vita を導入

rails7 にvitaを入れた時のメモです

構成は下記の通りで実施しています

docker-compose.yml
app(ディレクトリ)
 ├ Dockerfile
 ├ Gemfile
 ├ Gemfile.lock
 └ entrypoint.sh

ファイル作成

touch docker-compose.yml
mkdir app/
touch app/Dockerfile
touch app/Gemfile
touch app/Gemfile.lock
touch app/entrypoint.sh

docker-compose.yml

version: '3.8'

services:
  app:
    container_name: app
    build:
      context: ./app
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    # command: bash -c "rm -f tmp/pids/server.pid && bundle install && ./bin/dev"
    ports:
      - 3000:3000
      - 3036:3036
    depends_on:
      - mysql
    tty: true
    volumes:
      - ./app:/app
    environment:
      RAILS_ENV: development


  mysql:
    container_name: mysql
    image: public.ecr.aws/docker/library/mysql:5.7
    environment:
      MYSQL_ROOT_PASSWORD: password
      TZ: "Asia/Tokyo"
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci

Dockerfile

FROM public.ecr.aws/docker/library/ruby:3.1.2-slim 

RUN apt-get update -y -qq && \
    apt-get install -y build-essential libpq-dev nodejs git curl default-libmysqlclient-dev && \
    rm -rf /usr/local/bundle/cache/* /usr/local/share/.cache/* /var/cache/* /tmp/*


RUN curl -sL https://deb.nodesource.com/setup_18.x | bash - &&\
    apt-get install -y nodejs  && \
    curl -sS 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 && apt-get install -y yarn

ARG USER_NAME=user
ENV TZ=Asia/Tokyo
ENV APP_NAME /app

WORKDIR ${APP_NAME}
COPY . ${APP_NAME}/
COPY ./Gemfile* ${APP_NAME}/

RUN gem update --system && \
    bundle update --bundler && \
    bundle install

RUN adduser ${USER_NAME} && \
    chown -R ${USER_NAME} /${APP_NAME} && \
    chown -R ${USER_NAME} ${GEM_HOME}
USER ${USER_NAME}

entrypoint.sh

#!/bin/bash
set -e

# Remove a potentially pre-existing server.pid for Rails.
rm -f /usr/src/app/tmp/pids/server.pid

# Then exec the container's main process (what's set as CMD in the Dockerfile).
exec "$@"

Gemfile

source 'https://rubygems.org'
gem 'rails', '~>7.0.1'

rails new

cssはtailwindを選択していますが、その辺はお好みで

docker compose run --rm app rails new .  \
--force  \
--database=mysql  \
--skip-test \
--asset-pipeline=propshaft \
--javascript=esbuild \
--css=tailwind

esbuildを削除

database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root        # ←この行を修正
  password: password    # ←この行を修正
  host: mysql           # ←この行を修正

vite_railsを追加

Gemfile

gem "vite_rails" # これを追加

コマンド実行

bundle install
bundle exec vite upgrade
bundle exec vite install
bundle exec rails db:drop db:create db:migrate db:seed

app/config/vite.json

{
  "all": {
    "sourceCodeDir": "app/javascript",
    "watchAdditionalPaths": []
  },
  "development": {
    "autoBuild": true,
    "publicOutputDir": "vite-dev",
    "host":"0.0.0.0",      # ←この行を追加
    "port": 3036
  },
  "test": {
    "autoBuild": true,
    "publicOutputDir": "vite-test",
    "port": 3037
  }
}

コンテナ内で実行

touch app/javascript/entrypoints/application.css
echo '@import "../../assets/stylesheets/application.tailwind.css";' >> app/javascript/entrypoints/application.css
rails g controller home index

app/views/layouts/application.html.erb

    <%#= stylesheet_link_tag "application", "data-turbo-track": "reload" %>  # コメントアウト
    <%#= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>  # コメントアウト
    <%= vite_client_tag %>
    <%= vite_javascript_tag 'application' %>
    <%= vite_stylesheet_tag 'application' %>  # 追加

app/config/routes.rb

Rails.application.routes.draw do
  get 'home/index'
  root 'home#index'  # この行を追加
end

app/Procfile.dev

web: bin/rails server -p 3000 -b 0.0.0.0 # 変更
js: yarn build --watch　　　　　　 　　　# 削除
css: yarn build:css --watch              # 削除
vite: bin/vite dev

docker-compose.yml

services:
  app:
    container_name: app
    build:
      context: ./app
    # command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"  # コメントアウト
    command: bash -c "rm -f tmp/pids/server.pid && bundle install && ./bin/dev"　# コメントを外す
    ports:

---

hot reloadを追加

コンテナ内で実行

yarn add vite-plugin-full-reload

app/vite.config.ts

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: 300 }),  # ←この行を追加
  ],
})