Разверните Angular 2 с помощью Azure Webapp

Как я могу развернуть веб-приложение angular 2 для azure? Думаю, мне нужен какой-то окончательный компилятор script.

Спасибо заранее.

ОТВЕТЫ

Ответ 1

Чтобы запустить приложение angular2 в лазурной строке, выполните следующие действия:

  • создайте новое приложение ng (с ng cli): ng new testApp и нажмите на github repo.
  • создать файлы развертывания Azure для Kudu:
npm install azure-cli -g
azure site deploymentscript --node

это создаст 2 файла . развертывание и deploy.cmd

  1. отредактируйте deploy.cmd удалите --production из строки

:: 3. Установите пакеты npm

чтобы все зависимости были установлены (включая ng cli)

  1. добавить в раздел :: 3. Install npm packages

этот фрагмент:

echo Handling Angular build   
    :: 4. Build ng app
    IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
      pushd "%DEPLOYMENT_TARGET%"
      call :ExecuteCmd "!NODE_EXE!" ./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot
      IF !ERRORLEVEL! NEQ 0 goto error
      :: the next line is optional to fix 404 error see section #8
      call :ExecuteCmd cp "%DEPLOYMENT_TARGET%"/web.config "%DEPLOYMENT_TARGET%"/dist/
      IF !ERRORLEVEL! NEQ 0 goto error
      popd
    )
  1. создайте новый webapp в лазури и привяжите его к вашему репозиторию github
  2. теперь просто измените корень приложения в Azure "Настройки приложения"
    в разделе "Виртуальные приложения и каталоги"
    из

сайт\Wwwroot


в

сайт\Wwwroot\расстояние


 7. запустить развертывание. (путем нажатия на github или вручную с лазурного портала)
 8. (необязательно) для исправления 404 при обновлении вам нужно добавить web.config в корневой каталог с этим контентом: 

   <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="AngularJS" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>
  1. откройте приложение.. BOOM!

Ответ 2

Я знаю, что это немного поздно, но ни один из других ответов не дает явные инструкции. Надеюсь, это может помочь кому-то.

Я предполагаю, что вы используете Angular -CLI.

Run:

npm install

ng build (в зависимости от вашей установки вы можете запустить сборку npm)

Создает папку с именем. /dist, которая содержит необходимые файлы для вашего рабочего сайта. Затем используйте script -able FTP-клиент для перемещения всего содержимого внутри. /dist в папку. /site/wwwroot веб-приложения Azure.

Вам нужно будет использовать учетные данные FTP для wabapp, как показано в профиле публикации, с вашего Azure Portal. Этот вопрос Stackoverflow поможет вам с этим. Где находится "скачать публикацию профиля" в новом Azure Portal?

Ответ 3

Если вам нужно это для целей непрерывного развертывания, и вы используете git repo, то это очень просто, просто следуйте инструкциям здесь Непрерывное развертывание с использованием git в службе поиска Azure.

Но, в общем, он напрямую не связан с angular2. Попробуйте также Использование сценариев Windows PowerShell для публикации в dev и тестовых средах.

angular -cli, который (или станет) основным инструментом для angular построения, тестирования, развертывания, в настоящее время не имеет такой функции и требования (как я знаю до сих пор). Вы можете запросить функцию их github.

Ответ 4

Я могу переместить вас частью пути к решению, но я не могу полностью ответить на ваш вопрос. Итак, если SO-мониторы хотят удалить этот ответ, пожалуйста, не стесняйтесь.

Я пытаюсь получить приложение CLI Angular для развертывания на Azure с Bitbucket. У вас есть два варианта:

1) Предварительно создайте приложение для развертывания с помощью службы Jenkins или Codeship. Шейн Бойер имеет рабочее решение с использованием Github и Codeship здесь: http://tattoocoder.com/angular2-azure-codeship-angularcli/

Этот вариант кажется наиболее желательным b/c, вы только скомпилировали код на своем сервере. Я пытаюсь выяснить, как работать с Дженкинсом, чтобы выполнить это с помощью angular -cli.

2) Скопируйте свой код на сервер и запустите его. Это кажется нежелательным b/c, что он оставит исходный код на вашем сервере. У меня есть эта опция на 90%.

Моя сборка была/не работает b/c отсутствующих пакетов npm.

Во-первых, я изменил среду, чтобы использовать более новую версию Node, и это помогло. Вы можете сделать это, открыв настройки в своем веб-приложении и перейдя в "Настройки приложения". В разделе настроек приложения на вкладке "Параметры приложения" у вас должен быть набор пар ключ/значение. Один из них должен быть для WEBSITE_NODE_DEFAULT_VERSION. В моем приложении у меня есть доступ к версии 6.1.0, которую я использую. Установите свою версию в соответствующую версию. Вы также можете установить это в файле packages.json в соответствии с инструкциями здесь: https://azure.microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-azure-apps/. Изменение его в настройках приложения позволяет использовать эту версию в окне командной строки, в которой мне нужно было установить пакеты npm.

Затем перейдите в свою командную строку и попробуйте установить отсутствующие пакеты. У меня был смешанный успех. Первоначально моя сборка была неудачной, b/c тиски не были установлены. Я смог установить его во всем мире после обновления Node.

У меня возникли проблемы с установкой angular -cli. Я не получил хороший журнал этой неудачи, даже используя -dd. По сути, он копирует все файлы, а затем не возвращает ошибку "плохого запроса" и не регистрируется независимо от используемых мной переключателей. Я считаю, что он не работает, пытаясь изменить среду npm, чтобы добавить ng.cmd. В настоящее время я изучаю это.

Надеюсь, это немного продвинет вас дальше.

Удачи.

Ответ 5

Мне удалось сделать это успешно, не делая слишком много. Вот шаги:

  • Я использовал GitHub в качестве исходного элемента управления. Итак, после сборки моего проекта Angular 4 с помощью команды ng build на терминале VS-кода я нажал всю папку dist (которая сгенерирована в каталоге/папке проекта после запуска ng build). также к GitHub. Если каким-то образом среда IDE не может обнаружить папку dist как changes, вы также можете вручную загрузить эту папку в свой репозиторий GitHub. Используйте функцию перетаскивания для загрузки всей папки.
  • Теперь создайте новую App Service, созданную в вашей Azure Subscription.

  • Перейдите к Deployment Options и выберите GitHub, введите учетные данные и укажите имя repository, которое вы будете использовать. введите описание изображения здесь

  • Перейдите в Application Settings, затем Virtual Applications and Directories и измените корневой каталог на site\wwwroot\dist введите описание изображения здесь

  • Теперь все установлено. Вернитесь снова к Deployment Options, и вы увидите, что выполняется Build. После обновления кода в репозитории GitHub с помощью регистрации вы можете просто синхронизировать, чтобы сделать новую сборку. (P.S: В моем случае новая сборка автоматически запускалась после новой регистрации в GitHub)

  • Бинго! Теперь вы можете получить доступ к своему сайту на лазурном экране.: D