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


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

---

## 環境構築💻

- Rails
- React
- Firebase
- Mysql

---

### フォルダー構成📁

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

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

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

---

### ****Rails側（backend）の設定****

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

- entrypoint.sh
    
    ```ruby
    #!/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
    
    ```docker
    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
    
    ```ruby
    source 'https://rubygems.org'
    gem 'rails', '6.1.5'
    ```
    
- docker-compose.yml
    
    ```docker
    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アプリケーションを作成

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

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

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

```ruby
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
    
    ```docker
    FROM node:14.17.1-alpine
    WORKDIR /usr/src/app
    ```
    

---

### ****docker-compose.ymlの設定****

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

- docker-comopse.yml
    
    ```yaml
    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プロジェクトの作成

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

---

### 参考にした記事

[Docker(Docker compose)でRails6.1 +  Webpacker + MySQL構成の環境構築をする](https://zenn.dev/ryouzi/articles/de6000058a65fc)

[【Docker】Rails6 API + React（TypeScript）のSPA開発環境を構築する - Qiita](https://qiita.com/taki_21/items/613f6a00bc432d1c221d)