rails環境構築

プロジェクトフォルダ作成

$ mkdir rails_vite_bulletin_board
$ cd rails_vite_bulletin_board

backend/Gemfileを作成

backend/Gemfile

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

backend/Dockerfileを作成

backend/Dockerfile

FROM ruby:3.0

RUN apt-get update -qq && apt-get install -y build-essential libpq-dev

WORKDIR /app

COPY Gemfile /app/Gemfile

RUN bundle install
COPY . /app

docker-compose.ymlを作成

docker-compose.yml

version: '3.9'
services:
  backend:
    build: ./backend
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./backend:/app
    ports:
      - '8000:3000'
  mysql:
    image: mysql:5.7
    ports:
      - '3306:3306'
    volumes:
      - ./db:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: password

RailsをAPIモードでインストール

$ docker-compose run backend rails new . --api --force --database=mysql --skip-bundle

backend/config/database.ymlを編集

backend/config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password: password
  host: mysql

docker image作成

$ docker-compose build

コンテナ起動

$ docker-compose up -d

DB作成

$ docker-compose exec backend bin/rails db:create

http://0.0.0.0:8000で初期画面が出れば成功

コンテナ終了

$ docker-compose down

vite環境構築

frontend/Dockerfileを作成

Dockerfile

FROM node:14.15.3-alpine

RUN apk update && npm install -g npm

WORKDIR /var/www

docker-compose.ymlにfrontendの内容を追記

docker-compose.yml

version: '3.9'
services:
  backend:
    ...
  frontend:
    build: ./frontend
    volumes:
      - ./frontend:/var/www
    ports:
      - 3000:3000
    command: 'npm run dev'
  mysql:
    ...

フロントエンドコンテナに入る

$ docker-compose run frontend ash

viteインストール

/var/www $ npm init vite-app vite

インストール確認が出るのでyで進む

Need to install the following packages:
  create-vite-app
Ok to proceed? (y) y

インストールされたファイルをルートへ移動・viteフォルダ削除

/var/www $ mv vite/.gitignore vite/* /var/www/
/var/www $ rmdir vite

npm install

/var/www $ npm install

フロントエンドコンテナから抜ける

/var/www $ exit

コンテナ起動

$ docker-compose up -d

http://localhost:3000で初期画面が出れば成功

コンテナ終了

$ docker-compose down

Ruby on Rails & Vite環境構築

rails環境構築

vite環境構築

Ruby on Rails とViteのSPA連携