WSL2 Docker Desktop下devcontainer运行Angular应用允许局域网访问问题咨询

可行配置方案 #

核心原因：Windows下WSL2采用NAT模式运行，Docker Desktop默认端口映射仅绑定本地环回地址127.0.0.1，导致局域网设备无法直接访问，按以下步骤配置即可解决： #

1. 调整devcontainer.json配置

替换你的原有配置，核心是指定端口绑定到所有网卡接口：

{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        "args": { 
            "VARIANT": "14"
        }
    },
    // 新增以下端口相关配置
    "runArgs": [
        "-p", "0.0.0.0:4200:4200"
    ],
    "forwardPorts": [4200],
    "portsAttributes": {
        "4200": {
            "label": "Angular Dev Server",
            "onAutoForward": "notify"
        }
    },
    "appPort": ["0.0.0.0:4200"],

    "settings": {},
    "extensions": [
        "dbaeumer.vscode-eslint"
    ],
    "remoteUser": "node",
    "mounts": ["source=D:/GIT/docker/volumes/yalk,target=/yalc,type=bind,consistency=cached"],
}

修改配置后重建devcontainer生效。 #

2. 配置Windows层面端口代理（必做）

管理员身份打开PowerShell执行以下操作：

• 先获取WSL2虚拟网卡IP，执行命令：wsl hostname -I，输出的第一个IP即为WSL2的当前IP，记为WSL_IP
• 添加端口代理规则，替换命令中的WSL_IP为你拿到的实际地址：

  netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=4200 connectaddress=WSL_IP connectport=4200
  

• 验证规则是否生效：netsh interface portproxy show all，能看到4200端口的映射条目即为配置成功

3. Angular服务启动命令

使用以下命令启动服务，添加主机检查禁用参数避免移动端访问报错：

ng serve --host 0.0.0.0 --port 4200 --disable-host-check

注意事项

• WSL2重启后IP会变更，需要先删除旧代理规则再添加新规则，删除命令为：netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=4200
• 局域网设备访问时使用Windows宿主机的物理网卡IP+4200端口即可正常访问

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