Docker devcontainer在本地网络上为angular应用服务

Question

Windows 10Docker Desktop on WSL2

目标:通过我的本地网络从我的devcontainer中提供一个angular应用程序(专门用于移动端测试)

繁殖:

1. 在干净的git仓库中创建一个hello world angular应用程序
2. 将repo克隆到一个新的devcontainer (Typescript/Node)
3. 服务应用程序

我尝试过的事情(以及这里的每种排列):

• --network=host(从未在windows上工作，但认为它可能会WSL2 -不)
• 公开4200
• runArgs: "-p 4200:4200">
• appPort: [4200]
• 在PC防火墙上打开端口4200
• ng server——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"],
}

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 app:ng serve --host=0.0.0.0 --port=4201

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

Answer 2

您可以通过修改选项"appPort"在devcontainer.js中:

"appPort": ["4200:4200" ]

这样我们告诉docker "publish"本地网络的4200端口

在此之后重建你的devcontainer和应用程序应该可以通过输入IPv4:4200从手机访问

你可以在Dev Container元数据参考

中找到更多信息