【構築手順】Docker+rails+Vite react環境構築

2024年4月4日2024年10月4日

当ページのリンクには広告が含まれています。

Narazu

毎回環境構築調べているな。

毎回調べて時間を費やすので私自身のメモ程度にとらえてください。

Docker+rails+Vite reactの環境構築

このメモを実行すれば上記の環境が構築できます。

PCとその他環境

Apple M1 2020

# 今回使用するバージョン
ruby3.2.3
rails7.0.5
node:21.7.1
mysql: 8.0

railsとvite reactの初期ディレクトリ構成

以下の構成を作るためのコマンド

$ tree
.
 ├── api
 │   ├── Dockerfile
 │   ├── Gemfile
 │   ├── Gemfile.lock
 │   └── entrypoint.sh
 ├── front
 │    ├── Dockerfile
 ├── .env
 └── docker-compose.yml

プロジェクトを作成したいディレクトリ配下で実行します。

cd project_file
mkdir -p api front
touch api/Dockerfile api/Gemfile api/Gemfile.lock api/entrypoint.sh
touch front/Dockerfile
touch docker-compose.yml
touch .env

git管理したい場合はapi、frontディレクトリ内それぞれで以下を実行します。

cd api
git init

//一度プロジェクトディレクトリに戻る
cd ..
cd front
git init

docker-compose.ymlの構築

version: '3'
services:

  # Rails バックエンド
  api:
    build: ./api
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    ports:
      - 3000:3000
    volumes:
      - ./api:/myapp
      - gem_data:/usr/local/bundle
    depends_on:
      - db
    environment:
      RAILS_ENV: development
      DATABASE_URL: ${DATABASE_URL}
    stdin_open: true
    tty: true
    env_file:
      - .env

  # Vite React フロントエンド
  front:
    build: ./front
    command: npm run dev
    ports:
      - 5173:5173
    volumes:
      - ./front:/myapp
    depends_on:
      - api

  # MySQL データベース
  db:
    image: mysql:8.0
    ports:
      - 4306:3306
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
    env_file:
      - .env

volumes:
  mysql-data:
  gem_data:
    driver: local

.envファイルの記述

DATABASE_URL=mysql2://root:pass@db:3306/project_development
MYSQL_ROOT_PASSWORD=pass
MYSQL_DATABASE=project_development

api側(rails)の環境構築

aip側-Dockerfileの構築

# ベースイメージを指定
FROM ruby:3.2.2

# 必要なパッケージのインストール
RUN apt-get update && apt-get install -y \
    nodejs \
    yarn \
    && rm -rf /var/lib/apt/lists/*

# 作業ディレクトリの設定
WORKDIR /myapp

# GemfileとGemfile.lockをコピーして依存関係をインストール
COPY Gemfile Gemfile.lock /myapp/
RUN bundle install

# アプリケーションのファイルをコピー
COPY . /myapp

# entrypoint.shのコピーと実行権限の付与
COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh

# エントリーポイントの設定
ENTRYPOINT ["entrypoint.sh"]

# ポートのエクスポート
EXPOSE 3000

# Railsサーバーの起動コマンド
CMD ["rails", "server", "-b", "0.0.0.0"]

Gemfileの構築

今回は

ruby3.2.3
rails7.0.5

を使います。

 source 'https://rubygems.org'
 ruby "3.2.2"
 gem "rails", "~> 7.0.5", ">= 7.0.5.1"

entrypoint.shの構築

#!/bin/bash
set -e

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

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

このスクリプトは、Dockerコンテナの起動時にRailsアプリケーションを実行するために使用されます。

また、不要なserver.pidファイルを削除してアプリケーションの正常な起動を保証してくれます。

Gemfile.lockの構築

特に何も書かなくてOKです。

front側(React vite)の環境構築

front側-Dockerfileの構築

以下のようにfront用のDocerfileを書きます。

FROM node:21.7.1

# 作業ディレクトリの設定
RUN mkdir /myapp
WORKDIR /myapp

CMD ["npm","run","dev"]

Dockerイメージの構築

以下のコマンドを実行してDockerのイメージを構築します。

docker-compose build

railsプロジェクトをapiモードで作成

docker-compose run api rails new . --force --no-deps --database=mysql --skip-test --webpacker --api

上記コマンドを実行するとrailsのプロジェクトが作成されます。

Gemfileが更新されてますので、再度イメージを再構築します。

docker-compose build

rails内にある主にコメントしてある部分のdatabase.ymlを修正します。

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

development:
  <<: *default
  database: project_development

test:
  <<: *default
  database: project_development_test

production:
  <<: *default
  database: project_production
  username: root
  password: <%= ENV['MYSQL_ROOT_PASSWORD'] %>

修正したら以下コマンドを実行してdatabaseを作成します。

docker-compose run api rake db:create

作成に成功したら以下にアクセスして確認してみます。

http://localhost:3000/

以下のような画面が出ればOKです。

Vite reactのプロジェクトを作成

以下のコマンドを実行すればVite reactのプロジェクトを作成することができます。

docker-compose run front npm create vite@latest

以下のように質問に答えていきます。

yを入力してエンターを押します。

create-vite@5.2.3
Ok to proceed? (y)> y

プロジェクトネームを聞かれるので任意のプロジェクト名にします。

今回は「front」としました。

Project name: ›front

今回はReactを使いたいので矢印キーでReactを選択してエンターを押します。

VueならVueを選択してください。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React

今回は「TypeScript + SWC」を使う予定なので矢印キーで選択してエンターを押します。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC

以下が全体の流れになります。

create-vite@5.2.3
Ok to proceed? (y)> y
--------------------------------------
 Project name: ›front
--------------------------------------
? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others
--------------------------------------
? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC
    Remix ↗
--------------------------------------
~ 一部省略 ~
--------------------------------------
Done. Now run:

  cd front
  npm install
  npm run dev

front配下にさらにfrontのプロジェクトが立ち上がってたら一旦成功です。

frontのディレクトリは2つもいらないので、1つは移動して削除ください。

大体以下のようなファイル構成になっていればOKです。

必要なパッケージのインストール

以下の手順に沿ってパッケージをインストールします。

まだコンテナ内で実行するのでまだ以下は実行しなくていいです。

Done. Now run:

  cd front
  npm install
  npm run dev

一度Docker内のfrontコンテナに入ります。

docker-compose run front bash

一度frontコンテナ内でlsコマンドで確かめてみます。

root@xxxxxxxxxx:/myapp# ls
Dockerfile  README.md  index.html  package.json  public  src  tsconfig.json  tsconfig.node.json  vite.config.ts

front内にいることが確認できたので以下のコマンドを実行します。

npm install

少し時間がかかります。

終わったらそのまま以下のコマンドも実行します。

npm run dev

ローカルホストにアクセスできたらOKです。

http://localhost:5173/

Vite Reactが稼働しない場合

Dockerでdocker-compose upをしてもReactの初期画面が表示されない時の対処法。

以下のファイルを修正します。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
  
  # 以下追加
  server: {
    host: true
  },

  plugins: [react()],
})

再度buildし直したらアクセスできるようになると思います。

どこかでエラーが起きたり、起動できない場合はコメント下さい。

初心者の方にオススメ