事象

vite.config.tsのproxy設定にlocalhost:8080を設定すると接続エラーが発生したので、調査とそのメモ

vite.config.ts

      '/proxy': {
        target: `http://localhost:8080`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy/, ''),
      }

エラーメッセージ

Error: connect ECONNREFUSED 127.0.0.1:8080
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1595:16)

開発環境

BE: Go
FE: Vue + TS + Vite
実行環境: Docker(BE,FEで1コンテナずつ)

最初に出てきた情報

エラーメッセージでググるとnodeのバージョンによってlocalhostをipに変換できない関連の情報がたくさん出てくる
例えばこんな感じ

vite.config.ts

      '/proxy': {
-        target: `http://localhost:8080`,
+        target: `http://127.0.0.1:8080`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy/, ''),
      }

ただしエラーメッセージを見ると正しく127.0.0.1と読み替えているので恐らく関係ない
(実際に変更したけど変化無し)

Docker環境の影響？

調べているとDocker環境の場合、localhostの向き先がBEコンテナではなく、FEコンテナを見に行っているらしい

ネットワークの変更

今回はBEとFEでそれぞれdocker-compose.ymlを作成し、別々のネットワークでコンテナを立ち上げているため、BEのネットワークにFEを追加する
(docker-compose.ymlを１つにしたり、ネットワークだけうまく編集するなどやり方はたくさんあると思うが、色々と面倒なので今回は思いついた一番手っ取り早い方法を採用)

まずはBEのネットワークを調べる

docker inspect backendのコンテナ名

ネットワーク名をメモ

"Networks": {
                "backend_default": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "d4a77d324cd7",
                        "golang"
                    ],
                    "NetworkID": "395409fc5ab4c3bd05d00d74dda5d9473402201bf98cc89a480752fa6b4ed63e",
                    "EndpointID": "b03a72b9262171f7c2dcf45a938d073caa794d5ab0d075a07495515c57002122",
                    "Gateway": "172.21.0.1",
                    "IPAddress": "172.21.0.2",
                    "IPPrefixLen": 16,
                    "IPv6Gateway": "",
                    "GlobalIPv6Address": "",
                    "GlobalIPv6PrefixLen": 0,
                    "DriverOpts": null
                }

次にFE側のdocker-compose.ymlを修正

docker-compose.yml

version: '3'
services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - .:/app
    ports:
      - 5173:5173
+    networks:
+      - backend_default
+
+ networks:
+  backend_default:
+    external: true

コンテナを再起動

docker-compose down
docker-compose up -d

ネットワークが変更されていることを確認

docker inspect Frontendのコンテナ名

"Networks": {
                "backend_default": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "3355adbacdfc"
                    ],
                    "NetworkID": "395409fc5ab4c3bd05d00d74dda5d9473402201bf98cc89a480752fa6b4ed63e",
                    "EndpointID": "87b45d6c8fddf32e7f86886551442036364028579d2f0f1d0442d3366fa4c917",
                    "Gateway": "172.21.0.1",
                    "IPAddress": "172.21.0.3",
                    "IPPrefixLen": 16,
                    "IPv6Gateway": "",
                    "GlobalIPv6Address": "",
                    "GlobalIPv6PrefixLen": 0,
                    "DriverOpts": null
                }

これでコンテナ側の更新は終了

アプリ側の修正

ここまでくればあとはvite.config.tsを修正してあげるだけ

vite.config.ts

      '/proxy': {
-        target: `http://localhost:8080`,
+        target: `http://backendコンテナ名:8080`,
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/proxy/, ''),
      }

アプリを立ち上げ確認すると、エラーメッセージが出ず正しく通信ができている！

yarn run dev

まとめ

Dockerのlocalhost関連は毎回引っかかっているので、そろそろつまずかないように成りたい。。

参考