Rails+ReactのDocker環境(TechpitさんのUberEats風SPAアプリ)

概要

Railsチュートリアルを完走し終えまして、
次何しようかなと考えていたところに「完走者向け発展教材（Techpit）」を見つけたので、教材に挑戦しています。

「RailsとReactでUberEats風SPAアプリケーションをつくってみよう！」
https://www.techpit.jp/courses/138

ただ、PC上に展開したくなくてDocker上で動作するようにしました。

ソースコード

Dockerfile

FROM ruby:2.7.2
RUN apt-get update -qq && apt-get install -y build-essential nodejs postgresql-client libpq-dev

RUN apt-get update && apt-get install -y curl apt-transport-https wget && \
    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 && apt-get install -y yarn

RUN curl -sL https://deb.nodesource.com/setup_14.x | bash
RUN apt-get install -y nodejs

RUN mkdir /uber-eats-like
WORKDIR /uber-eats-like
COPY Gemfile /uber-eats-like/Gemfile
COPY Gemfile.lock /uber-eats-like/Gemfile.lock
RUN bundle install
COPY . /uber-eats-like

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

CMD ["rails", "server", "-b", "0.0.0.0"]

教材ではnode v12 だったのですが、frontend側作成時にv14以上でないと作成できなかったため、バージョン上げています。
RUN curl -sL https://deb.nodesource.com/setup_14.x | bash

docker-compose.xml

version: '3'
services:
  db:
    image: postgres
    volumes:
      - ./tmp/db:/var/lib/postgresql/data
    environment:
      - POSTGRES_PASSWORD=password
  web:
    build: .
    # command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'"
    volumes:
      - .:/uber-eats-like
    ports:
      - "3000:3000"
      - "3001:3001"
    depends_on:
      - db

command入らないかもと思ったのでコメントしていますが、動かなかったらコメント外してください。

ポートは3000がAPI(rails)、3001がフロント(react)です。

frontend起動コマンド

4章でfrontend側の開発環境構築するので、以下コマンドで起動します。

$ docker exec -it uber-eats-like_web_1 sh
$ cd frontend
$ PORT=3001 npm start

おわりに

この教材着手してから数カ月放置していたからそろそろ終わらせるぞー