Run vue app on Network (LAN) with Dev Container-CodePudding

I've gone through several tutorials to make access to the application available via Network, but nothing has worked so far:

//devcontainer.json
// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.238.0/containers/javascript-node
{
    "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
ARG VARIANT=16-bullseye
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

EXPOSE 8080

I also tried to add the settings in the settings of each environment local:

remote:

even on workspace...

I can normally access from the local machine, but when I try to access through the cell phone, I can't

I need to fix some problems in the mobile version, it would be nice to be able to access it directly via wi-fi, thanks in advance

Mac OS 12.4
Docker Desktop 4.9.1 (81317)

CodePudding user response：

The IP address (172.17.0.2) you are using to access the frontend is probably the on the internal docker network. You should use the IP address of your Mac to connect from the wifi network. You can find this IP address in the network settings of your Mac.

You also need to make sure you publish the port 8080 on the outside Ip of your Mac. See docker docs

Hope this helps.

CodePudding user response：

In devcontainer.json comment out:

// "forwardPorts": [8080],

And add:

"appPort": [8080, "192.168.0.10:8080:8080"],

The first 8080 enables your host machine (a.k.a. your Mac) to access the remote container using either localhost:8080 or 127.0.0.1:8080
The second part connects the IP 192.168.0.10 and port 8080 from your host machine to the 8080 port in the remote container. So you must replace 192.168.0.10 with your Mac IP (not the docker IP).

You must rebuild the container to changes take effect. In vscode run: "Remote-Containers: Rebuild Container" command in the Command Palette (F1) when you are connected to the container.

Then you should be able to access from your mobile using http://192.168.0.10:8080

To put some context, we are trying to configure a remote container created with vscode and connect from the LAN. See devcontainerjson-reference and containers#_publishing-a-port