Nuxt.jsからrailsにgetリクエストを送ると500エラーが返ってきます(GoogleBooksAPIを使用)

Question

いつも拝見させていただいております。
ありがとうございます。
現在下記のエラーが発生し、いろいろと試行錯誤しているのですが解決できず、せめて何か解決の糸口となるようなヒントを頂けないかと思い、投稿させていただきました。

現環境

Nuxt.jsとRuby on Railsでシングルページアプリケーションを作り、aws(ECS,EC2)へデプロイしました。

●クラスターの中にNuxt.jsのコンテナ(EC2)とRails(api)のコンテナ(EC2)を配置
●フロントエンド用、バックエンド用のアプリケーションロードバランサーをそれぞれ設置
●ドメインを取得し、Route53のAレコードに登録、証明書発行済み

です。

該当する機能の状況

●フロントエンド側
Nuxt側からaxiosを用いてフォームに入力されたキーワードをパラメーターに含ませ、Railsにgetリクエストを送る

●バックエンド側
Rails側はGoogle Books Apiに対してキーワード検索等を行えるモジュールがあり
このモジュールを専用のmodelにincludeし、model内で定義したメソッドをコントローラで使用して書籍データの入ったJsonをフロントエンドに返却

ローカル環境では機能が正常に作動している事を目視で確認し、また、バックエンド側のテストは終了している状態です。
なお、本番環境においてもGoogle Books Apiを用いない他の機能は正常に作動している事を確認しました。

発生している問題・エラーメッセージ(８月３１日修正)

エラーメッセージ(chromeブラウザ、devツールのconsoleから)

「GET https://backend.com/api/v1/books/search/?eyword=%E3%83%8F%E3%83%AA%E3%83%BC 500」の右にある「76cebd9.js:2」について(ソースタブの画像)

/log/production.log(クラスター内のRailsコンテナに入り確認したlog)

ソースコード(フロントエンド側※８月３１日訂正)

※字数制限によりRailsへのリクエスト部分のみ

<script>

