Docker devcontainer 在本地网络上提供 angular 应用程序

Question

Windows 10 Docker WSL2 上的桌面

目标：通过我的本地网络从我的 devcontainer 提供 angular 应用程序（专门用于在移动设备上进行测试）

复制：

在干净的 git 存储库中创建一个 hello world angular 应用程序
将 repo 克隆到新的 devcontainer (Typescript/Node)
提供应用程序

我尝试过的事情（以及这里的每一个排列）：

--network=host（从未在 windows 上工作过，但认为它可能会在 WSL2 - 没有）
曝光 4200
runArgs: "-p 4200:4200"
应用程序端口：[4200]
在 PC 防火墙上打开端口 4200
ng 服务 --host 0.0.0.0 --port 4200

附加信息：

ng serve 是否允许我在主机上查看站点
将存储库克隆到我的主机并运行 ng serve --host 0.0.0.0 允许我通过我的网络访问该网站（但进出 devcontainer 不合理）

我目前的 DockerFile 非常普通：

ARG VARIANT="14-buster"
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}

RUN npm install -g @angular/cli
RUN npm i yalc -g

我的devcontainer.js文件也没有改变（除了增加了一个卷）

// 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.187.0/containers/typescript-node
{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        "args": { 
            "VARIANT": "14"
        }
    },

    "settings": {},

    "extensions": [
        "dbaeumer.vscode-eslint"
    ],

    "remoteUser": "node",
    "mounts": ["source=D:/GIT/docker/volumes/yalk,target=/yalc,type=bind,consistency=cached"],
}

Answer 1

DockerFile

ARG VARIANT="14-buster"
FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:0-${VARIANT}

RUN npm install -g @angular/cli
RUN npm i yalc -g

# this line
EXPOSE 4201

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.187.0/containers/typescript-node
{
    "name": "Node.js & TypeScript",
    "build": {
        "dockerfile": "Dockerfile",
        "args": { 
            "VARIANT": "14"
        }
    },

    "settings": {},

    "extensions": [
        "dbaeumer.vscode-eslint"
    ],

    "forwardPorts": [4201], // <-- this line

    "remoteUser": "node",
    "mounts": ["source=D:/GIT/docker/volumes/yalk,target=/yalc,type=bind,consistency=cached"],
}

运行 angular 应用具有： ng serve --host=0.0.0.0 --port=4201

我想我以前试过这个，也许它不工作但现在 Docker Desktop 4.1.1 (69879)

Docker devcontainer 在本地网络上提供 angular 应用程序

Docker devcontainer serve angular app on local network

networking

docker

angular

vscode-devcontainer