質問編集履歴
7
画像の修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
/log/production.log(クラスター内のRailsコンテナに入り確認したlog)
|
|
36
36
|
|
|
37
|
-
|
|
38
38
|
|
|
39
39
|
|
|
40
40
|
|
6
画像の挿入
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -34,6 +34,7 @@
|
|
|
34
34
|
|
|
35
35
|
/log/production.log(クラスター内のRailsコンテナに入り確認したlog)
|
|
36
36
|
|
|
37
|
+
|
|
37
38
|
|
|
38
39
|
|
|
39
40
|
|
5
画像の挿入
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
|
|
|
34
34
|
|
|
35
|
+
/log/production.log(クラスター内のRailsコンテナに入り確認したlog)
|
|
36
|
+
|
|
35
37
|
|
|
36
38
|
|
|
37
39
|
|
4
コードを変更
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -42,9 +42,7 @@
|
|
|
42
42
|
※字数制限によりRailsへのリクエスト部分のみ
|
|
43
43
|
|
|
44
44
|
<script>
|
|
45
|
-
|
|
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
コードを一部修正
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
|
+
### 発生している問題・エラーメッセージ(８月３１日修正)
|
|
27
|
-
|
|
27
|
+
|
|
28
|
-
エラーメッセージ(chromeブラウザ、devツールのconsoleから
|
|
28
|
+
エラーメッセージ(chromeブラウザ、devツールのconsoleから)
|
|
29
|
+
|
|
29
|
-
|
|
30
|
+
|
|
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
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
34
|
+
|
|
35
|
-
|
|
35
|
+
|
|
36
|
-
|
|
37
|
-
|
|
36
|
+
|
|
38
|
-
|
|
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
|
-
|
|
46
|
-
|
|
47
|
-
### ソースコード(フロントエンド側)
|
|
38
|
+
### ソースコード(フロントエンド側※８月３１日訂正)
|
|
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ツールによる確認)に画像追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -309,7 +309,11 @@
|
|
|
309
309
|
|
|
310
310
|
|
|
311
311
|
|
|
312
|
+
●awsマネジメントコンソール等の確認
|
|
312
|
-
|
|
313
|
+
参考にした記事
|
|
314
|
+
https://qiita.com/nagaakihoshi/items/f7326978221ee053d208
|
|
315
|
+
|
|
316
|
+
|
|
313
317
|
CloudWatch メトリクスのログを確認したところ、クライアント TLS ネゴシエーションエラーが発生している事に気づいたため、公式ページに従ってバックエンド側のロードバランサーの「基本的な設定」タブから「ロードバランサー属性の編集」を行い
|
|
314
318
|
|
|
315
319
|
〇タイムアウトを６０秒から３６０秒に延長
|
1
「発生している問題・エラーメッセージ」の「※consoleのlogを追記します」以下にlogの画像を追加しました
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
|
+
|
|
42
46
|
|
|
43
47
|
### ソースコード(フロントエンド側)
|
|
44
48
|
|