Dev Container运行Vue应用无法通过局域网(LAN)访问问题咨询

参考多份教程配置Dev Container应用的局域网访问能力，所有配置尝试均未生效，本机可正常访问应用，但同一Wi-Fi下的其他设备（如手机）无法连通，需要实现局域网直接访问开发环境以提升移动端调试效率。

运行环境 #

• Mac OS 12.4
• Docker Desktop 4.9.1 (81317)

现有配置 #

devcontainer.json #

//devcontainer.json
{
    "name": "node",
    "build": {
        "dockerfile": "Dockerfile",
        "args": { "VARIANT": "18-bullseye", "network": "host" }
    },

    "customizations": {
        "vscode": {
            "extensions": [
                "dbaeumer.vscode-eslint",
                "dbaeumer.vscode-eslint",
                "anseki.vscode-color",
                "GitHub.copilot",
                "sainoba.px-to-rem",
                "bradlc.vscode-tailwindcss",
                "neptunedesign.vs-sequential-number",
                "Wscats.vue"
            ]
        }
    },

    "settings": {
        "remote.localPortHost": "allInterfaces"
    },

    "forwardPorts": [8080],

    "remoteUser": "node"
}

Dockerfile #

# DockerFile
ARG VARIANT=16-bullseye
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

EXPOSE 8080

已尝试的配置操作 #

• 本地VS Code环境添加端口监听相关配置
  
• 远程（容器）环境添加对应配置
  
• 工作区层面也做了相同配置
  

当前故障现象 #

• 本机可正常访问8080端口的应用
• 同一Wi-Fi下的手机访问对应地址失败
  
• 容器运行状态正常
  

问题出在三个配置没做对，按顺序改完就能通：

1. host网络配置放错位置了
   你把"network": "host"写到build.args里了，这是构建时传的参数，根本不会生效为容器运行的网络模式。要让Dev Container用host网络，得在devcontainer.json根层级加配置：

"runArgs": ["--network", "host"]

注意：MacOS上的Docker Desktop对host网络的支持和Linux有差异，加完这个配置还需要完成后面两步校验

2. 确认端口转发绑定的地址
   就算配了remote.localPortHost: allInterfaces，也得手动去端口面板确认实际转发规则：

• 点开VS Code底部的「端口」面板
• 找到8080端口条目，右键点击「端口地址」
• 确保选择的是0.0.0.0，如果显示127.0.0.1手动切换即可，127.0.0.1仅允许本机访问，局域网设备无法连通。

3. 确认开发服务的监听地址
   目前绝大多数前端脚手架（Vite、Vue CLI、Webpack DevServer等）默认只监听127.0.0.1，就算容器和端口转发都配置正确，服务本身不接受局域网来源的请求也无法访问，需要修改项目启动配置让服务监听0.0.0.0：

• 使用Vite的项目：启动命令加--host 0.0.0.0，或者在vite.config.js里配置server: { host: '0.0.0.0' }
• 使用Vue CLI或原生Webpack的项目：启动命令加--host 0.0.0.0，或者在vue.config.js里配置devServer: { host: '0.0.0.0' }

三个配置都修改完成后，查询Mac的局域网IP（按住Option点击右上角Wi-Fi图标即可查看，一般为192.168.x.x网段），手机连接同一Wi-Fi，访问http://<你的Mac局域网IP>:8080即可正常打开。
如果还是无法连通，检查Mac系统设置里的防火墙是否开启，临时关闭防火墙或者给Node、Docker放行入站连接即可。

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