Разверните простое приложение Angular 8 до Azure с помощью кода Visual Studio

Question

Я последовал нескольким онлайн-урокам, но не повезло. Я пытаюсь развернуть веб-приложение Angular 8.3 на Azure. Я пытался создать веб-приложение, Windows и Linux, но всегда выдает либо стандартную страницу hostingstart. html, либо сообщение об ошибке внутреннего сервера. Я попытался вручную загрузить файлы dist, а также с помощью расширения Azure Служба приложений в коде Visual Studio.

Все учебные пособия устарели из текущих кодов Visual Studio и настроек Azure. Есть ли кто-нибудь, кто поможет мне запустить приложение Angular на Azure? У меня также есть. NET Core api к go вместе с ним, но об этом можно поговорить позже.

Честно говоря, я понятия не имею, какие правильные шаги выполняются или что-то не так с моим приложением относительно версий узла или чего-то в этом роде. У меня нормально работает приложение на локальном сервере IIS, включая модуль перезаписи URL для IIS и правильно настроенный файл web.config.

Спасибо! Джереми

Answer 1

Существует Azure Расширение управления службой приложений для кода Visual Studio, с помощью которого вы сможете развертывать и масштабировать Интернет.

Существует руководство по развертывание. net базовая сеть с кодом Visual Studio . Кроме этого, вы можете выбрать развертывание в веб-приложении в проводнике службы приложений Azure.

Поочередно откройте палитру команд (F1) введите deploy to web app и выберите команду Azure Служба приложений: развертывание в веб-приложении. Затем выберите текущую папку для приложения и следуйте инструкциям.

Answer 2

Каким-то образом проблема была связана с моим файлом web.config.

Вот что я имел в своем нерабочем файле web.config:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <defaultDocument enabled="true">
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
    <rewrite>
      <rules>
        <rule name="Angular Routes" 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="/di/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Вот измененный веб Работающий файл .config (я удалил раздел документа по умолчанию во время устранения неполадок, а затем получил следующее, к которому добавлен раздел system.web. Не уверен, что на самом деле это исправило.

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" 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="/di/" />
        </rule>
      </rules>
    </rewrite>
    <httpErrors errorMode="Detailed" />
  </system.webServer>
  <system.web>
    <customErrors mode="Off" />
    <compilation debug="true" />
  </system.web>
</configuration>

Answer 3

Если вы хотите напрямую выполнить развертывание из Visual Studio, выполните следующие действия:

Шаг 1: Выполните ng build --prod (это создаст папку dist в ваше приложение)

Шаг 2: откройте Visual Studio и выберите open >> website, а затем путь вашего проекта в папке dist и откройте

Шаг 3: Щелкните правой кнопкой мыши по своему проекту и выберите Publi sh Web App, затем выберите параметр опубликованного профиля и разверните его

, если вы хотите выполнить развертывание с помощью Azure DevOps с Конвейеры CI / CD следуют этому учебнику