はじめに

問題

Vue3 + Vuetify + TypeScriptの環境をdocker-compose.ymlで起動しました

docker-compose.yml

version: '3'

services:
  client:
    image: node
    container_name: client
    volumes:
      - ./client:/usr/src
    working_dir: /usr/src
    command: sh -c 'yarn && yarn dev'
    ports:
      - '3000:3000'

しかし、localhost:3000にアクセスしても表示されません

ポートが開いているか確認したら開いていそう

CONTAINER ID   IMAGE                         COMMAND                  CREATED          STATUS         PORTS                                       NAMES
eb9d80e2ddcb   node                          "docker-entrypoint.s…"   6 seconds ago    Up 4 seconds   0.0.0.0:3000->3000/tcp, :::3000->3000/tcp   client

コンテナの中でcurl localhost:3000をしたら表示される

# curl localhost:3000
<!DOCTYPE html>
<html lang="en">

<head>
  <script type="module" src="/@vite/client"></script>

    <meta charset="UTF-8" />
    <link rel="icon" href="/favi.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Average Poker</title>
</head>

<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
</body>

</html>

なぜ。、、

解決方法

起動コマンドをyarn devからyarn dev --hostに変えたらいけた！

version: '3'

services:
  client:
    image: node
    container_name: client
    volumes:
      - ./client:/usr/src
    working_dir: /usr/src
    command: sh -c 'yarn && yarn dev --host'
    ports:
      - '3000:3000'

こちらの記事に詳細がありました

これはデフォルトのホスト(コンテナ側)は127.0.0.1をリッスンするので、コンテナ内のローカルホストのみが公開されるためです。
起動時に意図せず外部アドレス（ホスト側）に公開することはセキュリティ上の問題になるので、Viteの初期設定ではホスト側からアクセスが出来ないようになっています。

なるほど。Viteを使い慣れていないとここは結構はまりそうな気がしました

おわりに

今回は地味につまづいたVue環境のコンテナ化についてまとめました
久しぶりにPort周りでつまづいてDockerを疑いましたが、Vite側だったとは

Vue3+Vite+docker-composeでポートが正しいのにアクセスできない

はじめに

問題

解決方法

おわりに

参考