最初に
SPAアプリケーションを作るために、環境構築をしました。今回の記事は環境構築の備忘録です。
バージョン
- Ruby:3.2.1
- Ruby on Rails:7.0.4
- MySQL:8.0.32
- React:v18
- docker-compose:v3.8
アプリケーションの基盤を作成
RailsとReact用のディレクトリを作成します。Railsにはbackendディレクトリ、Reactにはfrontendディレクトリを作成します。
mkdir practiceApp
cd practiceApp
mkdir backend
mkdir frontend
touch docker-compose.yml
touch backend/Gemfile
touch backend/Gemfile.lock
touch backend/entrypoint.sh
touch backend/Dockerfile
touch frontend/Dockerfile
Rails用の設定を作成
以下のファイルに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.2.1
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"
ruby "3.2.1"
# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
gem "rails", "~> 7.0.4"
- docker-compose.yml
version: '3.8'
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
上記のファイルを作成したら、以下のコマンドを実行して下さい。
docker-compose run --no-deps backend rails new . --force -d mysql --api --skip-test
dbという名前でデータベース環境を作成している為、以下のファイルのdefaultにhost: dbを追加
- database.yml
default: &default
adapter: mysql2
encoding: utf8mb4
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: root
password:
host: db // この箇所を修正
React用の設定を作成
- practiceApp/frontend/Dockerfile
FROM node:14.17.1-alpine
WORKDIR /usr/src/app
- docker-compose.yml
元々あるdocker-compose.ymlのservices:にfrontend:を追加
version: '3.8'
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: // この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
以下のコマンドでDockerのイメージを実行して、Reactのテンプレートを作成
docker-compose run --rm frontend sh -c "npx create-react-app app"
動作確認
以下のコマンドで今回作成したDockerを起動させましょう。
docker-compose up
Dockerを起動させた後、まだRailsのデータベースが作成されていないので、以下のコマンドでデータベースを作成して下さい。
docker-compose exec backend rails db:create
ブラウザでhttp://localhost:3000/及びhttp://localhost:3001/にアクセスしてみて下さい。
それぞれReactの画面とRailsの画面が表示されたら、環境構築の出来上がりです。
Git管理
このままでは、RailasとReactでGit管理されてしまう為、以下のコマンドを実行して下さい。
rm -rf backend/.git
rm -rf frontend/.git
git init
最後に
環境構築って結構骨が折れますよねw 今回は他の方の記事を参考に現時点でのRailsやReactなどでの最新の環境を作るようにしてみました。
自分は環境構築あまり好きじゃないですが、とにかく苦手意識を持たずにならしていこうかと思います。
この後は環境構築せっかくしたので、色々触ってみようと思います。
ここまで読んで下さりありがとうございました〜