WebSocket connection to 'ws://○○:3000/ws' failed: がウザい時

React側が自分は3000番ポートだと勘違いしてる

これが原因です。
一つのプロジェクトでバックエンドはLaravelやRailsでコンテナを立てて、
フロントにReactを取り入れた時などに発生すると思います。

docker-composeファイルを編集

以下のような時に「WebSocket connection to 'ws://○○:3000/ws' failed」が
発生します。
Railsで3000番使ってるからReactはそれ以外で。みたいな時。

docker-compose.yml

rails:
  # ~省略
  ports:
    - "3000:3000"
react:
  # ~省略
  ports:
    - "4000:3000"

railsの方を3001番とかにしてReactの方を3000番にすれば良いのですがマイクロサービス化してメールサーバーや、決済サーバー、WEBサーバー、APIサーバー・・・みたいに複数コンテナ立てると開発環境でどれがどのポートか管理しずらいし、なんかエンジニアらしくない！！
というわけで今回は複数コンテナを立てた場合の他の解決策もご紹介。
ループバックアドレス というものがあり、それを使えば同じポートを複数コンテナで使うことが可能です。

ローカルループバックアドレスを追加

初期値は127.0.0.1のみが用意されている。
下記コマンドでローカルループバックアドレスを追加

sudo ifconfig lo0 alias 127.0.0.2
sudo ifconfig lo0 alias 127.0.0.3
sudo ifconfig lo0 alias 127.0.0.4

このままだとPCを再起動するたびに上のコマンドを打たないとなので
vim ~/.zprofile　bashだったらvim ~/.bash_profileで以下を追加

PASSWORD="PCのパスワード"
echo $PASSWORD | sudo -S ifconfig lo0 alias 127.0.0.2 #react
echo $PASSWORD | sudo -S ifconfig lo0 alias 127.0.0.3 #api
echo $PASSWORD | sudo -S ifconfig lo0 alias 127.0.0.4 #mail
echo $PASSWORD | sudo -S ifconfig lo0 alias 127.0.0.5 #rails
~

hostsの設定

vim /etc/hosts

127.0.0.1 localhost

# 追加
127.0.0.2 react
127.0.0.3 api
127.0.0.4 mail
127.0.0.5 rails

最初は一番上の「127.0.0.1 localhost」の記述しかありません。
この記述のおかげでURLに「127.0.0.1」と打たずに「localhost」と打てば「127.0.0.1」ポートでアクセスできるわけですね。

docker-compose.yml修正

docker-compose.yml

react:
  # ~省略
  ports:
    - "127.0.0.2:3000:3000"
api:
  # ~省略
  ports:
    - "127.0.0.3:3000:3000"
mail:
  # ~省略
  ports:
    - "127.0.0.4:3000:3000"
rails:
  # ~省略
  ports:
    - "127.0.0.5:3000:3000"

これでdockerをリビルドすればみんな平和に3000番ポートで開けます。
「WebSocket connection to 'ws://○○:3000/ws' failed:」のエラーもコンソールから消えているはずです。