前書き
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
source 'https://rubygems.org'
gem 'rails', '~>6'
Gemfileには、使いたいRailsのバージョンを記入。
この場合、Rails6系の最新のバージョンを採用。
Gemfile.lock
touch Gemfile.lock
空のGemfile.lockを作成。
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.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
FROM node:15.13.0-alpine
RUN mkdir /myapp
WORKDIR /myapp
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の各種コマンド実行
コマンドを実行し、必要なファイルを揃えていく。
React
ローカルで立ち上げる時と同じような感じで、以下のコマンドを実行。
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を編集。
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の画面が表示。
localhost:3000で見慣れたRailsの画面が表示。
参考にしたサイト
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系を使うことを前提に書かれている。