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

Question

環境

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に変更しました。

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でも繋がるのかなと思ったのですが、うまくいきませんでした。

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にしてみました。

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

Answer 1

Railsへのリクエストはブラウザからなので外部IP指定が必要。
3000ポートへリクエストするにあたっては、初期状態ではファイアウォール設定でリクエストできない状態なので、
nginxの設定ファイルで/apiリクエスト時のlocation設定を追加することでリクエストできるようになった。