質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

解決済

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

take-hull
take-hull

総合スコア16

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

1回答

0リアクション

0クリップ

330閲覧

投稿2022/08/30 18:15

編集2022/08/31 10:20

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

現環境

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を用いない他の機能は正常に作動している事を確認しました。

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

エラーメッセージ(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)
イメージ説明
イメージ説明

ソースコード(フロントエンド側※8月31日訂正)

pages/books.vue

※字数制限により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>

nuxt.config.js

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', },

plugins/axios.js

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']) } } ) }

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

lib/google_books_api.rb

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

models/google_book.rb

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

controllers/api/v1/books_controller.rb

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の設定
当初、CORSエラー(ステータス504)が返ってきていたため
以下の様にRailsのcors.rbを修正しましたが解決しませんでした

config/initializers/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 ネゴシエーションエラーが発生している事に気づいたため、公式ページに従ってバックエンド側のロードバランサーの「基本的な設定」タブから「ロードバランサー属性の編集」を行い

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

しました。

その結果CORSエラーは発生しなくなりましたが、表題の通り500エラーが返ってくるようになりました。
イメージ説明

補足情報(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)

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

winterboum

2022/08/30 22:02

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

2022/08/31 05:13

返信が遅れており申し訳ありません。 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

2022/08/31 09:14

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

2022/08/31 09:36

winterboumさん >サーバー の log/ploduction.log を覗けば Started がなにかすぐわかります ありがとうございます! Railsのlogファイルの事でしょうか(ほんとにスミマセン・・・) さっそく確認してみます!
take-hull

2022/08/31 10:10

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

2022/08/31 10:58

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

2022/08/31 11:08

winterboumさん そうですね 自分で探さなきゃ意味ないですね( ^ω^)・・・ 昨日までエラーの原因がNuxtなのかawsなのかRailsなのかすら分からず途方に暮れていたのですが、コメントを頂いたおかげで取っ掛かりが掴めました! ありがとうございます!

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Google API

Googleは多種多様なAPIを提供していて、その多くはウェブ開発者向けのAPIです。それらのAPIは消費者に人気なGoogleのサービス(Google Maps, Google Earth, AdSense, Adwords, Google Apps,YouTube等)に基づいています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。