Question

我试图获取正确的“食谱”来调试Azure Dev Spaces。我越来越近了，但我不断遇到各种错误。我希望我们能找到一个解决方案，以便它可以帮助陷入同一问题的其他人。到目前为止，这就是我所拥有的：

这是我的Docker文件：

FROM node
ENV PORT 80
WORKDIR /app
COPY package*.json ./
RUN npm install -g @angular/cli
RUN npm install
COPY . .

EXPOSE 80 49153
CMD ["npm", "start"]

这是task.json中的预启动任务

 {
  "label": "azds: prelaunch-ng-serve",
  "command": "azds",
  "args": ["up", "--port=54783:80", "--keep-alive"],
  "options": {
    "cwd": "${workspaceFolder}"
  },
  "problemMatcher": []
}

这是launch.json配置：

 {
  "name": "Launch ng-serve (AZDS)",
  "type": "node",
  "request": "launch",
  "protocol": "legacy",
  "preLaunchTask": "azds: prelaunch-ng-serve",
  "cwd": "${workspaceFolder}",
  "address": "127.0.0.1",
  "port": 54783,
  "localRoot": "${workspaceFolder}/.",
  "remoteRoot": "/app"
},

如果我使用Docker Compose测试以上内容，则可以完美运行。我的问题是在Azure Dev Spaces中部署和测试应用程序。

当我启动调试会话时，这就是我得到的：

Step 1/9 : FROM node
Step 2/9 : ENV PORT 80
Step 3/9 : WORKDIR /app
Step 4/9 : COPY package*.json ./
Step 5/9 : RUN npm install -g @angular/cli
Step 6/9 : RUN npm install
Step 7/9 : COPY . .
Step 8/9 : EXPOSE 4200 49153
Step 9/9 : CMD ["npm", "start"]
Built container image in 1m 29s
Waiting for container...10s
Service 'dpclient' port 'http' is available at http://xxxx.eastus.aksapp.io/
Service 'dpclient' port 80 (http) is available at http://localhost:54783
Port forward 54783:80 failed.

我确认Pod正在运行，但是网页返回：

此页面无法正常运行localhost发送的响应无效。 ERR_INVALID_HTTP_RESPONSE

我也从VS Code中得到一个错误：

无法连接到运行时进程，在10000毫秒后超时-（原因：无法连接到目标：套接字挂起）

通常，执行npm install时会超时：

Step 1/9 : FROM node
Step 2/9 : ENV PORT 80
Step 3/9 : WORKDIR /app
Step 4/9 : COPY package*.json ./
Step 5/9 : RUN npm install -g @angular/cli
Step 6/9 : RUN npm install
Waiting for container...

我认为这是因为执行npm install需要一些时间。我将Azure门户kubernetes前端IP配置中的超时值增加到4分钟。那没有解决问题。

我还尝试将超时值添加到launch.json：

{ “ name”：“启动服务（AZDS）”， “ type”：“节点”， “ request”：“启动”， “ protocol”：“旧版”， “ preLaunchTask”：“ azds：prelaunch-ng-serve”， “ cwd”：“ $ {workspaceFolder}”， “地址”：“ 127.0.0.1”， “端口”：54783， “ localRoot”：“ $ {workspaceFolder} /。”， “ remoteRoot”：“ / app”， “超时”：18000 }

有人看到上面有明显的错误吗？也许sommeone可以做到这一点，他们可以提供有效的“配方”吗？

谢谢：-）

Answer 1

我发现您当前的Dev env设置至少有一个问题。您的launch.json配置设置似乎与DevSpace发行版的值不匹配。

在Dockerfile中，您将暴露以下端口：

Step 8/9 : EXPOSE 4200 49153

默认情况下，azds prep --global为您创建一个Kubernetes部署模板文件，该文件告诉其他系统您的容器公开了端口80，因此请检查以下文件并进行相应调整：

（./charts/---app_name---/templates/deployment.yaml）：

   spec:
      containers:
        - name: {{ .Chart.Name }}
          image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
          imagePullPolicy: {{ .Values.image.pullPolicy }}
          ports:
            - name: http
              containerPort: 80
              protocol: TCP

因此，您无法创建到Angular POD的隧道连接（[[args]：[“ up”，“ --port = 54783：80”，“ --keep-alive”]）通过端口80和Ingress上的K8S服务（可以在values.yaml文件中调整服务端口）。

我在Angluar项目中对ng服务器端口进行了调整，以使其可以直接使用Dev Space，并避免以后再混淆azds prep命令的输出工件（头盔图）：

 -- package.json  --

{
  "name": "webfrontend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 80",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

这是我在Dev Space内部的docker构建的输出：

Waiting for container image build...4s
Building container image...
Step 1/8 : FROM node:lts
Step 2/8 : ENV PORT 80
Step 3/8 : EXPOSE 80
Step 4/8 : WORKDIR /app
Step 5/8 : COPY package.json .
Step 6/8 : RUN npm install
Step 7/8 : COPY . .
Step 8/8 : CMD ["npm", "start"]
Built container image in 6s
Waiting for container...10s
Service 'webfrontend' port 'http' is available at http://angular-dev.webfrontend.xxxyyyzzz.yyy.azds.io/
Service 'webfrontend' port 80 'http' is available at http://localhost:53097

在Azure Dev Spaces和VS Code中调试Angular应用程序

1 个答案: