Docker容器中Vite构建的React应用出现Connection refused问题求助

核心问题 #

Docker容器的网络默认是隔离状态，你运行容器时未将容器内部的端口映射到宿主机端口，导致浏览器无法与容器内的服务建立连接。

修复步骤 #

1. 先停止当前运行的容器（若容器仍在运行）：

   • 查看运行中的容器ID：sudo docker ps
   • 停止目标容器：sudo docker stop <容器ID>

2. 重新运行容器，添加端口映射参数：

   sudo docker run -it -p 3000:3000 frontend
   

   • -p 3000:3000 表示将宿主机的3000端口与容器内部的3000端口绑定，外部请求宿主机3000端口时，会自动转发到容器内的Vite服务。

3. 操作完成后，在浏览器访问 http://localhost:3000 即可正常打开应用。

额外检查点 #

• 你的Vite配置已设置host: '0.0.0.0'，确保了容器内服务能接收外部请求，这部分配置无问题。
• 如果宿主机3000端口被占用，可更换映射端口，例如：

  sudo docker run -it -p 3001:3000 frontend
  

  此时访问 http://localhost:3001 即可。

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