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

当ページのリンクには広告が含まれています。
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し直したらアクセスできるようになると思います。

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

初心者の方にオススメ
  • プログラミングに興味のある方
  • アプリケーション開発をやってみたい方
  • 昔プログラミングに挫折した方
  • プログラミング学校が高いと思っている方
スキルハックスより 引用

脱初心者のためには独学だと限界があります。

「買い切り」でコンパクトで質の高い動画を100本以上揃え、受講期間なし自由に学ぶことのできるオススメのオンラインスクールです!

  • 10~20分の動画講義が100本以上
  • 回数無制限の質問対応
  • 買い切りで受講期間制限なし

\ 脱初心者 /

補足:Dockerコマンド

イメージの作成と再構築

  • docker-compose.ymlの更新を反映させる: $ docker-compose up -d
  • Dockerfileの更新を反映させる: $ docker-compose up -d --build
  • キャッシュを無視して再構築する場合: $ docker-compose build --no-cache

コンテナの作成と起動

  • コンテナの作成と起動: $ docker-compose up
  • バックグラウンドで起動する場合: $ docker-compose up -d
  • コンテナの停止: $ docker-compose down

イメージとコンテナの管理

  • イメージの一覧表示: $ docker images
  • イメージの削除: $ docker rmi [イメージID]
  • noneイメージの削除: $ docker image prune
  • コンテナの一覧表示: $ docker ps -a
  • コンテナの削除: $ docker rm [コンテナID]
  • コンテナの強制削除: $ docker rm -f [コンテナID]
  • コンテナを一括削除: $ docker rm `docker ps -a -q`
  • 停止しているコンテナの削除: $ docker container prune
  • コンテナ内のシェルに接続: $ docker exec -it [コンテナ名] bash

ログの表示

  • コンテナのログを表示する: $ docker-compose logs [サービス名]
  • ログをリアルタイムで表示する: $ docker-compose logs -f [サービス名]

ネットワークの表示

  • Dockerネットワークの表示: $ docker network ls
  • 特定のネットワークの詳細を表示: $ docker network inspect [ネットワーク名]

ボリュームの管理

  • ボリュームの一覧表示: $ docker volume ls
  • ボリュームの詳細を表示: $ docker volume inspect [ボリューム名]

イメージの操作

  • イメージをダウンロード: $ docker pull [イメージ名]
  • イメージの検索: $ docker search [検索キーワード]

その他

  • Dockerのバージョンを確認する: $ docker --version
  • Dockerコンテナ内でコマンドを実行する: $ docker-compose exec [サービス名] [コマンド]

まとめ:Docker+rails+Vite react環境構築

プログラミング初心者は独学での学習は挫折しやすい傾向にあります。

私も何回も挫折しました。

この不安定な時代、スキルを身につけるためにも思い切ってプログラミングスクールで学ぶのもいいと思います。

この記事をきっかけにプログラミングにハマり、Webプログラマとして転職して年収を上げてくれると嬉しく思います。

最後まで読んでくださいありがとうございました。


スキルハックス公式ページ

Aidemy PREMIUM公式ページ


Pythonで自動売買を作ってみたい方はこちらの記事を参考にどうぞ

APIを取得した後は以下の記事を参考に実際に動かしてみましょう!!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次