【Rails】Rails6でAPIモードの環境構築をしっかりやる

はじめに

最近、RailsAPI+Reactのような形で、Webアプリケーションを構築するスタートアップ企業をしばしば見かけます。

今回はReact等にフロント側を委託し、RailsはAPIに専念することを前提とした環境構築と、その解説をしていきます。

環境

• Ruby：2.6.3
• Rails：6.0.3

RailsAPI環境構築

【1】rails new で雛形を作成

今回は下記を指定した上でrails newを実行し、RailsAPIの雛形を作成します。

• APIモード
• DBをMySQL
• Railsのバージョン6.0.3

rails _6.0.3_ new hoge -d mysql --api

このコマンドを実行すると、自動で必要なファイルを作成してくれます。大変便利ですね。

【2】rails db:createでDBを作成

rails db:create

DBを作成しておきます。マイグレーションファイルがまだ存在しないので、rails db:migrateはしません。

【3】bundle installでgemを取り込む

rack-corsをコメントアウトしてbundle installしてください。

bundle install

このコマンドでGemfileに記述したgem（ライブラリ）を取り込むことができます。ちなみにbundleだけでもbundle installしてくれます。

【4】CORS（Cross-Origin Resource Sharing）を設定

ざっくり説明すると、 デフォルトでは、React等の別のオリジンからRailsAPIにアクセス（GET, POST, PUT, DELETEなど）することは制限されています。 なので、フロント側のアプリケーションからのアクセスすることを可能にする設定を書いていかなければいけません。（詳しく書いたらキリがないので、「CORSとは」みたいにググってみてください。）

今回はconfig/initializers以下にcors.rbファイルを作り、設定を書いていきます。例は下記のとおり。

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

http://localhost:3000からのHTTPリクエストを許容する設定です。

ここでは省略していますが、本来ならば本番環境での設定も必要です。

【5】Pumaの設定

config/puma.rb

# port        ENV.fetch("PORT") { 3000 }がすでにあるので3001に修正する。
port        ENV.fetch("PORT") { 3001 }

ローカルサーバーのデフォルトポート番号を3001にします。（フロント側が3000を想定しているため。）

この設定をすることで、rails -sをした時にhttp://localhost:3001で立ち上がるようになります。

最後に

お疲れ様でした！！！

以上で、Rails側での環境構築は完了です。認証方法にCookieを使う場合は、その設定も必要です。認証系の設定と実装は他の記事で書こうと思います。ではでは〜👋