RailsのAPIモードで開発の準備！

はじめに

学習中の自身の備忘録として残しておきたいと思い記事にしました。
また同じく学習中の方の手助けにもなればと思います。

この記事の対象読者はRailsをである程度簡単なものは作れる様になってきて、フロントの部分にReactなどのライブラリや言語でフロントとバックエンドを完全に分けて開発をしたい方に向けたRailsをAPIモードでバックエンド側のセットアップ準備の記事になります。
データベースとしてはMySQLを使用します。

実施環境

M1 mac
Ruby on Rails7.0.3
Ruby 3.1.2
MySQL 5.7

Ruby on Railsの起動準備

まずは、フロントとバックエンドを分けるディレクトリを作成します。
今回のディレクトリ構成としては簡単にこのようなイメージになります。

todo
├── frontend
└── backend

なのでまずはtodoというディレクトリをターミナルで下記コマンド実施し作成します。

ターミナル

mkdir todo

作成できたら下記コマンドでtodoディレクトリに移動します。

ターミナル

cd todo

これでとりあえず準備オッケーです！

Railsの新規作成

ではRailsの雛形を作成します。
todoディレクトリにいることを確認し下記コマンド実施ください。

ターミナル

rails new backend -d mysql --api

上記コマンドでデータベースをMySQLに指定しRailsをAPIモードで作成します。
APIモードについては下記サイトご覧ください。
Railsガイドhttps://railsguides.jp/api_app.html
これでbackendというディレクトリでRailss作成できました！
frontend作成する際は例えばReactであればtodoディレクトリに戻り下記コマンド実行ください。
これで最初にお見せしたディレクトリ構成でfront部分とback部分の作成完了です。

ターミナル

npx create-react-app frontend

Railsのデータベース接続

ではエディタを開いていただきコードを少し記述していきます。
まず今回はMySQLを使用しているのでデータベースの接続設定からしていきます。
下記コマンドをGemfileに記述してください。このGemで環境変数を使うことができるので、
Gitなどに上げても自身のMySQLのパスワードなどが見られることがない様にできます。

Gemfile

gem 'dotenv-rails'

記述できましたら下記コマンドでGemをインストールしましょう。

ターミナル

bundle insall

問題なく進めましたら、backendディレクトリの直下に.envファイルを作成します。
このファイルは自身で作成しなければならないのでtouchコマンドで作成するかエディタから直接作成してください。
このファイルに自身のパスワードやユーザー名を記述していきます。

.env

DATABASE_DEFAULT_USER = 'ユーザー名'
DATABASE_DEFAULT_PASSWORD = 'パスワード'
DATABASE_DEV_NAME = '開発用のデータベース名'
DATABASE_TEST_NAME = 'テスト用のデータベース名'

ここのユーザー名とパスワードと書かれているところをご自身のMySQLで使用できるユーザー名とパスワードを入力してください。
開発用のデータベース名とテスト用のデータベース名これから作成する物に合わせてご自身で記述して使用してください。
記述できましたら、先に.envファイルをGitにあげないようにしておきましょう。
.gitignoreファイルに下記記述しておきましょう。これでGitにパスワード記述したファイルがアップされなくなります。

.gitignore

/.env

次にconfig配下にあるdatabase.ymlにMySQLとの接続設定をしていきます。
下記の様に記述することで先ほど.envファイルでユーザー名などを入れた変数を接続方法のパスワードとして渡しています。

config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: <%= ENV['DATABASE_DEFAULT_USER'] %>
  password: <%= ENV['DATABASE_DEFAULT_PASSWORD'] %>
  socket: /tmp/mysql.sock

development:
  <<: *default
  database: <%= ENV['DATABASE_DEV_NAME'] %>

test:
  <<: *default
  database: <%= ENV['DATABASE_TEST_NAME'] %>

これで接続の準備は完了です！！

データベースの作成

ここでは接続準備できたのでデータベースの作成をします。
まずMySQLを立ち上げておきましょう。

ターミナル

mysql.server start

backendディレクトリにいることを確認しターミナルで下記コマンド実行してください。

ターミナル

rails db:create

これでデータベースが作成されます。
MySQLにログインしても確認できるかと思います。
下記コマンドでログインしてください。-pでパスワードの入力も止められますので打ち込みエンターを押してください。
※打ち込んだパスワード表示されませんが入力されているので進めてください！

ターミナル

mysql -u root -p

ログインできましたら下記コマンド実施で先ほど作成した開発用のデータベース名とテスト用のデータベース名があるかと思います！

ターミナル

show databases;

ここまでできましたら下記コマンドでデータベース内にテーブルを作成しましょう！

ターミナル

rails g model テーブル名 カラム名:カラム型 カラム名:カラム型

先ほどのコマンド実行するとdbディレクトリにmigrateというディレクトリ作成されその中にファイルが出来上がっていると思います。そのファイルがmigrateファイルになります。先ほどのコマンド実行でmigrateファイル作成されるので以降テーブル追加して行く時は先ほどのコマンドでmigrateファイルを作成しましょう！
作成したら下記コマンドでmigrateファイルをデータベースに反映させます！

ターミナル

rails db:migrate

このコマンド実施でデータベースにテーブルが追加されます！
また下記コマンドでデータベースに接続し確認してみましょう

ターミナル

mysql -u root -p

ログインできたらuseデータベース名で使用するデータベースを選択し、下記コマンドでテーブルがあるか確認しましょう。

ターミナル

show tables;

先ほど作成したテーブルがあれば中身が正しいかみてみましょう。下記コマンドでカラムを見れます！

ターミナル

desc テーブル名;

問題なければデータベースの作成がこれで完了です！！！！

Railsの立ち上げとAPIのルート設定

ここまで来ればRails立ち上がるので、下記コマンド実施しブラウザでlocalhost:3000で検索してみましょう！
Railsの初期画面立ち上がれば完成です！
※mysqlのサーバー立ち上がっていないとエラー出ますのでお気をつけください。

ターミナル

rails s

確認できましたら最後にAPIのルートを記述しておきましょう！
configディレクトリのroutesファイルに下記記述をしてください。

config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1, format: :json do
      resources :コントローラー名
    end
  end
end

先ほどの記述をroutesファイルにしておくことで、下記のルートが出来上がります。
format: :jsonオプションは、このルートがデフォルトでJSON形式で応答することを指定しています。

GET     /api/v1/コントローラー名       => tasks#index
POST    /api/v1/コントローラー名       => tasks#create
GET     /api/v1/コントローラー名/:id    => tasks#show
PUT     /api/v1/コントローラー名/:id    => tasks#update
DELETE  /api/v1/コントローラー名/:id    => tasks#destroy

これで完成です！
あとは先ほど記述したルートと同様の階層構造でコントローラー作成し、Postmanなど使用しながらAPI作成していき、そのAPIを叩くfront部分を作成すればfrontとbackを分離した開発ができます！

おわりに

最後まで読んでいただきありがとうございます。
Reactをフロントエンドで使用しており、バックエンドに使い慣れているRailsを使いたかったのですが、どのようなディレクトリ構成にしたらいいかなどの記事があまりなく、ReactとRailsの組み合わせが悪いのかと学び始めの際は少し後悔していたのですが、学び進めると色々わかる様になってきたので過去の自身に向けた記事になっています。同じ様な方の力に少しでもなればと思いながら、自分の備忘録として残しておきます！