Run vue app on Network (LAN) with Dev Container

Question

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)

What is the ip address you are using for accessing it from the mobile phone? — Gabe
– Gabe, Commented Jul 9, 2022 at 4:14

ric · Accepted Answer · 2022-07-09 23:12:35Z

1

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

answered Jul 9, 2022 at 23:12

ric

721 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hebert Lima Over a year ago

thank you for your time, i got this erros message form vscode: Error: Command failed: docker run --sig-proxy=false -a STDOUT -a STDERR -p 127.0.0.1:8080:8080 -p 192.168.0.10:8080:8080. when I try start from Docker desktop: Error invoking remote method 'docker-start-container': Error: (HTTP code 500) server error - Ports are not available: exposing port TCP 192.168.0.10:8080 -> 0.0.0.0:0: listen tcp 192.168.0.10:8080: bind: can't assign requested address

Hebert Lima Over a year ago

I don't know exactly what happened, but a change "appPort": [8080, "192.168.0.10:8080:8080"] to "appPort": [ "8080:8080"], and was reachable from : 192.168.3.14:8080, work like a charm

Gabe · Accepted Answer · 2022-07-09 05:48:39Z

1

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.

answered Jul 9, 2022 at 5:48

Gabe

2,6962 gold badges8 silver badges20 bronze badges

2 Comments

Hebert Lima Over a year ago

you seem to be right too, but I needed to configure the devcontainer.json to work properly, thank you for help, save my day!

Gabe Over a year ago

Ah, okay. Well, glad I could help a bit :-)

Collectives™ on Stack Overflow

Run vue app on Network (LAN) with Dev Container

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related