📑

Rails API + React(TypeScript)で簡易的な SNS アプリ を作る第2回(プロジェクト作成+API HTTP通信)

2022/01/20に公開約2,400字

概要

今回は作成するプロジェクトを作ってAPIのHTTP通信設定をしていきます。

手順

  1. アプリ概要
    https://zenn.dev/shogo_matsumoto/articles/971a1f9e50bd67
  2. プロジェクト作成+API HTTP通信←本記事
  3. 投稿機能作成
  4. ログイン機能作成
  5. ユーザーと投稿を1対多で紐付ける1/2
  6. ユーザーと投稿を1対多で紐付ける2/2
  7. いいね機能作成
  8. フォロー機能作成
  9. DM機能作成
  10. リファクタリング

本記事でやったこと

  • 同じディレクトリ内にRails(APIモード)とReact(TypeScript)のプロジェクトを作成。
  • rack-corsのgemを入れてReactのローカルのAPI通信を許可する
  • Railsのポート番号をデフォルトの3000番から3001番に変更する(Reactが3000番を使うため)

作業用ディレクトリ作成

今回はrails-react-snsというディレクトリを作り、その中にそれぞれのプロジェクトをまとめたいと思います。

terminal
$ mkdir rails-react-sns
$ cd rails-react-sns

Rails プロジェクト作成

いつもどおり、$ rails newコマンドでプロジェクトを作成します。

プロジェクト名の後ろに--apiというオプションを付けることで、APIモードでのファイル及びディレクトリが作成され、API通信のために必要な最低限のプロジェクトを作成することができます。
つまり、Rails側でビューを作成するためのファイルが作られないことになります。

terminal
$ rails new api --api
$ cd api

React プロジェクト作成

こちらは、今回create-react-appを使ってプロジェクト作成していきます。

プロジェクト名の後ろに--template typescriptというオプションを指定すると、TypeScriptでのcreate-react-appプロジェクトが作成されます。

terminal
$ cd rails-react-sns
$ npx create-react-app frontend --template typescript

HTTP 通信設定

まずは今回、API通信を用いたSPAを作成していくので、Rails側でのAPI通信設定をやっていきます。

まずはapiディレクトリに入ります。
ここから出ないとRailsコマンドが実行できません。

terminal
$ cd api

次にGemfileに以下のようにrack-corsというgemを追加します。

おそらく、APIモードでRailsプロジェクトを作成したら、Gemfileの中にコメントアウトされていると思うので、そちらをコメントアウトから外して保存します。

Gemfile
gem 'rack-cors'

Gemfileが設定できたら$ bundle installを行います。

terminal
$ bundle install

このrack-corsというgemを追加することで、RailsのAPIモードでプロジェクトを作成した際に、config/initializerディレクトリにある、cors.rbというファイルを使うことができるようになります。

このcors.rb内で、ReactからのAPI通信を許可することで、Reactからのリクエストを受け取ってレスポンスを返すことができるようになります。

今回、Railsはローカルの3001番ポート、Reactは3000番ポートに設定するため、Reactの通信を許可するために、ローカルの3000番ポートを許可します。

以下のようにoriginsの後ろに記述すれば大丈夫です。

app/config/initializer/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # Front(React)側は3000ポートで繋ぐのでoriginsは3000を許可します
    origins 'localhost:3000'

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

ポート番号変更

最後に、Railsのポート番号がデフォルトで3000番になっているので3001番に直しておきましょう。
同じポート番号では2つのプロジェクトを開くことができない(Reactが3000番ポートでサーバーを立ち上げているときにRailsの3000番ポートのサーバーを立ち上げることができない)ため、開発中に困ります。

以下のようにpuma.rbというファイルのPORTという部分を3000から3001に変更すれば大丈夫です。

app/config/puma.rb
# Rails→3001、React→3000
port ENV.fetch("PORT") { 3001 }

次回

次回は投稿機能を作成していきます。

Discussion

ログインするとコメントできます