概要
Rails7がリリースされたから環境構築の手順があれば後から楽だなと思ったから、Next.jsをフロントにする前提で構築してみました。
環境
Ruby： 3.1.1
Rails： 7.0.2.3
Postgres： 14.2
Docker： 20.10.13
docker-compose： 2.3.3
手順
1.プロジェクト立ち上げ前にファイルを作成する
以下の構造でファイルを作成する。
.
├── frontend
├── Dockerfile
├── backend
├── Dockerfile
├── Gemfile
├── Gemfile.lock # 空でOK
├── docker-compose.yml
2.docker-compose.ymlを記述する
docker-compose.yml
version: '3.7'
services:
postgres:
image: postgres:11.6-alpine
ports:
- '5432:5432'
environment:
POSTGRES_USER: postgres
POSTGRES_PASSWORD: postgres
POSTGRES_INITDB_ARGS: '--encoding=UTF-8 --locale=ja_JP.UTF-8'
TZ: Asia/Tokyo
volumes:
- postgres_volume:/var/lib/postgresql
hostname: postgres
backend:
tty: true
depends_on:
- postgres
build:
context: ./backend/
dockerfile: Dockerfile
ports:
- 3000:3000
volumes:
- ./backend:/app
command: rails server -b 0.0.0.0
frontend:
build:
context: ./frontend/
dockerfile: Dockerfile
volumes:
- ./frontend/app:/usr/src/app
command: 'yarn dev'
ports:
- "8000:3000"
volumes:
postgres_volume:
driver: local
3.frontend/Dockerfileの中身を記述する
FROM node:14-alpine
WORKDIR /usr/src/app
4.backend/Dockerfileの中身を記述する
FROM ruby:3.1.1
RUN apt-get update -qq \
&& apt-get install -y nodejs postgresql-client npm \
&& rm -rf /var/lib/apt/lists/* \
&& npm install --global yarn
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
# 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
# Configure the main process to run when running the image
CMD ["rails", "server", "-b", "0.0.0.0"]
5.Gemfileの中身を記述する
source 'https://rubygems.org'
gem "rails", "~> 7.0.2", ">= 7.0.2.3"
6.Next.jsアプリケーションを作成する
まずはfrontnedディレクトリに移動する
$ cd frontend
frontnedディレクトリ内にyarn createでアプリを作成します。
$ docker-compose run --rm frontend yarn create next-app .
docker-compose upでコンテナを起動し、
localhost:8000にアクセスして以下の画面が表示されていればOK!!
7.Railsアプリケーションを作成する
まずはbackendディレクトリに移動する
$ cd backend
そしてrails newをする。
$ docker-compose run --rm --no-deps backend bundle exec rails new . --api --force --database=postgresql --css=bootstrap
オプションの詳細は以下の通りです。
| オプション | 内容 |
|---|---|
| --rm | 実行後にコンテナを削除 |
| --no-deps | リンクしたサービスを起動 |
| --api | APIモードで作成 |
| --force | ファイルが存在する場合に上書き |
| --database | データベースの種類を指定 |
| --css | CSSプロセッサを選択 |
次にconfig/database.ymlを修正する。
config/database.yml
default: &default
adapter: postgresql
encoding: unicode
pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
username: postgres
password: postgres
host: postgres
development:
<<: *default
database: postgres_development
test:
<<: *default
database: postgres_test
production:
<<: *default
database: postgres_production
password: <%= ENV["POSTGRES_DATABASE_PASSWORD"] %>
最後にデータベースを作成しましょう。
$ docker-compose run --rm backend rails db:create
docker-compose upでコンテナを起動し、
localhost:3000にアクセスして以下の画面が表示されていればOK!!
トラブルシューティング
Rubyのバージョンエラーが発生した場合
rbenv: version 3.1.1' is not installed (set by /Users/~~/.ruby-version)`のようなエラーが発生した場合は以下のコマンドを順に実行する。
$ brew upgrade ruby-build
$ ruby-build --version
$ rbenv install --list
$ rbenv install 3.1.1
$ rbenv local 3.1.0
#=> 現在のアプリケーションだけでなく、全体の適用バージョンを変更したい場合はglobalを指定する
$ ruby -v
#=> ruby 3.1.1p18 のような表示ならOK
「Gemfileが見つからない」というエラーが発生した場合
Could not locate Gemfile or .bundle/ directoryのようなエラーが発生した場合は以下のコマンドを実行する。
$ cd Gemfileがあるディレクトリ
#=> 現在の位置がGemfileが配置された位置にいないため
その後のGitへの登録手順
1.Githubからリポジトリを作成する。
2.順にコマンドを実行する。
$ echo "# リポジトリ名" >> README.md
$ git init
$ git add README.md
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin git@github.com:自分のユーザー名/リポジトリ名.git
3.公開鍵を取得し設定する。
$ vi ~/.ssh/id_rsa.pub
その後、GitHubのsetting画面から「New SSH」で公開鍵をペーストします。
4.GitへPushする。
$ git push -u origin main
5.バック用ディレクトリとフロント用ディレクトリをGitに反映させる。
$ cd backend/
$ rm -rf .git
$ cd ..
$ cd frontend/
$ rm -rf .git
$ cd ..
$ git add .
$ git commit -m "バック用ディレクトリとフロント用ディレクトリをGitに反映"
$ git push origin main
参考
Ruby on Rails 7 with Bootstrap on Docker Compose 開発環境を簡単に構築する方法