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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

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

GoogleComputeEngine

GoogleComputeEngineとは、Linux VMをGoogleのデータセンター上で走らせるIaaS (インフラストラクチャ アズ ア サービス)製品で、ビジネス向けクラウドコンピューティング基盤のことです。

解決済

GCE上でのVue.jsとRails間の連携エラー

iyore888
iyore888

総合スコア40

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

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

GoogleComputeEngine

GoogleComputeEngineとは、Linux VMをGoogleのデータセンター上で走らせるIaaS (インフラストラクチャ アズ ア サービス)製品で、ビジネス向けクラウドコンピューティング基盤のことです。

1回答

0評価

2クリップ

359閲覧

投稿2022/04/16 07:19

編集2022/05/03 22:40

環境

Ruby on Rails - 6.1.5
Rspec - 4.0.2
Vue3 - @vue/cli 5.0.4
Typescript - 4.6.3
Docker - 20.10.14(OS:Debian - 11.3)
Mysql - 8.0
Nginx - 1.14.2
GCE(OS:Debian - 10.12)

インフラの構成

サーバはGCEで立てており、フロントはvueでGCEに直接構築、API側はRAILSでGCEの中にdockerコンテナで動作させている構成です。
vueは8080ポートを、Railsは3000ポートを使用しています。
WebサーバとしてNginxを使っており、80ポートにきたリクエストは8080にポートフォワードするように設定しています。

困っていること

ローカルでの動作確認は取れているのですが、GCEにデプロイした際にうまく動かなくなっている状態です。
Chromeのデベロッパーツールで確認すると、以下のようなエラーが出ています。
下述するCORSに関するエラーは解決できてると思うのですが、念の為GCEに移行してから対処した経緯として記載します。

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.

恐らくCORSの設定がうまくできていない事によるものでした。
ローカル環境ではこのようなエラーは出ていないのでGCEに移行した際の設定が足りていなかったようです。
エラーメッセージではoriginに外部IP示していたので、cors.rbにてリクエスト側のIPをlocalhostから外部IPに変更しました。

cors.rb

Rails.application.config.middleware.insert_before 0, Rack::Cors do allow do # origins 'localhost:8080' # Vue.js側で使用するドメイン、こちらはローカルでの設定 origins '<GCEの外部IP>' # こちらはGCEに移行した際に変えた設定 resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head] end end

あと分からないのが、client.tsに記載のあるaxiosの設定でして。
vueからRailsへのリクエストなのでlocalhostでも繋がるのかなと思ったのですが、うまくいきませんでした。

client.ts

import axios from 'axios' // axiosのインスタンスを作成 const client = axios.create({ baseURL: 'http://localhost:3000/api/v1' // Rails側のAPIエンドポイント }) export default client

あと以下のようなWebsocket関連のエラーも同時に出ていました。

GET http://localhost:3000/api/v1/users net::ERR_FAILED

WebSocketClient.js?5586:16 WebSocket connection to 'ws://10.128.0.4:8080/ws' failed:

そこでaxiosの指定を外部IPにしてみた

リクエストする先のURLに関してはlocalhost指定にしていたのを、外部IPにしてみました。

client.ts(書き換え後)

import axios from 'axios' // axiosのインスタンスを作成 const client = axios.create({ baseURL: 'http://l<外部IP>:3000/api/v1' // Rails側のAPIエンドポイント }) export default client

そうするとCORS関連のエラーは解消しました!
ですが代わりに以下二つのエラーが発生しています。

GET http://<外部IP>:3000/api/v1/users net::ERR_CONNECTION_TIMED_OUT

WebSocketClient.js?5586:16 WebSocket connection to 'ws://<内部IP>:8080/ws' failed:

一つ目のエラーは恐らくNginxに3000リクエスト時のlisten設定をしていないからだと思うのですが、
既に80→8080ポートの設定はしてしまっているので、そういった場合どうしたものか、、という状態です。

二つ目のエラーに関してはGCEの内部IPが表示されているのですが、どういった対処をすればいいか案が出せていません。

最後に

今回のようなvueとRails連携するような構成を始めて実装したため知見もなくお手上げ状態です・・・
有識者の方、お知恵を貸していただけると幸いです。
長文、乱筆失礼いたしました、よろしくお願いいたいします。

良い質問の評価を上げる

以下のような質問は評価を上げましょう

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

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Ruby on Rails 6

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

GoogleComputeEngine

GoogleComputeEngineとは、Linux VMをGoogleのデータセンター上で走らせるIaaS (インフラストラクチャ アズ ア サービス)製品で、ビジネス向けクラウドコンピューティング基盤のことです。