Docker devcontainer 在本地网络上提供 Angular 应用程序答案

【问题标题】：Docker devcontainer serve angular app on local networkDocker devcontainer 在本地网络上提供 Angular 应用程序
【发布时间】：2021-09-08 04:32:39
【问题描述】：

Windows 10 WSL2 上的 Docker 桌面

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

转载：

在干净的 git 存储库中创建一个 hello world angular 应用程序
将 repo 克隆到新的开发容器（Typescript/Node）中
为应用服务

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

--network=host（从未在 Windows 上工作过，但认为它可能在 WSL2 - 没有）
暴露 4200
runArgs：“-p 4200:4200”
应用端口：[4200]
在 PC 防火墙上打开 4200 端口
ng serve --host 0.0.0.0 --port 4200

附加信息：

ng serve 是否允许我在我的主机上查看网站
将 repo 克隆到我的主机并运行 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"],
}

【问题讨论】：

标签： angular docker networking vscode-devcontainer

【解决方案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)

【讨论】：