Vite React 搭配 Docker Nginx 连接失败，报连接拒绝错误求助

核心问题是端口号不匹配：你的Vite配置指定运行在5173端口，但Docker Compose和Nginx配置里错误使用了5137端口，导致连接被拒绝。以下是分步修复：

1. 统一所有配置中的端口号 #

将所有涉及前端服务的端口从5137改为5173：

修改docker-compose.yml中的app服务配置 #

app:
  container_name: app
  build:
    context: ./app
    dockerfile: Dockerfile
  expose:
    - 5173  # 改为Vite实际使用的端口
  # 若需直接从外部访问Vite服务，添加端口映射
  ports:
    - "5173:5173"

修改nginx.conf中的upstream配置 #

upstream app {
    server app:5173;  # 改为5173端口
}

2. 确认Vite配置的正确性 #

你的vite.config.js已正确设置host: true（允许容器外部访问）和strictPort: true（强制使用指定端口），这部分无需修改，确保保留：

export default defineConfig({
    plugins: [react()],
    server: {
        watch: {
            usePolling: true,
        },
        host: true,
        strictPort: true,
        port: 5173,
    }
})

3. 重启并验证服务 #

执行以下命令重新构建并启动所有服务：

docker-compose down
docker-compose up --build

验证步骤：

• 通过Nginx访问前端：打开浏览器访问http://localhost，应能正常加载Vite开发服务
• 直接访问Vite服务（若添加了端口映射）：访问http://localhost:5173，确认服务正常运行
• 检查容器连通性：进入Nginx容器测试与app容器的连接

  docker exec -it server bash
  curl http://app:5173
  

  若返回Vite的HTML页面，说明连通正常

额外注意事项 #

• depends_on仅保证容器启动顺序，不保证服务完全就绪。若Vite启动较慢，可添加健康检查或等待脚本，避免Nginx在Vite未就绪时发起连接
• 开发环境下Vite使用热重载，usePolling: true已正确配置，确保文件修改能同步到容器内

内容的提问来源于stack exchange，提问作者Enzo Souto Soares