質問編集履歴

7

画像の修正

2022/08/31 10:20

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  /log/production.log(クラスター内のRailsコンテナに入り確認したlog)
36
36
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/0f38068f-a639-41ba-bca7-917bbc5e99e8.jpeg)
37
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/365ebc5f-a510-4ff7-b0e7-19cebc6203c3.jpeg)
37
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/bd832e2c-c653-4a95-b546-222eba7686a5.jpeg)
38
38
 
39
39
 
40
40
 

6

画像の挿入

2022/08/31 10:16

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -34,6 +34,7 @@
34
34
 
35
35
  /log/production.log(クラスター内のRailsコンテナに入り確認したlog)
36
36
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/0f38068f-a639-41ba-bca7-917bbc5e99e8.jpeg)
37
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/365ebc5f-a510-4ff7-b0e7-19cebc6203c3.jpeg)
37
38
 
38
39
 
39
40
 

5

画像の挿入

2022/08/31 10:07

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -32,6 +32,8 @@
32
32
  「GET https://backend.com/api/v1/books/search/?eyword=%E3%83%8F%E3%83%AA%E3%83%BC 500」の右にある「76cebd9.js:2」について(ソースタブの画像)
33
33
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/23d28dda-d8a8-41a3-af87-7d8bfc9db7ad.jpeg)
34
34
 
35
+ /log/production.log(クラスター内のRailsコンテナに入り確認したlog)
36
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/0f38068f-a639-41ba-bca7-917bbc5e99e8.jpeg)
35
37
 
36
38
 
37
39
 

4

コードを変更

2022/08/31 09:33

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -42,9 +42,7 @@
42
42
  ※字数制限によりRailsへのリクエスト部分のみ
43
43
 
44
44
  <script>
45
- import bookCard from '~/components/books/bookCard.vue'
45
+
46
- import { PerfectScrollbar } from 'vue2-perfect-scrollbar'
47
- import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
48
46
  export default {
49
47
 
50
48
  methods: {

3

コードを一部修正

2022/08/31 09:31

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  いつも拝見させていただいております。
2
2
  ありがとうございます。
3
- 現在下記のエラーが発生し、いろいろと試行錯誤しているのですが解決できず、せめて何か解決の糸口となるようなヒントが得られないかと思い、質問させていただきました。
3
+ 現在下記のエラーが発生し、いろいろと試行錯誤しているのですが解決できず、せめて何か解決の糸口となるようなヒントを頂けないかと思い、投稿させていただきました。
4
4
 
5
5
  ### 現環境
6
6
  Nuxt.jsとRuby on Railsでシングルページアプリケーションを作り、aws(ECS,EC2)へデプロイしました。
@@ -23,55 +23,61 @@
23
23
  ローカル環境では機能が正常に作動している事を目視で確認し、また、バックエンド側のテストは終了している状態です。
24
24
  なお、本番環境においてもGoogle Books Apiを用いない他の機能は正常に作動している事を確認しました。
25
25
 
26
- ### 発生している問題・エラーメッセージ
26
+ ### 発生している問題・エラーメッセージ(8月31日修正)
27
-
27
+
28
- エラーメッセージ(chromeブラウザ、devツールのconsoleから抜粋)
28
+ エラーメッセージ(chromeブラウザ、devツールのconsoleから)
29
+
29
-
30
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/2d7ba370-4c9a-42fa-bd96-5a6890c07a44.jpeg)
31
+
32
+ 「GET https://backend.com/api/v1/books/search/?eyword=%E3%83%8F%E3%83%AA%E3%83%BC 500」の右にある「76cebd9.js:2」について(ソースタブの画像)
30
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/161d40ee-08c4-4248-bf16-897dbd4a9370.jpeg)
33
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/23d28dda-d8a8-41a3-af87-7d8bfc9db7ad.jpeg)
31
-
32
-
33
-
34
- GET https://backend.com/api/v1/books/search?keyword=%E3%83%86%E3%82%B9%E3%83%88 500
34
+
35
- 76cebd9.js:2
35
+
36
-
37
- error: o
36
+
38
- code: "ERR_BAD_RESPONSE"
37
+
39
- config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
40
- message: "Request failed with status code 500"
41
- name: "AxiosError"
42
-
43
- ※consoleのlogを追記します
44
-
45
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/c3212cf7-6f90-4ce1-8b10-19e2426f5eff.jpeg)
46
-
47
- ### ソースコード(フロントエンド側)
38
+ ### ソースコード(フロントエンド側※8月31日訂正)
48
39
 
