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のパスワードなどが見られることがない様にできます。
gem 'dotenv-rails'
記述できましたら下記コマンドでGemをインストールしましょう。
bundle insall
問題なく進めましたら、backendディレクトリの直下に.envファイルを作成します。
このファイルは自身で作成しなければならないのでtouchコマンドで作成するかエディタから直接作成してください。
このファイルに自身のパスワードやユーザー名を記述していきます。
DATABASE_DEFAULT_USER = 'ユーザー名'
DATABASE_DEFAULT_PASSWORD = 'パスワード'
DATABASE_DEV_NAME = '開発用のデータベース名'
DATABASE_TEST_NAME = 'テスト用のデータベース名'
ここのユーザー名とパスワードと書かれているところをご自身のMySQLで使用できるユーザー名とパスワードを入力してください。
開発用のデータベース名とテスト用のデータベース名これから作成する物に合わせてご自身で記述して使用してください。
記述できましたら、先に.envファイルをGitにあげないようにしておきましょう。
.gitignoreファイルに下記記述しておきましょう。これでGitにパスワード記述したファイルがアップされなくなります。
/.env
次にconfig配下にあるdatabase.ymlにMySQLとの接続設定をしていきます。
下記の様に記述することで先ほど.envファイルでユーザー名などを入れた変数を接続方法のパスワードとして渡しています。
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ファイルに下記記述をしてください。
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の組み合わせが悪いのかと学び始めの際は少し後悔していたのですが、学び進めると色々わかる様になってきたので過去の自身に向けた記事になっています。同じ様な方の力に少しでもなればと思いながら、自分の備忘録として残しておきます！