码头在本地网络上提供角应用

Question

WSL2上的Windows 10码头桌面

目标:通过本地网络(特别是在移动环境下进行测试)从我的开发容器中提供一个角度应用程序。

复制：

1. 在干净的git回购中创建hello world角应用程序
2. 将回购程序克隆到一个新的dev容器中(类型记录/节点)
3. 发出掌声

我尝试过的东西(以及这里的每一个排列)：

• --network=host (从未在windows上工作过，但认为它可能在WSL2上运行--不起作用)
• 曝光4200
• runArgs："-p 4200:4200“
• appPort: 4200
• 在PC防火墙上打开端口4200
• 吴服务--主机0.0.0.0 -端口4200

其他信息：

• ng服务确实允许我在我的主机上查看站点。
• 将回购复制到我的主机并运行ng serve --host 0.0.0.0 ，允许我通过我的网络访问站点(但搬进搬出dev容器是不合理的)

我现在的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

您可以通过将devcontainer.js中的“devcontainer.js”选项修改为：

"appPort": ["4200:4200" ]

这样，我们就告诉码头在本地网络中“发布”4200端口。

在此之后，重新构建rebuild，然后通过输入IPv4 4:4200从电话中访问该应用程序。

您可以在容器元数据引用中找到更多信息

Answer 2

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"],
}

使用：ng serve --host=0.0.0.0 --port=4201运行角应用程序

我以为我以前试过这个，也许不起作用，但现在上了Docker Desktop 4.1.1 (69879)