export default {

  methods: {
    async setBooks () {
      try {
        this.books = []
        await this.$axios.get(`/api/v1/books/search/?keyword=${this.keyword}`)
        .then(
          (response) => {
            console.log('success--------------')
            console.log(response)
            console.log('success--------------')
            this.books = response.data
          }
        )
        } catch (error) {
          console.log('error--------------')
          console.error(error.response.data);
          console.log('error--------------')
          //console.log({error})
          //this.error = 'データの取得に失敗しました'
          this.formReset()
        }
      },
      formReset () {
        this.$refs.form.reset()
        this.keyword = "" 
      },
     
</script>

  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth',
    'nuxt-i18n',
    'bootstrap-vue/nuxt',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: 'https://backend.com',
  },

export default function ({ $axios }) {
  $axios.onRequest((config) => {
    // Devise Token Auth
      config.headers.common.uid = localStorage.getItem('uid')
      config.headers.common.client = localStorage.getItem('client')
      config.headers.common['access-token'] = localStorage.getItem('access-token')
    }
  )

  $axios.onResponse((response) => {
    // Devise Token Auth
    if (response.headers['access-token']) {
        localStorage.setItem('token-type', response.headers['token-type'])
        localStorage.setItem('uid', response.headers.uid)
        localStorage.setItem('client', response.headers.client)
        localStorage.setItem('access-token', response.headers['access-token'])
      }
    }
  )
}

ソースコード(バックエンド側)

module GoogleBooksApi
  def url_of_creating_from_id(google_books_api_id)
    "https://www.googleapis.com/books/v1/volumes/#{google_books_api_id}"
  end
  #  Google Books APIのIDから、APIのURLを取得する
  
  def url_of_searching_from_keyword(keyword)
    "https://www.googleapis.com/books/v1/volumes?q=#{keyword}&country=JP"
  end
  #  キーワードから、検索するAPIのURLを取得する
  
  def get_json_from_url(url)
    JSON.parse(Net::HTTP.get(URI.parse(Addressable::URI.encode(url))))
  end
  #  URLから、JSON文字列を取得し、JSONオブジェクトを構築する
end

require 'google_books_api'

class GoogleBook
  include ActiveModel::Model
  include ActiveModel::Attributes
  include ActiveModel::Validations
  
  attribute :google_books_api_id, :string
  attribute :authors
  attribute :image, :string
  attribute :published_at, :date
  attribute :title, :string
  attribute :publisher, :string
  
  
  validates :google_books_api_id, presence: true
  validates :title, presence: true
  
  class << self
    #lib以下に作成したモジュールを使用する
  include GoogleBooksApi
  
    def new_from_item(item)
      @item = item
      @volume_info = @item['volumeInfo']
      new(
        google_books_api_id: @item['id'],
        authors: @volume_info['authors'],
        image: image_url,
        published_at: @volume_info['publishedDate'],
        title: @volume_info['title'],
        publisher: @volume_info['publisher'],
      )
    end
  
    def new_from_id(google_books_api_id)
      url = url_of_creating_from_id(google_books_api_id)
      item = get_json_from_url(url)
      new_from_item(item)
    end
  
    def search(keyword)
      url = url_of_searching_from_keyword(keyword)
      json = get_json_from_url(url)
      items = json['items']
      return [] unless items
  
      items.map do |item|
        GoogleBook.new_from_item(item)
      end
    end
  
    private
  
    def image_url
      @volume_info['imageLinks']['smallThumbnail'] if @volume_info['imageLinks'].present?
    end

  end
  
  def save
    return false unless valid?
  
    book = build_book
    return false unless book.valid?
  
    ActiveRecord::Base.transaction do
      book.save
      if authors.present?
        authors.each.with_index do |author, index|
          author = book.authors.build(name: author)
          author.is_representative = index.zero?
          author.save
        end
      end
    end
    true
  end
  
  def find_book_or_save
    if Book.find_by(google_books_api_id: google_books_api_id) || save
      Book.find_by(google_books_api_id: google_books_api_id)
    else
      false
    end
  end
  
  private
  
  def build_book
    Book.new(
      google_books_api_id: google_books_api_id,
      published_at: published_at,
      title: title,
      image: image,
      publisher: publisher,
    )
  end
end

module Api
  module V1
    class BooksController < ApplicationController
      def search
        books = GoogleBook.search(params[:keyword])
        books_array = books.map do |book|
          { 
            google_books_api_id: book.google_books_api_id,
            image: book.image,
            published_at: book.published_at,
            title: book.title,
            publisher: book.publisher,
            authors: book.authors
          }
        end
        books_array.each do |i|
          if i[:authors] != nil
            i[:authors] = i[:authors].sort.join(',')
          end
        end
        render json: books_array, status: 200
      end

      def create
        google_book = GoogleBook.new_from_id(create_book_params[:google_books_api_id])
        if (@book = google_book.find_book_or_save)
          render json: google_book, status: 200
        else
          render json: google_book.errors, status: 500
        end
      end

      private

      def create_book_params
        params.permit(:google_books_api_id)
      end
    end
  end
end

試したこと

●CORSの設定
当初、ＣＯＲＳエラー(ステータス504)が返ってきていたため
以下の様にRailsのcors.rbを修正しましたが解決しませんでした

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    
    origins ['https://backend.com', 'http://localhost:8080']
    
    resource "*",
      headers: :any,
      expose: ['access-token', 'expiry', 'token-type', 'uid', 'client'],
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
   end
 end

●Chromeブラウザのdevツールによる確認
ググったところ
CORSエラーはRails以外の要因でも発生する事があると知り、devツールのNetworkタブから以下のurlをコピペしブラウザから直接アクセスしたところ、504タイムアウトエラーが発生している事が分かりました

●awsマネジメントコンソール等の確認
参考にした記事
https://qiita.com/nagaakihoshi/items/f7326978221ee053d208

CloudWatch メトリクスのログを確認したところ、クライアント TLS ネゴシエーションエラーが発生している事に気づいたため、公式ページに従ってバックエンド側のロードバランサーの「基本的な設定」タブから「ロードバランサー属性の編集」を行い

〇タイムアウトを６０秒から３６０秒に延長
〇Desyncをモニタリングモードに変更

しました。

その結果CORSエラーは発生しなくなりましたが、表題の通り５００エラーが返ってくるようになりました。

補足情報（FW/ツールのバージョンなど）

フロントエンド
"vue": "^2.6.14"
"nuxt": "^2.15.8"
"@nuxtjs/axios": "^5.13.6"

バックエンド
ruby 3.0.2
Rails 6.1.6

開発環境
windows(wsl2 Ubuntu 20.04.5 LTS)

エディタ
vscode

クラスター
EC2(t3.small)

Comments

[yu_1985]

https://stackoverflow.com/questions/50950011/axios-post-request-fails-with-error-status-code-500-internal-server-error
この質問の回答によると

> In the catch block, the error which will always be 500 internal server error
> so, use error.response.data instead of error.

とのことなので、そこを変えてみたらまた別の結果が見られたりしませんか。

[winterboum]

log を見ると 500 の原因が載ってます。
それを載せてください。
中途半端な抜粋はしないで、Started から 次のStartedまでを全部。

[take-hull]

返信が遅れており申し訳ありません。
yu_1985さん
>　> In the catch block, the error which will always be 500 internal server error
　　> so, use error.response.data instead of error.
　　とのことなので、そこを変えてみたらまた別の結果が見られたりしませんか。

教えていただいてありがとうございます。
フロントエンド側のコードを上記の記事を参考に修正し、エラーログの変化を確認します。
変化が確認でき次第修正させていただきます。

winterboumさん
>中途半端な抜粋はしないで、Started から 次のStartedまでを全部。

コメントありがとうございます。
申し訳ありません・・・。
抜粋した理由はlogの情報量が多くどこまで載せるべきか判断できなかったからです。
「発生している問題・エラーメッセージ」に画像を追加しましたが、違う場合は教えていただけると助かります。
重ねて申し訳ないのですが、「startedからstarted」が何を示しているのか今の私では理解できません・・・。
差し支えなければ「start」が何を示しているのか詳しく教えてください。

[winterboum]

サーバー の log/ploduction.log を覗けば Started がなにかすぐわかります

[take-hull]

winterboumさん
>サーバー の log/ploduction.log を覗けば Started がなにかすぐわかります

ありがとうございます！
Railsのlogファイルの事でしょうか(ほんとにスミマセン・・・)
さっそく確認してみます！

[take-hull]

発生している問題・エラーメッセージ(８月３１日修正)の「/log/production.log(クラスター内のRailsコンテナに入り確認したlog)」以下にRailsサーバーのログのスクリーンショットを追加しました。

[winterboum]

そう丸投げしないで、500を起こしたところを探し出して、その部分のStartedから次のStartedまでをじっくり読んでください

[take-hull]

winterboumさん

そうですね
自分で探さなきゃ意味ないですね（　＾ω＾）・・・

昨日までエラーの原因がNuxtなのかawsなのかRailsなのかすら分からず途方に暮れていたのですが、コメントを頂いたおかげで取っ掛かりが掴めました！
ありがとうございます！

Answer 1

こちらをご覧ください。
https://teratail.com/questions/dljdho1ts6d9ha