WebSocket connection Errorについて

環境

kubernetes

• ubuntu：22.0.4.1 LTS
• kubernetes：1.28.2
• containerd：1.6.24
• IP Address: 172.21.0.8

Nodejsコンテナ

• node:18.17.1-alpine3.17
• react@18.2.0
• 環境変数
  • PORT=3000

構成

• NodePortサービス
  • TargetPort: 3000/TCP
  • NodePort: 30669/TCP

事象

kubernetesでReactを起動し、ブラウザでアクセスしたところ以下のログが発生。

WebSocket connection to 'ws://<IP Address>:<Port No.>/ws' failed:

最初のアクセスは問題なくアクセスできるためページは表示され、その後上記のログがわらわらと出力されました。
エラーログをよくよく見てみると、アクセス先のPort番号が、コンテナで設定した環境変数（PORT=3000）になっているのが原因っぽいです。
いろいろ調べてみましたが、ホットリロード用のポートの指定が別途必要そうです。

トラブルシューティング

以下の環境変数を設定して、npm startを実行する。

WDS_SOCKET_PORT=0

そのため、ConfigMapを作成し、Podに適用させるようにしました。

ConfigMapを作成

データのキー名は適当で大丈夫です。

configmap.yaml

apiVersion: v1
kind: ConfigMap
metadata:
  labels:
    app: develop
  name: develop-client-cm
  namespace: develop
data:
  socket_port: "0"

Podへの適用

valueFromを利用して、環境変数の設定を追加してあげます。

pod.yaml

apiVersion: v1
kind: Pod
metadata:
  name:
    develop-client
  labels:
    app: develop-client
  namespace: develop
spec:
  containers:
  - env:
    - name: WDS_SOCKET_PORT
      valueFrom:
        configMapKeyRef:
          name: develop-client-cm
          key: socket_port

上記の環境変数を設定することで、ログが止まりました。
おそらくプロキシを利用している場合も設定が必要になると思います。

参考記事

https://github.com/webpack/webpack-dev-server/issues/4217
https://create-react-app.dev/docs/advanced-configuration/