前言
在 Win11 上使用 DockerNode 容器开发前端项目时遇到的一个问题，一个使用 Vue 官方的项目脚手架工具创建的一个 Vue3 项目，项目在 Win11 系统直接运行正常，在 Node 容器中运行也正常，但是无法在浏览器上访问，如下效果
原因排查
由于当前 Vue3 项目是刚使用官方本身是没问题的，Node 容器中测试 nodejs 脚本打印，环境检查等也都正常，问题可能出在其他方面
咨询了ChatGPT，Baidu，Google, Bing，Stack Overflow 等等，可能下面几个方面的因素导致
防火墙和出入站规则
检查防火墙或安全组设置允许访问您映射到主机上的端口，由于是在本地运行的 Docker 容器，检查了防火墙，设置全部为全部关闭，也无法在浏览器上访问，说明和防火墙开启关闭无关
由于 Vue3 项目端口是 5173, 入站规则和出站规则手动添加 5173 端口，测试后发现还是无法在浏览上访问，说明和出入站规则也无关
检查端口映射情况
容器创建命令使用如下，使用 -p 参数手动映射端口，端口映射正常
docker run -ti --name node-16.17.0 -p 5173:5173 -v ${pwd}://workspace node:16.17.0 bash
查看 Docker 容器网络
docker inspect <containerId>
检查容器中启动的服务地址和端口，在 NetworkSettings 下面的 Ports 中有前端服务的地址和端口，如果前端服务正常启动后 NetworkSettings -> Ports 里面是有内容的，如下效果
检查监听的IP地址
在容器内部，应该监听 0.0.0.0 而不是 localhost 或 127.0.0.1，目前测试发现前端程序 server 地址为 localhost 或 127.0.0.1 的情况下无法访问，手动改为 0.0.0.0 后能正常访问，容器中 Vue3 前端项目不能访问的原因找到了 😃😃
监听地址修改
Vue3 的默认配置是 127.0.0.1，在 vite.config.js 中添加 server 配置，设置 host 为 0.0.0.0
总结
由于是本地主机运行的 Docker 容器，也是在本地浏览器上进行的访问，所以这次容器中运行的前端项目主要原因为容器内部监听的 IP 地址的问题，如果是 Docker 容器是在远程服务器上，可能就是防火墙、端口开放情况、网络等因素的原因了
思考
localhost、 127.0.0.1、 0.0.0.0 之间的区别分别是什么？
localhost
前端项目一般运行后都是默认这个地址，通常称项目运行在本地
这是一个域名，它表示当前运行的计算机本身。当在一台计算机上访问 localhost 时，正在访问这台计算机的本地主机。几乎所有的网络应用程序默认将 localhost 指向到 127.0.0.1，所以你在大多数情况下会看到这两个名字被互换使用。
127.0.0.1
前端项目有时也会自动提供这个地址，和 localhost 一样也被称为项目在本地运行
这是 IPv4 地址，也被表示为回环地址（loopback address）。这个地址在本地网络中具有特殊含义，它表示当前计算机本身。与 localhost 一样，当访问 127.0.0.1 时，实际上是在访问运行程序的那台计算机
0.0.0.0
nodeexpress 服务运行后一般是这个地址，如下代码，运行后 log 输出为
应用实例，访问地址为 http://0.0.0.0:3000
var server = app.listen(3000, function () { var host = server.address().address var port = server.address().port console.log("应用实例，访问地址为 http://%s:%s", host, port) })
这是一个特殊的 IPv4 地址，被表示为未指定的地址或零地址。这个地址在很多情况下被用作一个指示符，表示 “任何地方” 或 “所有可能的网络”。当你将网络接口的默认网关设置为 0.0.0.0 时，它表示路由所有的网络数据包都通过当前计算机。然而，通常这个地址不用于访问具体的网络资源，而是用于配置路由和网络设备
总结，localhost、127.0.0.1 和 0.0.0.0 都是 IP 地址，但它们在计算机网络中具有不同的含义和用途。localhost 和 127.0.0.1 用于访问本地计算机上的资源，而 0.0.0.0 通常用于指示路由或网络设备的配置
延伸
想了解 Win11 中使用 Docker 如何开发项目，可以看我之前的相关文章
