VSCode で Dev Container を使用して API サーバを立てていたのだが、とあるタイミングでフロントエンドの開発環境から接続できなくなっていた。
構成は以下の通り。
- バックエンド (Dev Container) : PHP + Nginx
- フロントエンド : React + Next.js
ローカルからはポート 8000 番でコンテナ側の Nginx の 80 番に接続できるようにしていた。
つまりローカルからは
http://localhost:8000/
で接続できていた。
現象としては、React から fetch() で接続できなくなっていた。
試したところ、コマンドラインから curl
で接続しても取得できないが、なぜか wget
だと取得できる。
さらに調べたところ、IPv6 (http://[::1]:8000/) だと接続できるが、IPv4だと接続できないという状態になっていた。
そこで LISTEN しているポートを調べたところ以下のようになっていた。
$ lsof -P -i TCP -s TCP:LISTEN COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME Code\x20H 1461 xxxxxxxxxxxxxx 34u IPv4 0x31fa87a050a0f887 0t0 TCP localhost:8000 (LISTEN) com.docke 16144 xxxxxxxxxxxxxx 181u IPv6 0x31fa87a50aea79df 0t0 TCP *:8000 (LISTEN)
2行目は docker なので想定通りのもの。TYPE が IPv6 になっているが Docker はIPv4 でも接続できるみたい。
参考)
- Docker と IPv6 — Docker-docs-ja 1.11.0 ドキュメント
- netstatやlsofでLISTENしているアドレスポートが IPv6と表示されてもIPv4でアクセスできる罠 - Qiita
1行目が怪しいのでプロセスの詳細を確認。
$ ps -p 1461 -ww PID TTY TIME CMD 1461 ?? 0:12.68 /Applications/Visual Studio Code.app/Contents/Frameworks/Code Helper.app/Contents/MacOS/Code Helper --type=utility --utility-sub-type=node.mojom.NodeService --lang=ja --service-sandbox-type=none --user-data-dir=/Users/xxxxxxxxxxxxxx/Library/Application Support/Code --standard-schemes=vscode-webview,vscode-file --secure-schemes=vscode-webview,vscode-file --bypasscsp-schemes --cors-schemes=vscode-webview,vscode-file --fetch-schemes=vscode-webview,vscode-file --service-worker-schemes=vscode-webview --streaming-schemes --shared-files --field-trial-handle=1718379636,r,6655308202130409097,12078965550584404602,131072 --disable-features=CalculateNativeWinOcclusion,SpareRendererForSitePerProcess
VSCode の Code Helper が 8000 番を握っているように見える。
実際に、Devcontainer を使用しないで、docker-compose を直接実行したら 8000 番で正常に接続できた。
試しに上記のプロセスを kill してみたところ、接続できるようにはなったが、VSCode が不安定になった。 何度か立ち上げ直しているとまたプロセスが復活したので根本解決にはならない。
リモート設定をいじっても変化がなかったが、最終的に以下の設定で解決した。
ターミナルを表示すると、タブに「ポート」がある。 そこに docker ではない 8000 番の設定があるので右クリック→「ポートの転送を停止する」を選択。
これでプロセスも消えて、API が接続できるようになった。
この設定を自分でした記憶がないのだが、したのかなぁ。。