Развертывание angular 6 в Azure

Я пытаюсь развернуть пример приложения на лазурном портале и сталкиваюсь с некоторыми трудностями.

Сначала я просто тестирую, поэтому я создал приложение angular только с ng new poc-pwa-angular-v2. После этого я перешел в репозиторий Bitbucket.

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

Я пытался сгенерировать сценарии с помощью kudu (deploy.cmd и .deployment), но при первом развертывании у меня возникла ошибка.

Может кто подскажет?

Посмотрите мой журнал.

Command: deploy.cmd
Handling node.js deployment.
Creating app_offline.htm
KuduSync.NET from: 'D:\home\site\repository' to: 'D:\home\site\wwwroot'
Copying file: 'package.json'
Deleting app_offline.htm
Invalid start-up command "ng serve" in package.json. Please use the format "node <script relative path>".
Looking for app.js/server.js under site root.
Missing server.js/app.js files, web.config is not generated
The package.json file does not specify node.js engine version constraints.
The node.js application will run with the default node.js version 10.6.0.
Selected npm version 6.1.0

> [email protected] postinstall D:\home\site\wwwroot
> npm run build


> [email protected] build D:\home\site\wwwroot
> ng build

'ng' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: `ng build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\local\AppData\npm-cache\_logs\2018-11-13T22_16_35_989Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
Failed exitCode=1, command = "D:\Program Files (x86)\nodejs\10.6.0\node.exe" "D:\Program Files (x86)\npm\6.1.0\node_modules\npm\bin\npm-cli.js" install --production
npm ERR!     D:\local\AppData\npm-cache\_logs\2018-11-13T22_16_36_053Z-debug.log
An error has occurred during web site deployment.
Invalid start-up command "ng serve" in package.json. Please use the format "node <script relative path>".\r\nMissing server.js/app.js files, web.config is not generated\r\n'ng' is not recognized as an internal or external command,\r\noperable program or batch file.\r\nnpm ERR! code ELIFECYCLE\r\nnpm ERR! errno 1\r\nnpm ERR! [email protected] build: `ng build`\r\nnpm ERR! Exit status 1\r\nnpm ERR! \r\nnpm ERR! Failed at the [email protected] build script.\r\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\r\n\r\nnpm ERR! A complete log of this run can be found in:\r\nnpm ERR!     D:\local\AppData\npm-cache\_logs\2018-11-13T22_16_35_989Z-debug.log\r\nnpm ERR! code ELIFECYCLE\r\nnpm ERR! errno 1\r\nnpm ERR! [email protected] postinstall: `npm run build`\r\nnpm ERR! Exit status 1\r\nnpm ERR! \r\nnpm ERR! Failed at the [email protected] postinstall script.\r\nnpm ERR! This is probably not a problem with npm. There is likely additional logging output above.\r\n\r\nnpm ERR! A complete log of this run can be found in:\r\nnpm ERR!     D:\local\AppData\npm-cache\_logs\2018-11-13T22_16_36_053Z-debug.log\r\nD:\Program Files (x86)\SiteExtensions\Kudu\78.11022.3613\bin\Scripts\starter.cmd deploy.cmd

Если вы копируете встроенные файлы в каталог dist (что хорошо), вам не нужны файлы в каталоге src и не нужно вызывать ng serve - вам просто нужно получить доступ к index.html из dist.

user184994 14.11.2018 00:30

@ user184994 Я обновил свой логотип. Я выполнил команду «ng build prod», чтобы сгенерировать файлы в папке dist. Это мой package.json `{" name ":" poc-pwa-angular-v2 "," version ":" 0.0.0 "," scripts ": {" ng ":" ng "," start ":" ng serve »,« build »:« ng build »,« test »:« ng test »,« lint »:« ng lint »,« e2e »:« ng e2e »,« postinstall »:« npm run build »} , `

lams 14.11.2018 00:37

Да, вы все еще звоните в ng serve и просматриваете это сообщение об ошибке. Звонить в ng serve не нужно - это только для локальной разработки. Вам просто нужно обслужить файлы в каталоге dist.

user184994 14.11.2018 00:40

@ user184994 Спасибо за разъяснение, в этом случае я удалил из package.json блок «скрипт» и снова поднялся, и он сработал.

lams 14.11.2018 12:20
sajeetharan.com/2020/02/14/…
Sajeetharan 15.02.2020 13:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
848
2

Ответы 2

Проблема в том, что на Azure Angular cli не установлен. Вам нужно будет сделать ng build локально (или как часть вашей конвейерной линии сборки и выпуска. Для этого вы также можете использовать сборки Azure DevOps, где у вас есть 240 минут сборки бесплатно) и загрузить ее (только варианты):

  1. Служба приложений Azure.
  2. Загрузите его в хранилище BLOB-объектов и используйте прокси-сервер функций Azure для обслуживания файлов.
  3. Если вам нужен рендеринг на стороне сервера, вам нужно будет загрузить его как приложение NodeJs или часть приложения .net.

Спасибо за ваше время, в этом случае я удалил блок сценария package.json и снова поднялся, и он сработал.

...
"version": "0.0.0",
  "scripts": {
  },
...

Другие вопросы по теме