Практическое практическое руководство

Хостинг приложения Angular может осуществляться различными способами. Двумя популярными подходами являются IIS (Internet Information Services) и Nginx. Хотя оба варианта позволяют размещать ваше приложение Angular, между ними есть некоторые ключевые различия.

В этой статье мы обсудим плюсы и минусы этих двух методов.

Подготовьте приложение Angular к развертыванию

Чтобы ваше приложение было готово к развертыванию, нам нужно создать приложение с рабочей конфигурацией.

Выполните следующую команду CLI

ng build --prod

Флаг рабочей сборки — prod означает, что выходные данные сборки оптимизированы с помощью минификации, встряхивания дерева и компиляции AOT (с опережением времени). В результате размер выходного пакета будет значительно меньше, чем сборка для разработки. После завершения сборки выходные файлы сохраняются в папке dist/[app-name]. Эти файлы являются артефактами для развертывания.

Разверните приложение Angular в IIS

IIS — это веб-сервер, разработанный Microsoft и включенный в операционную систему Windows. Использование IIS для вашего приложения Angular имеет преимущество: оно может использовать различные функции безопасности, например, аутентификацию Windows.

Добавьте файл web.config

Чтобы иметь возможность использовать IIS для размещения приложения Angular, нам нужно сначала добавить файл web.config.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
  <rewrite>
    <rules>
      <rule name="RoutesReWrite" patternSyntax="Wildcard" stopProcessing="true">
        <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>

Приведенный выше файл web.config содержит правила перезаписи IIS. Возможно, вам потребуется обновить файл, чтобы он соответствовал требованиям вашего приложения. Например, добавьте правило перезаписи, если вашему приложению Angular необходимо проксировать вызов API.