Отладка приложения Angular в Azure Dev Spaces и VS Code - PullRequest
Новая
       7

Отладка приложения Angular в Azure Dev Spaces и VS Code

0 голосов
/ 28 января 2019

Я пытаюсь получить правильный «Рецепт» для отладки пространств разработки Azure.Я приближаюсь, но продолжаю сталкиваться с различными ошибками.Я надеюсь, что мы сможем найти решение, которое поможет другим, кто застрял в той же проблеме.Пока это то, что у меня есть:

Это мой файл 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"]

Это предварительное задание в tasks.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.

Когда я запускаю сеанс отладки, я получаю следующее: 

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.

Я подтверждаю, что модуль работает, новеб-страница возвращает:

Эта страница не работает. localhost отправил неверный ответ.ERR_INVALID_HTTP_RESPONSE

Я также получаю сообщение об ошибке от кода VS:

Невозможно подключиться к процессу времени выполнения, тайм-аут после 10000 мс - (причина: невозможно подключиться к цели: сокет зависает)

Часто я получаю таймаут, когда выполняется установка npm: 

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 требуется немного времени.Я увеличил значения времени ожидания в конфигурации внешнего интерфейса kubernetes на портале Azure до 4 минут.Это не решило проблему.

Я также попытался добавить значение времени ожидания для 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 "," timeout ": 18000}

Кто-нибудь видел какие-либо очевидные ошибки выше?Может быть, если у sommeone есть эта работа, они могут предоставить рабочий «рецепт»?

Спасибо: -)

1 Ответ

0 голосов
/ 08 марта 2019

Я вижу по крайней мере одну проблему с вашей текущей настройкой 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

Из-за этого вы не можете создать туннельное соединение (["args": ["up", "--port = 54783: 80", "--keep-alive "]) в Angular POD, поддерживаемый службой K8S на порте 80 и Ingress (порт службы можно настроить в файле values.yaml).

Я сделал настройки порта сервера ng в моем Angluarпроект, чтобы заставить его работать с 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: 

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
...