Open
Ruby on Rails & Vite環境構築
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
ログインするとコメントできます