Docker化Vue应用配置Cypress无头测试时出现Error: connect ECONNREFUSED 127.0.0.1:8080连接失败问题

看起来你遇到了两个核心问题导致服务间无法通信，我来一步步帮你排查解决：

1. 修正服务间通信的地址 #

在Docker Compose的默认网络环境里，每个服务都是独立的容器，localhost在Cypress容器中指向它自身，而非你的Vue应用容器。你需要用服务名my-app作为主机地址来访问Vue应用。

修改你的Docker Compose文件，取消注释Cypress的环境变量，并把baseUrl改成服务名：

version: '3.5'
services:
  my-app:
    build: .
    ports:
      - "8080:8080"
    volumes:
      - type: bind
        source: ./app
        target: /app
      - "/app/node_modules"
    # 添加健康检查，确保服务真正就绪
    healthcheck:
      test: ["CMD", "curl", "-f", "http://localhost:8080"]
      interval: 5s
      timeout: 5s
      retries: 5
  cypress:
    image: "cypress/included:8.2.0"
    depends_on:
      my-app:
        condition: service_healthy  # 等待my-app健康检查通过后再启动
    environment:
      - CYPRESS_baseUrl=http://my-app:8080  # 用服务名替代localhost
    working_dir: /app
    volumes:
      - type: bind
        source: ./app
        target: /app
volumes:
  app:

2. 确保Vue应用监听所有网络接口 #

默认情况下，Vue的npm run serve可能只绑定到容器内部的localhost，导致其他容器无法访问。你需要修改配置让它监听所有网络接口：

在Vue项目根目录创建或修改vue.config.js：

module.exports = {
  devServer: {
    host: '0.0.0.0',
    port: 8080
  }
}

或者直接修改Dockerfile的启动命令，添加--host参数：

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

3. 处理服务启动顺序的就绪问题 #

depends_on默认只等待容器启动，不会等待服务真正就绪（比如Vue还在编译打包中）。上面添加的healthcheck和service_healthy条件，可以确保Cypress只有在Vue应用完全启动并能响应请求后才开始执行测试。

如果你的容器里没有curl，可以换用端口检查的方式：

healthcheck:
  test: ["CMD-SHELL", "netstat -tuln | grep 8080 || exit 1"]
  interval: 5s
  timeout: 5s
  retries: 5

验证操作 #

1. 停止现有容器：docker-compose down
2. 重新构建并启动服务：docker-compose up --build
3. 观察日志，确认Cypress在my-app的健康检查通过后才开始运行测试

这样应该就能解决你遇到的连接拒绝问题了。

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