個人開発用の環境構築メモ

💡 個人開発用の構築手順の記録兼アウトプット用

---

環境構築💻

• Rails
• React
• Firebase
• Mysql

---

フォルダー構成📁

バックエンド側とフロントエンド側でフォルダーを分割

backend・・バックエンド側(Rails)

frontend・・フロントエンド(React)

---

Rails側（backend）の設定

Railsアプリケーションを作成するため、以下のファイル群に記述を追加

• 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 "$@"
  

• Dockerfile

  FROM ruby:3.1.0
  RUN apt-get update -qq && apt-get install -y build-essential libpq-dev nodejs
  
  WORKDIR /myapp
  COPY Gemfile /myapp/Gemfile
  COPY Gemfile.lock /myapp/Gemfile.lock
  RUN bundle install
  COPY . /myapp
  
  # Add a script to be executed every time the container starts.
  COPY entrypoint.sh /usr/bin/
  RUN chmod +x /usr/bin/entrypoint.sh
  ENTRYPOINT ["entrypoint.sh"]
  EXPOSE 3000
  
  # Start the main process.
  CMD ["rails", "server", "-b", "0.0.0.0"]
  

• Gemfile

  source 'https://rubygems.org'
  gem 'rails', '6.1.5'
  

• docker-compose.yml

  version: '3.7'
  
  services:
    db:
      image: mysql:8.0
      platform: linux/x86_64
      command: --default-authentication-plugin=mysql_native_password
      ports:
        - "4306:3306"
      volumes:
        - db:/var/lib/mysql
      environment:
        MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
      security_opt:
        - seccomp:unconfined
    backend:
      build:
        context: ./backend/
        dockerfile: Dockerfile
      stdin_open: true
      tty: true
      volumes:
        - ./backend:/myapp
        - bundle:/usr/local/bundle
      command: bash -c "rm -rf tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
      depends_on:
        - db
      ports:
        - "3001:3000"
      environment:
        TZ: Asia/Tokyo
  volumes:
    db:
      driver: local
    bundle:
      driver: local
  

RailsのDockerコンテナの中でRailsアプリケーションを作成

docker-compose run --no-deps backend rails new . --force -d mysql --api --skip-test

Rails側のデータベース設定を行う

※デフォルト設定を変更する

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

---

React側（frontend）の設定

• Dockerfile

  FROM node:14.17.1-alpine
  WORKDIR /usr/src/app
  

---

docker-compose.ymlの設定

フロント側の設定を追加する

• docker-comopse.yml

  version: '3.7'
  
  services:
    db:
      image: mysql:8.0
      platform: linux/x86_64
      command: --default-authentication-plugin=mysql_native_password
      ports:
        - "4306:3306"
      volumes:
        - db:/var/lib/mysql
      environment:
        MYSQL_ALLOW_EMPTY_PASSWORD: 'yes'
      security_opt:
        - seccomp:unconfined
    backend:
      build:
        context: ./backend/
        dockerfile: Dockerfile
      stdin_open: true
      tty: true
      volumes:
        - ./backend:/myapp
        - bundle:/usr/local/bundle
      command: bash -c "rm -rf tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
      depends_on:
        - db
      ports:
        - "3001:3000"
      environment:
        TZ: Asia/Tokyo
    frontend:
      build:
        context: ./frontend/
        dockerfile: Dockerfile
      volumes:
        - ./frontend:/usr/src/app
      command: sh -c "cd app && npm start"
      ports:
        - "3000:3000"
  volumes:
    db:
      driver: local
    bundle:
      driver: local
  

Reactプロジェクトの作成

docker-compose run --rm frontend sh -c "npx create-react-app app"

---

参考にした記事

Docker(Docker compose)でRails6.1 + Webpacker + MySQL構成の環境構築をする

【Docker】Rails6 API + React（TypeScript）のSPA開発環境を構築する - Qiita