Rails 6.1・React・Docker・MySQLで環境構築

#前書き
2021年3月からE2Eテストの自動化を担当し、初めて仕事でコードを書いている。
テスト対象のアプリケーションのapiがRails、フロントがReactで作られているので、
興味本意でプライベートで何か作ってみることにした。
(職場でテストコードをJSで書くので、JSに慣れるという意味合いもある。)

早速、Dockerで環境構築してみたので、備忘として残す。

#環境
・macOS Big Sur 11.2.3
・Ruby 3.0
・Rails 6.1.3.1
・Docker 20.10.5
・docker-compose 1.28.5
・Mysql 8.0

#手順
全体をざっくりと説明すると以下の通り。

1.ファイルを全て準備する
2.docker-compose buildする
3.railsとreactの各種コマンド実行
4.docker-compose upする

#1.ファイルを全て準備する
最終的に、以下のような構造になる。

```
spa-chat
|-- docker-compose.yml
|-- api
    |-- entrypoint.sh
    |-- Gemfile
    |-- Gemfile.lock
    |-- Dockerfile
|-- front
    |-- Dockerfile
```

##Rails関連

###Gemfile
```ruby:Gemfile
source 'https://rubygems.org'
gem 'rails', '~>6'
```
Gemfileには、使いたいRailsのバージョンを記入。
この場合、Rails6系の最新のバージョンを採用。

###Gemfile.lock
```
touch Gemfile.lock
```
空のGemfile.lockを作成。

###entrypoint.sh
```shell: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

```docker:Dockerfile
FROM ruby:3.0
RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \
  && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \
  && apt-get update -qq \
  && apt-get install -y nodejs yarn \
  && mkdir /myapp
WORKDIR /myapp
COPY Gemfile /myapp/Gemfile
COPY Gemfile.lock /myapp/Gemfile.lock
RUN bundle install
COPY . /myapp

COPY entrypoint.sh /usr/bin/
RUN chmod +x /usr/bin/entrypoint.sh
ENTRYPOINT ["entrypoint.sh"]
EXPOSE 3000

CMD ["rails", "server", "-b", "0.0.0.0"]
```
Dockerfileについては、Rails5系とRails6系で書き方が異なるので注意が必要。
Rails6系では、JavascriptコンパイラがWebpackerになったことに起因する。

##React関連

###Dockerfile
```docker:Dockerfile
FROM node:15.13.0-alpine
RUN mkdir /myapp
WORKDIR /myapp
```

##docker-compose.yml
```docker:docker-compose.yml
version: '3'
services:
  db:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: password
    ports:
      - '3306:3306'
    command: --default-authentication-plugin=mysql_native_password
    volumes:
      - mysql-data:/var/lib/mysql
  api:
    build: ./api
    command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - ./api:/myapp
      - gem_data:/usr/local/bundle
    ports:
      - "3000:3000"
    depends_on:
      - db
    stdin_open: true
    tty: true
  front:
    build: ./front
    command: yarn start
    ports:
      - '8000:3000'
    volumes:
      - ./front:/myapp
    depends_on:
      - api

volumes:
  mysql-data:
  gem_data:
    driver: local
```

#2.docker-compose buildする
各種ファイルを揃えたので、イメージをbuild。

```
docker-compose build
```

#3.RailsとReactの各種コマンド実行
コマンドを実行し、必要なファイルを揃えていく。
<h2>React</h2>
ローカルで立ち上げる時と同じような感じで、以下のコマンドを実行。

```
docker-compose run front npx create-react-app front
```
※原因は突き止められなかったが、フロント用のDockerfileを置いたfrontディレクトリに、
さらに別のfrontディレクトリが作成され、その配下に各種フォルダが作成された。
なので、Dockerfileと同じ階層に、先程のコマンドで作成したフォルダを移動する必要がある。
（移動させないと、ブラウザからフロントにアクセスできない。）

アドバイスいただけますと幸いです。

##Rails
まず、以下のコマンドを実行。

```
docker-compose run api rails new . --force --no-deps --database=mysql --skip-test --webpacker --api
```
apiモードでrails new。
RSpecでテストコードを書くので、testディレクトリは作成しない。

次に、config/database.ymlを編集。

```yml:database.yml
default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV.fetch("MYSQL_USERNAME", "root") %>
  password: <%= ENV.fetch("MYSQL_PASSWORD", "password") %>
  host: <%= ENV.fetch("MYSQL_HOST", "db") %>

development:
  <<: *default
  database: myapp_development

test:
  <<: *default
  database: myapp_test

production:
  <<: *default
  database: myapp_production
  username: myapp
  password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
```
そして、データベースを作成。

```
docker-compose run api rake db:create
```

#4.docker-compose upする
準備が整ったので、コンテナを起動。

```
docker-compose up -d
```

localhost:8000で見慣れたReactの画面が表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273146/3ebf0bac-70fd-8a55-a325-06d69b3b57b0.png)

localhost:3000で見慣れたRailsの画面が表示。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1273146/46df7eec-3a05-8475-1ec9-a4956a65781d.png)

#参考にしたサイト
https://qiita.com/nsy_13/items/9fbc929f173984c30b5d
Rails側の設定を書くときにとても参考になりました。

https://nakatanorihito.com/programming/docker-rails-api-react-postgresql/
React側の記述や、ディレクトリ構造を参考にしました。
docker-compose.ymlは上記2サイトをどちらも参考にしています。

https://docs.docker.com/compose/rails/
docker docsに記載がある、Railsの環境構築方法。
Rails5系を使うことを前提に書かれている。