В предыдущей статье мы увидели, как использовать Azure DevOps для развертывания углового приложения для Azure App Service. Основной.
Несмотря на то, что угловое приложение прекрасно работает на службе Azure App, нам не нужно время выполнения .NET (или любое другое время выполнения, например, Nodejs, Ruby, PHP, …), чтобы размещать наше угловое приложение, если оно не использует сторону сервера Рендеринг.
Если вы используете рендеринг на стороне сервера, вам нужно время выполнения, например, Nodejs, чтобы иметь возможность запустить процесс, который отвечает за рендеринг и обслуживание углового приложения. В этой статье мы развертываем приложение, которое не использует рендеринг на стороне сервера, поэтому нам не нужно в таком времени выполнения.
Учетная запись Hazure Storage в основном используется для хранения Blobs и файлов, но также содержит очередь и базу данных NOSQL, с которой вы можете интегрировать.
Помимо вышеуказанных функций, учетная запись Azure Storage предоставляет способ провести статический (HTML, CSS, JavaScript и другие активы), такой как угловое приложение. Хостинг бесплатный. Вас выставляете только за хранилище Blob, взятое файлами вашего приложения. Вы можете найти более подробную информацию о ценах Blob Blob Blob в Azure по адресу https://azure.microsoft.com/en-us/pricing/details/storage/blobs/ Анкет
Мы можем создать учетную запись хранения через портал Azure; Убедитесь, что у вас есть активная подписка, к которой мы можем добавить учетную запись хранения. Вы можете создать один ( здесь Если у вас еще нет. Убедитесь, что вы выбрали бесплатную пробную подписку, чтобы не взимать плату. Бесплатная пробная версия не должна использоваться для производства).
Внутри портала Azure перейдите ко всем службам и найдите учетные записи. Выбор учетных записей из результатов поиска приведет вас к обзору учетных записей хранения. Нажмите «Добавить», чтобы создать новую учетную запись хранения, и заполните необходимую информацию на вкладке «Основы»:
Выберите группу подписки и ресурсов, в которой мы хотим создать учетную запись хранения, и предоставить ее имя (имя должно быть уникальным во всех учетных записях хранилища в Azure). Другие варианты можно оставить нетронутыми. Вы можете найти больше информации об этих настройках конфигурации в https://docs.microsoft.com/en-us/azure/storage/common/storage-introduction#types-of-storage-accounts .
Нам не нужно ничего менять на других вкладках (сеть, продвинутые и теги). Идите дальше и создайте учетную запись хранения. Azure должен ориентироваться в деталях развертывания, показывая прогресс развертывания. После развертывания вы сможете нажать «Перейти к ресурсу», чтобы перейти в созданную учетную запись.
Как упоминалось ранее, существуют разные способы использования лазурного хранилища. Мы не собираемся освещать детали ни одной из ее функций, кроме размещения статического веб -сайта.
Настройка статического веб -сайта
Вы можете получить доступ к конфигурации в отношении статических веб-сайтов из бокового меню учетной записи хранения (Настройки ⇒ Статический веб-сайт)
Поскольку статический хостинг веб -сайта отключен по умолчанию, нам необходимо включить его, чтобы иметь возможность размещать статический веб -сайт в учетной записи хранения. После включения нам необходимо предоставить имя индексного документа и, необязательно, путь к документу ошибки.
Путь документа ошибки должен указывать на HTML -файл, который будет отображаться, когда запрос на хранилище Azure возвращает 404. В настоящее время у нас нет такого файла, поэтому давайте оставим его пустым для этой статьи.
После сохранения вы должны увидеть перечисленную первичную и вторичную конечную точку. Это URL -адреса, на которых будет доступно приложение после развертывания. Помимо URL, вы также увидите, что контейнер с именем $ web , был создан для размещения статического веб -сайта.
Поскольку мы еще не развернули никаких файлов, пытаясь открыть любой из URL -адресов конечной точки в вашем любимом браузере, покажет сообщение по умолчанию 404 (это сообщение, которое будет заменено на HTML -файл, если мы настроили путь к документу ошибки) Анкет
Мы будем создавать конвейер выпуска, который будет использовать артефакты, опубликованные в рамках конвейера сборки, который был настроен на https://dev.to/thisdotmedia/continuently-antegrating-angular-with-azure-devops-2k9l. В этой статье предполагается, что угловое приложение, которое использовалось в вышеуказанной статье, было обновлено, чтобы включить конфигурацию окружающей среды, как описано в https://dev.to/thisdotmedia/runtime-environment-configuration-with-angular-4f5j.
Внутри проекта Dazure DevOps создайте новый конвейер выпуска, выбрав трубопровод ⇒ Выпуск ⇒ Новый ⇒ Новый конвейер выпуска
Мы не собираемся использовать шаблон для нашего конвейера выпуска, поэтому вы можете начать с пустой работы вместо того, чтобы выбрать предварительно настроенный шаблон.
Поскольку Azure Devops поддерживает несколько этапов, вы можете предоставить имя для сцены, созданного по умолчанию, или вы можете сохранить стадию 1 в качестве его имени.
Добавление артефактов сборки
Давайте начнем с добавления артефактов, которые мы хотим развернуть в хранилище Azure. Нажмите «Добавить артефакт», выберите тип источника сборки (так как артефакты хранятся в трубопроводе сборки) и выберите соответствующий конвейер сборки из раскрывающегося списка источника. Вы можете сохранить значения по умолчанию для обеих версий для развертывания, так как мы всегда хотим развернуть последнюю версию и псевдоним источника. Псевдоним источника — это папка, которая будет использоваться для загрузки артефактов. Мы будем использовать это значение на протяжении следующих шагов при манипулировании и загрузке артефактов.
Добавление задач развертывания
Когда мы начали с пустой работы, пока не определяется задачи. Нам нужно добавить задачу для развертывания файлов Artifact в учетную запись Azure Storage. Для этого мы можем использовать интегрированные Azure File Copy Задача, перейдя в раздел «Задачи», щелкнув «+» на задании агента, поиск копии файла Azure и нажав Add.
При добавлении задачи копирования файла Azure вам необходимо предоставить необходимую информацию, чтобы Azure DevOps знали, какие файлы должны быть развернуты, в какое назначение. Это включает в себя как подписку Azure, так и информацию об учетной записи хранения.
Поскольку мы собираемся развернуть артефакты сборки, которые настроены на то, чтобы быть доступными в определении релиза, нам нужно предоставить путь к источнику, который мы хотим развернуть. Вы можете ориентироваться в артефактах и выбрать соответствующую папку, нажав ... кнопка.
После того, как мы настроили файлы, которые должны быть развернуты, выберите подписку Azure, выберите Azure Blob в качестве типа назначения, выберите соответствующую учетную запись, которую вы хотите использовать, и предоставьте $ web Для имени контейнера (это имя контейнера по умолчанию, используемое Azure DevOps при включении статических веб -сайтов в учетную запись Hazure Storage).
Специальная конфигурация среды
Как упоминалось в предыдущей статье (https://dev.to/thisdotmedia/runtime-environment-configuration Используйте конфигурацию для конкретной среды.
Поскольку мы хотим избежать восстановления приложения для того, чтобы оно использовало конфигурацию для конкретной среды, мы используем файл JSON, который обслуживается в рамках каталога активов, и извлекается в наше угловое приложение с помощью HTTP-запроса. Вы можете найти подробный обзор того, как настроить это в статье, упомянутой выше.
Нам понадобится задача преобразования файла, чтобы изменить содержимое файла config.json как часть стадии нашего конвейера нашего выпуска (в случае нескольких этапов, каждый этап может иметь свой собственный шаг и может заменить содержимое различными значениями перед развертыванием) Анкет Добавьте задачу и настройте ее, чтобы нацелиться на Assets/config.json Файл внутри нашего артефакта веб-приложения.
Убедитесь, что эта задача выполнена перед развертыванием файлов в хранилище Azure.
Чтобы Azure DevOps знали, какие имена и значения он должен использовать при преобразовании файла конфигурации, нам нужно будет создать переменные конвейера. Задача преобразования файла будет использовать все переменные и обновлять значения на основе его имени.
Все, что нам нужно сейчас, — это настраивать Apiurl для каждой среды, поэтому нам понадобится переменная конвейера Apiurl (я пошел с localhost локально и https://www.thisdot.co для окружающей среды):
Непрерывное триггер развертывания
Несмотря на то, что мы могли бы сохранить конфигурацию и создать ручные выбросы на данный момент, чтобы постоянно развернуть наши артефакты, нам нужно настроить триггер. Нажмите на символ удара молнии, который отображается на вашем артефакте в разделе трубопровода, включите триггер непрерывного развертывания и добавьте филиал фильтра для филиала, которую вы хотите развернуть (что является мастером в данном случае). Нам не нужно включать триггер запроса на привлечение для этой статьи.
Вы можете сохранить конвейер выпуска и создать новый релиз, либо запустив новую сборку, и используя триггер непрерывного развертывания, либо путем вручную создавая новый релиз.
После того, как развертывание будет завершено, перемещаться по одному из URL -адреса конечной точки хранилища Azure, должно показать угловое приложение, включая правильную конфигурацию среды, которая регистрируется в консоли.
Использование учетной записи Azure Storage для размещения статического веб -приложения не делает развертывание, отличающееся от развертывания в службу Azure App. Однако, когда мы не используем какую-либо технологию рендеринга на стороне сервера, используя время выполнения, такую как .NET/PHP/Java не нужна, поэтому нам не нужно использовать сервис приложений.
Использование azure Storage снижает затраты, поскольку само хостинг бесплатно, и вы выставляете только за хранилище Blob, взятое файлами приложения. Несмотря на то, что App Services имеет бесплатные варианты, как только вы начнете добавлять такие вещи, как пользовательские домены, вам нужно использовать один из платных вариантов. Стоимость этого, как правило, выше, чем у учетной записи Hazure Storage, если все, что вы хостиваете, является статическим веб -сайтом.
Оригинал: «https://dev.to/thisdotmedia/continuously-deploying-angular-to-azure-storage-with-azure-devops-3983»