Docker部署Nuxt开发服务器时WebSocket连接失败问题排查

核心问题分析 #

Nuxt开发服务器默认将WebSocket服务绑定在localhost，容器内的localhost仅能被容器自身访问，宿主机无法通过端口映射建立WebSocket连接。此外你的配置中还存在工作目录与挂载路径不匹配、服务网络不一致的问题，这些也会影响服务正常运行。

分步解决方案 #

1. 修改Nuxt启动参数，强制监听0.0.0.0 #

让Nuxt开发服务器监听容器的所有网络接口，这样宿主机才能通过端口映射连接WebSocket：

• 方法一：直接修改dev.Dockerfile的启动命令

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

• 方法二：修改项目根目录package.json的dev脚本

{
  "scripts": {
    "dev": "nuxt dev --host 0.0.0.0"
  }
}

2. 修正工作目录与卷挂载的路径匹配问题 #

你的Dockerfile设置工作目录为/termin.ai/app，但docker-compose将本地目录挂载到/app_folder，路径不匹配会导致Nuxt找不到项目文件。二选一调整：

• 调整Dockerfile的工作目录：

WORKDIR /app_folder/app

• 或调整docker-compose的挂载路径：

nuxt:
  volumes:
    - ./:/termin.ai
    - /termin.ai/app/node_modules
    - /termin.ai/node_modules

3. 统一所有服务的网络 #

当前mysql使用termin_ai网络，nuxt和phpmyadmin使用app_network，会导致nuxt无法访问mysql。将mysql加入app_network：

services:
  mysql:
    networks:
      - app_network

4. 验证WebSocket端口监听状态 #

进入nuxt容器检查端口监听情况，确认服务在0.0.0.0上监听4000端口：

docker exec -it app-nuxt netstat -tulpn

输出中应包含0.0.0.0:4000的监听记录。

完整修正后的配置示例 #

dev.Dockerfile #

# syntax=docker/dockerfile:1.2
FROM node:18.12.1-alpine

WORKDIR /app_folder/app

RUN npm cache clean --force

COPY . /app_folder

RUN --mount=type=secret,id=_env \
npm install && \
npm install @resvg/resvg-js-linux-x64-musl

EXPOSE 3000 4000

CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0"]

docker-compose.yml #

version: "3.3"
services:
  mysql:
    image: mysql
    networks:
      - app_network
    environment:
      MYSQL_ROOT_PASSWORD: pass
      MYSQL_DATABASE: db
    container_name: app-mysql
    ports:
      - 3306:3306
    volumes:
      - db-data:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin
    networks:
      - app_network
    ports:
      - 8080:80
    environment:
      - PMA_ARBITRARY=1
  nuxt:
    build: 
      dockerfile: dev.Dockerfile
    networks:
      - app_network
    container_name: app-nuxt
    volumes:
      - ./:/app_folder
      - /app_folder/app/node_modules
      - /app_folder/node_modules
    ports:
      - 3000:3000
      - 4000:4000

volumes:
  db-data:

networks:
  app_network:

验证步骤 #

1. 停止现有容器：docker compose down
2. 重新构建并启动：docker compose up -d --build
3. 访问http://localhost:3000，检查浏览器控制台是否还有WebSocket连接错误
4. 验证Nuxt能否正常连接MySQL（若之前存在数据库连接问题）

内容的提问来源于stack exchange，提问作者HubertK778