Zenn
🫠

【rails】APIモードでのプロジェクト作成と初期の設定

2023/06/09に公開
Rails
React
API
tech

で教材を見てざっとAPIを作成したので、
今一度内容をまとめてみようと思う。

rails APIの仕組み

上記画像を頭に入れるとわかりやすい。
フロント側でAPIを叩くと、railsのにつながり、
Routingが必要なControllerを選んで、ModelにDBを引っ張ってきてもらう。
持ってきたDBをRoutingに返してViewを通してフロント側に返してあげる。

自分的に一番わかりやすい表現だったのが、
Routing＝受付さん

受付に「〇〇さんに会いに来たんだけど~」とリクエストして
受付が一旦電話して「〇〇さん宛にお客さん来てるよー」と繋いで
OKが出たら「どうぞ~」と案内してあげる

という構造に似ている気がする。

以上を理解したうえで下記を実行していく。

railsでプロジェクト作成

$ rails new hoge --api

rails new でプロジェクト作成コマンド
hogeの部分は任意のプロジェクト名
--apiでAPIモード

最初に設定をちょっといじっていく。

・ポート番号を変更

config/puma.rbを開いて下記のように任意の番号に修正する。

- port ENV.fetch("PORT") { 3000 }
+ port ENV.fetch("PORT") { 9000 }

・サーバを立てて確認する

下記コマンドを記述して、サーバを立てれるか確認する

$ bundle install
$ rails s

・DBの作成

下記のコマンドを実行してDBを作成。

$ rails db:create

・CORS（Cross-Origin Resource Sharing）を設定

初期の状態ではAPIを叩いたときにCORSエラーがでしまうので、
Gemfileを開いて下記のコメントアウトを外す。

- # gem 'rack-cors'
+ gem 'rack-cors'

config/initializers/cors.rbを開いて
下記を記述でhttp://localhost:3000からのアクセスを許可。

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000'

    resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head],
        credentials: true
  end
end

・サーバを立て直す

$ bundle install
$ rails s

以上で完了。
ここからはAPIの記述になるのですが、
長くなりそうなので改めてまとめるとします。

Discussion