непрерывно развертывать приложение Angular2 в веб-приложении Azure с помощью Release Management и angular-cli

В настоящее время я разрабатываю приложение Angular2 и хочу настроить непрерывную интеграцию и непрерывное развертывание с помощью диспетчера выпуска Azure.

Вещи, с которыми я работал до сих пор: CI и CD в WebApp, home / site / wwwroot содержит исходные файлы (без node_modules).

Что-то не работает: приложение не запускается. Переход по URL-адресу приводит к заполнителю (например, «Загрузка ...»). На моем локальном компьютере я бы вызвал «npm install», а затем «npm start», который, в свою очередь, вызовет «tsc && одновременно« tsc -w »« lite-server »». Насколько я понимаю, это нормально для среды разработки, но не должно использоваться в производственной среде.

Вещи, которые я пробовал:

  1. добавление 'npm install' на этапе сборки приводит к чрезвычайно долгому времени сборки bc при загрузке пакетов и долгому времени развертывания bc при большом количестве пакетов
  2. добавление 'npm install --production' сокращает время сборки и развертывания, но запуск 'npm start' на целевой машине завершается ошибкой из-за отсутствия некоторых пакетов (содержащихся в DevDependencies)
  3. выполнение 'npm install' и 'npm start' на целевой машине с помощью консоли кажется работает, но не может быть автоматизировано

Итак, вопрос (ы):

  1. как правильно создать и развернуть приложение Angular2 в веб-приложении Azure?
  2. Как обрабатывать node_modules?

Заранее спасибо.

ОБНОВЛЕНИЕ. Когда я перешел на angular-cli, все стало яснее. На моей машине разработчика я использую "ng build" и "ng serve" для локального запуска. Для развертывания я использую «ng build -prod» и развертываю содержимое созданного каталога «dist» в продакшене. Тем не менее, это все еще обходной путь, поскольку я не могу заставить агент сборки выполнить эти шаги. Я попытался переместить ссылку angular-cli в «Зависимости», а затем вызвать на агенте «npm install» и «ng build -prod», чтобы получить папку «dist». Моя конфигурация развертывания затем скопирует содержимое папки dist в веб-приложение. Тогда шаг "ng build -prod" завершится ошибкой.

'ng' не распознается как внутренняя или внешняя команда

Я как бы понимаю, что не могу установить и запустить какой-либо пакет в агенте сборки, но мне бы очень хотелось использовать angular-cli для создания приложения, поскольку он включает веб-пакет. Есть ли возможность заставить это работать, как описано?




Ответы (1)


Для достичь вашего требования.

Специально для angular2 мы должны внести несколько изменений в файл package.json, чтобы обеспечить успешное развертывание angular2 в веб-приложениях Azure.

  1. Переместите все модули зависимостей из раздела devDependeccies в раздел dependencies.
  2. Используйте "postinstall": "typings install && tsc" вместо "postinstall": "typings install".

Что касается вопроса 2, вам не нужно загружать папку node_modules вместе со своим проектом. Если он указан в ваших зависимостях в вашем package.json, тогда kudu клонирует ваш проект и запускает npm install –production для загрузки правильных вещей.

person Gary Liu    schedule 07.11.2016
comment
Извините за вопрос, но я новичок в Angular, и некоторые концепции все еще меня смущают. Означает ли это, что процесс сборки просто копирует файлы на виртуальную машину, а kudu запускает сценарий postinstall, который, в свою очередь, устанавливает все модули узлов? Если я прав, то какой тогда смысл строить? Как я могу измерить качество сборки? И если я перенесу все DevDependencies в Dependencies, какой смысл даже в использовании devDependencies? Разве их нельзя использовать только в разработке? - person user3838018; 09.11.2016
comment
Аналогичный вопрос вы можете найти здесь - person Aaron Chen; 09.11.2016
comment
Что касается ваших запутанных понятий, я сделаю несколько пояснений. После того, как вы отправите свой код (через git push) из локального репозитория git на удаленный сервер Azure, kudu синхронизирует repository с wwwroot, затем запустит npm install --production и, наконец, команду postinstall (сценарий npm), которая запустится автоматически после установки пакета. - person Aaron Chen; 09.11.2016
comment
спасибо @AaronChen за объяснение. Это означает, что я бы обошел лазурную сборку и развертывание. Могу ли я как-нибудь интегрировать эти инструменты в процесс? Я хотел бы отслеживать качество сборки и использовать другие полезные функции, которые предоставляет управление выпусками. - person user3838018; 09.11.2016
comment
Привет @ user3838018, в основном процесс развертывания и сборки интегрирован и автоматизирован. Если вы хотите контролировать этот процесс развертывания, вы можете использовать функцию настраиваемого развертывания, и для получения дополнительных сведений я бы рекомендовал вам обратиться к этому замечательному блог. - person Aaron Chen; 09.11.2016