RailsとReactの疎通を確認したい

はじめに

前回の続きになります。今回はreactとrailsの疎通を行っていきます。

ファイル準備

react

react/src/.../test.tsx

略
import axios, { AxiosResponse } from "axios";
import { apiURL } from "../../globalEnv";

type Data = {
  data: string;
};

略

  const testMethod = () => {
    axios
      .get(`${apiURL}/api/v1/test`, {
        params: {
          name: "test"
        }
      })
      .then((res: AxiosResponse<Data>) => {
        if (res.status === 200) {
          console.log(res.data);
        } else {
          console.log("失敗しました");
        }
      })
      .catch(() => {
        console.log("catch");
      });
  }

  return (
    <Button onClick={() => testMethod()}>ボタン<Button>
    );
略

react/src/.../globalEnv.tsx

export const apiURL = "http://localhost:8080";

rails

backend/app/controllers/api/v1/test_controller.rb

class Api::V1::TestController < ApplicationController
  def index
    render json: { status: 200, message: "Hello World!:#{test_params[:name]}"}
  end

  private
    def test_params
      params.permit(:name)
    end
end

backend/config/routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      resources :test
    end
  end
end

必要な設定

・事前にreact側で画面(test.tsx)と、envを用意しています。
・reactからrailsにデータを送るのにaxiosを使っています。
・今回は localhost:8080/api/v1/test にパラメータとして「name: "test"」を送ることにします。
・rails側ではこのパラメータを受け取る設定の他に、cors設定(localhost:3000からのアクセスを許可)が必要になります。

CORS設定

デフォルトでGemfileに「gem 'rack-cors'」がコメントアウトされているので、コメントアウトを外します。

略
# Use Rack CORS for handling Cross-Origin Resource Sharing (CORS), making cross-origin AJAX possible
gem 'rack-cors'

Gemfileを更新するために以下を実行します

$ docker-compose build
$ docker-compose up

次にcors.rbを以下のように変更します。
ここではlocalhost:3000からget/postなどのリクエストを許可するようにしています。

backend/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]
  end
end

ReactとRailsの疎通確認

画面でボタンをクリックして、コンソールに以下が表示されていればOK

おわりに

次はdynamodbとの連携などを学んでいきます

参考