49
40
  ```pages/books.vue
50
41
 
51
- Railsへのリクエスト部分を抜粋
42
+ ※字数制限によりRailsへのリクエスト部分のみ
43
+
44
+ <script>
45
+ import bookCard from '~/components/books/bookCard.vue'
46
+ import { PerfectScrollbar } from 'vue2-perfect-scrollbar'
47
+ import 'vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css'
48
+ export default {
52
49
 
53
50
  methods: {
54
51
  async setBooks () {
55
52
  try {
56
53
  this.books = []
57
- await this.$axios.get(`/api/v1/books/search?keyword=${this.keyword}`)
54
+ await this.$axios.get(`/api/v1/books/search/?keyword=${this.keyword}`)
58
55
  .then(
59
- (res) => {
56
+ (response) => {
57
+ console.log('success--------------')
60
- console.log(res)
58
+ console.log(response)
59
+ console.log('success--------------')
61
- this.books = res.data
60
+ this.books = response.data
62
61
  }
63
62
  )
64
63
  } catch (error) {
64
+ console.log('error--------------')
65
+ console.error(error.response.data);
66
+ console.log('error--------------')
65
- console.log({error})
67
+ //console.log({error})
66
- this.error = 'データの取得に失敗しました'
68
+ //this.error = 'データの取得に失敗しました'
67
69
  this.formReset()
68
70
  }
69
71
  },
72
+ formReset () {
73
+ this.$refs.form.reset()
74
+ this.keyword = ""
75
+ },
76
+
77
+ </script>
70
78
  ```
71
79
 
72
80
  ```nuxt.config.js
73
-
74
- 一部抜粋
75
81
 
76
82
  modules: [
77
83
  // https://go.nuxtjs.dev/axios

2

試したこと(●Chromeブラウザのdevツールによる確認)に画像追加

2022/08/31 06:50

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -309,7 +309,11 @@
309
309
 
310
310
  ![](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/f274ebae-c93d-4f31-bbc6-e8d191deffef.jpeg)
311
311
 
312
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/db109378-090d-4abb-bf5b-56e0c141e82f.jpeg)●awsマネジメントコンソール等の確認
312
- ●awsマネジメントコンソール等の確認
313
+ 参考にした記事
314
+ https://qiita.com/nagaakihoshi/items/f7326978221ee053d208
315
+
316
+
313
317
  CloudWatch メトリクスのログを確認したところ、クライアント TLS ネゴシエーションエラーが発生している事に気づいたため、公式ページに従ってバックエンド側のロードバランサーの「基本的な設定」タブから「ロードバランサー属性の編集」を行い
314
318
 
315
319
  〇タイムアウトを60秒から360秒に延長

1

「発生している問題・エラーメッセージ」の「※consoleのlogを追記します」以下にlogの画像を追加しました

2022/08/31 04:51

投稿

take-hull
take-hull

スコア16

test CHANGED
File without changes
test CHANGED
@@ -39,6 +39,10 @@
39
39
  config: {transitional: {…}, transformRequest: Array(1), transformResponse: Array(1), timeout: 0, adapter: ƒ, …}
40
40
  message: "Request failed with status code 500"
41
41
  name: "AxiosError"
42
+
43
+ ※consoleのlogを追記します
44
+
45
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-31/c3212cf7-6f90-4ce1-8b10-19e2426f5eff.jpeg)
42
46
 
43
47
  ### ソースコード(フロントエンド側)
44
48