質問編集履歴
3
文章を読みやすく修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -11,17 +11,18 @@
|
|
|
11
11
|
### インフラの構成
|
|
12
12
|
サーバはGCEで立てており、フロントはvueでGCEに直接構築、API側はRAILSでGCEの中にdockerコンテナで動作させている構成です。
|
|
13
13
|
vueは8080ポートを、Railsは3000ポートを使用しています。
|
|
14
|
+
WebサーバとしてNginxを使っており、80ポートにきたリクエストは8080にポートフォワードするように設定しています。
|
|
14
15
|
|
|
15
16
|
### 困っていること
|
|
16
17
|
ローカルでの動作確認は取れているのですが、GCEにデプロイした際にうまく動かなくなっている状態です。
|
|
17
18
|
Chromeのデベロッパーツールで確認すると、以下のようなエラーが出ています。
|
|
18
|
-
|
|
19
|
+
下述するCORSに関するエラーは解決できてると思うのですが、念の為GCEに移行してから対処した経緯として記載します。
|
|
19
20
|
|
|
20
21
|
> Access to 'XMLHttpRequest' at `http://localhost:3000/api/v1/users` from origin `http://＜GCEの外部IP＞'`has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
|
|
21
22
|
|
|
22
|
-
恐らくCORSの設定がうまくできていない事によるもの
|
|
23
|
+
恐らくCORSの設定がうまくできていない事によるものでした。
|
|
23
|
-
ローカル環境ではこのようなエラーは出ていないのでGCEに移行した際の設定が足りていな
|
|
24
|
+
ローカル環境ではこのようなエラーは出ていないのでGCEに移行した際の設定が足りていなかったようです。
|
|
24
|
-
|
|
25
|
+
エラーメッセージではoriginに外部IP示していたので、cors.rbにてリクエスト側のIPをlocalhostから外部IPに変更しました。
|
|
25
26
|
|
|
26
27
|
```cors.rb
|
|
27
28
|
Rails.application.config.middleware.insert_before 0, Rack::Cors do
|
|
@@ -37,8 +38,7 @@
|
|
|
37
38
|
```
|
|
38
39
|
|
|
39
40
|
あと分からないのが、client.tsに記載のあるaxiosの設定でして。
|
|
40
|
-
vueからRailsへのリクエストなのでlocalhostでも繋がるのかなと思ったのですが、うまくい
|
|
41
|
+
vueからRailsへのリクエストなのでlocalhostでも繋がるのかなと思ったのですが、うまくいきませんでした。
|
|
41
|
-
またNginxではvueを使っている関係で、80ポートにきたリクエストは8080にポートフォワードするように設定しています。
|
|
42
42
|
|
|
43
43
|
|
|
44
44
|
```client.ts
|
|
@@ -53,13 +53,13 @@
|
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
あと以下のようなWebsocket関連のエラーも同時に出てい
|
|
56
|
+
あと以下のようなWebsocket関連のエラーも同時に出ていました。
|
|
57
57
|
|
|
58
58
|
> GET http://localhost:3000/api/v1/users net::ERR_FAILED
|
|
59
59
|
|
|
60
60
|
> WebSocketClient.js?5586:16 WebSocket connection to 'ws://10.128.0.4:8080/ws' failed:
|
|
61
61
|
|
|
62
|
-
### axiosの指定を外部IPにしてみた
|
|
62
|
+
### そこでaxiosの指定を外部IPにしてみた
|
|
63
63
|
|
|
64
64
|
リクエストする先のURLに関してはlocalhost指定にしていたのを、外部IPにしてみました。
|
|
65
65
|
```client.ts（書き換え後）
|
|
@@ -74,7 +74,8 @@
|
|
|
74
74
|
|
|
75
75
|
```
|
|
76
76
|
|
|
77
|
+
そうするとCORS関連のエラーは解消しました！
|
|
77
|
-
|
|
78
|
+
ですが代わりに以下二つのエラーが発生しています。
|
|
78
79
|
|
|
79
80
|
> GET http://＜外部IP＞:3000/api/v1/users net::ERR_CONNECTION_TIMED_OUT
|
|
80
81
|
|
2
環境の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
Rspec - 4.0.2
|
|
4
4
|
Vue3 - @vue/cli 5.0.4
|
|
5
5
|
Typescript - 4.6.3
|
|
6
|
-
Docker - 20.10.14
|
|
6
|
+
Docker - 20.10.14(OS：Debian - 11.3)
|
|
7
7
|
Mysql - 8.0
|
|
8
8
|
Nginx - 1.14.2
|
|
9
|
-
GCE
|
|
9
|
+
GCE(OS：Debian - 10.12)
|
|
10
10
|
|
|
11
11
|
### インフラの構成
|
|
12
12
|
サーバはGCEで立てており、フロントはvueでGCEに直接構築、API側はRAILSでGCEの中にdockerコンテナで動作させている構成です。
|
1
冗長な文章を削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,14 +13,15 @@
|
|
|
13
13
|
vueは8080ポートを、Railsは3000ポートを使用しています。
|
|
14
14
|
|
|
15
15
|
### 困っていること
|
|
16
|
+
ローカルでの動作確認は取れているのですが、GCEにデプロイした際にうまく動かなくなっている状態です。
|
|
16
17
|
Chromeのデベロッパーツールで確認すると、以下のようなエラーが出ています。
|
|
17
18
|
一応CORSエラーに関して解決してると思うのですが、念の為経緯として記載します。
|
|
18
19
|
|
|
19
20
|
> Access to 'XMLHttpRequest' at `http://localhost:3000/api/v1/users` from origin `http://＜GCEの外部IP＞'`has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space `local`.
|
|
20
21
|
|
|
21
22
|
恐らくCORSの設定がうまくできていない事によるものだと思います。
|
|
22
|
-
|
|
23
|
+
ローカル環境ではこのようなエラーは出ていないのでGCEに移行した際の設定が足りていないようです。
|
|
23
|
-
|
|
24
|
+
cors.rbにてリクエスト側のIPはエラーメッセージを見ると該当の外部IP示しているのでここは合っていそうかと。。。
|
|
24
25
|
|
|
25
26
|
```cors.rb
|
|
26
27
|
Rails.application.config.middleware.insert_before 0, Rack::Cors do
|