Рубрики
Uncategorized

React JS ➡ Azure DevOps ➡ Hazure Storage ➡ Azure CDN (часть 1/2)

Как использовать Azure DevOps для создания и выпуска вашего веб -приложения Static React JS в Azure Storag … Tagged с помощью Azure, React, DevOps.

Часть 1 направляет, что вы шаг за шагом через простой процесс использования Azure DevOps для создания и выпуска статического веб -приложения React JS ( или любое другое веб -приложение на основе Node.js), которое затем размещается с использованием учетной записи Azure Storage.

Часть 2 направляет вас через создание профиля Azure CDN и подключив его к нашей учетной записи и выпустите конвейер.

Часть 2 еще не доступна и, возможно, не будет завершена, по состоянию на написание этого поста в январе 2020 года, Azure статические веб -приложения еще не был публично объявлен. Azure Static Web Apps были вчера анонсированы во всем мире в Build 2020 (19 мая 2020 года) и в основном являются очень похожим подходом к подходу, объясненному в этом посте с разницей, что Azure статические веб -приложения Может быть более удобным в использовании, так как в нем есть все компоненты объясненного подхода в одной службе. При написании этого (20 мая, 2o20) Azure статические веб -приложения в предварительном просмотре и способен использовать, попробуйте. Я еще не удаляю этот пост в блоге, поэтому этот альтернативный подход объясняется на данный момент. Пожалуйста, имейте это в виду, читая этот пост, спасибо!

✅ Требования:

  1. Учетная запись Azure ( Если вы студент, нажмите здесь, чтобы узнать, как получить бесплатные azure ressources )
  2. React Web App
  3. Учетная запись сервиса Azure DevOps

Оглавление

  1. Учетная запись Azure Storage
  2. Строить трубопровод
  3. Выпустить трубопровод

1. Учетная запись Azure Storage

Сначала нам нужно создать учетную запись Hazure Storage, которая используется для размещения нашего веб -приложения React в дальнейшем с использованием статической функции веб -сайта учетной записи хранения.

Войдите на портал Azure и запустите процесс создания новой учетной записи. Выберите нужную подписку, имя, местоположение, уровень репликации и т. Д. Просто убедитесь, что выбрать Хранилище в 2 как тип учетной записи.

Когда создана учетная запись хранения, откройте ресурс и откройте Статический сайт Настройки на левой боковой панели. Включите функцию и установите «Имя документа» и «Путь документа ошибки» в свой индексный файл вашей сборки React JS. В моем случае это index.html Анкет

После сохранения настроек Azure предоставит вам первичную конечную точку, в которой веб -сайт будет доступен в конце. Кроме того, он дает вам контейнер для хранения Azure, в котором файлы веб -сайта должны быть загружены для того, чтобы быть доступным в конечной точке позже.

Перед настройкой нашего конвейера сборки и выпуска нам нужно сохранить несколько ключей и идентификаторов учетной записи хранения. Мы должны помнить следующие настройки для нашего процесса выпуска:

  • Storage_account_name Вы устанавливаете при создании учетной записи
  • Storage_account_key который можно найти в Ключи доступа Настройки учетной записи хранения. Вы можете выбрать Key1 или Key2.

Вы можете оставить страницу открытой или сохранить эти настройки. Я буду называть их позже как Storage_account_name и Storage_account_key Анкет

2. Строить трубопровод

Теперь давайте перейдем к нашей учетной записи Azure DevOps, чтобы создать конвейер сборки.

Откройте меню трубопроводов и создайте новый трубопровод.

Чтобы сделать создание процесса сборки в первый раз, немного легче выбрать Используйте классический редактор Анкет Вы все еще можете получить файл YAML нашего процесса сборки впоследствии для будущих процессов.

После этого выберите ваш ответ, например, на GitHub и установите филиал по умолчанию для ручных и запланированных сборок (например, Master , в зависимости от вашей структуры ветви). Создав источник нашей сборки, мы можем выбрать шаблон, но мы хотим построить наш трубопровод с пустой работы, как видно на скриншоте.

Установите имя вашего конвейера (например, build React- <имя приложения> ) и установите спецификацию агента.

ℹ: Мне нравится использовать VS2017-WIN2016 , но вы также можете выбрать Ubuntu-18.04 Например, который также будет работать со стандартной настройкой, которую мы делаем в этом руководстве.

Затем нажмите «Добавить задачу» (посмотрите на скриншот, если вы не строили конвейер с визуальным редактором).

Используя поиск в списке задач, вы можете найти и добавить npm Задача, которая позволяет запускать все команды NPM. Для образца проекта этого руководства мне нужно только запустить NPM Установка и NPM Run Build . Если у вас есть дополнительные команды, которые необходимо выполнить перед сборкой, вы можете добавить их здесь, например, установление переменных окружающей среды или запуск дополнительных команд NPM.

Добавить NPM Установка и NPM Run Build в качестве задачи NPM, как показано на скриншотах ниже.

После завершения команды NPM запустить сборку, файлы сборки будут доступны в сборке. Источники процесса сборки. В этом примере сборка будет доступна в сборка Папка доступна через $ (Строить. Источники, далее)/сборка Анкет В зависимости от вашего проекта файлы сборки также могут лежать, например, в рамках $ (Строить. Источники . Это важно для нашего следующего шага, так как мы будем архивировать папку сборки и отбросить ее в качестве артефакта, который затем сможет использовать релиз.

Во -первых, добавьте Архивные файлы Задача и настройте его со ссылкой на папку сборки как Корневая папка или файл в архив — В нашем случае $ (Сборка. Источники, далее)/сборка — и $ (build.artifactstagingDirectory)/$ (Build. BuildId) .zip как Архивный файл для создания. Сделайте скриншот ниже в качестве ссылки.

Во -вторых, добавьте Публикуйте артефакты сборки Задача, которая не имеет настроек, которые нам нужно изменить.

Теперь наш конвейер сборка закончен, и мы создаем наш релиз. ‼ Не забудьте сохранить трубопровод.

3. Выпустить трубопровод

Чтобы создать релиз выберите Выпуски Меню на левой боковой панели и создайте новый конвейер выпуска (показан на скриншоте ниже).

После создания нового конвейера выпуска начнется с Пустая работа Снова и добавьте артефакт.

Выберите конвейер сборки, который мы только что создали в качестве источника для артефакта релиза.

Добавьте триггер в релиз, включив Непрерывное триггер развертывания и откройте Taks первой и в настоящее время только этап нашего выпуска, как показано на скриншоте ниже.

Добавить Извлеките файлы Задачи и установить Архивные шаблоны файлов к **/$ (сборка. BuildId) .zip и Пункт назначения к $ (Система. DefaultWorkingDirectory)/Build Анкет

Теперь мы будем иметь дело с обновлением файлов в нашей учетной записи Azure Storage. Перед загрузкой файлов нам сначала необходимо удалить все файлы, которые в настоящее время находятся в веб -контейнере $ в учетной записи.

Мы можем сделать это через Azure CLI. Добавьте Azure CLI задание и установите следующие свойства:

  • Azure Подписка : Выберите подписку Azure на вашей учетной записи. (ℹ Возможно, вам придется разрешить разъем.)
  • Расположение сценария : ‘Inline Script’
  • Встроенный скрипт : BLOB-BATHE DELETE AZ Storage-ACCOUNT-NAME --КККОНТ-КЛАЙС -SOURCE $ WEB — Помните информацию об учетной записи хранения с шага 1? Вам нужно установить их здесь.

Для загрузки наших файлов сборки мы будем использовать другой Azure CLI Задача со следующими свойствами:

  • Azure Подписка : Выберите подписку Azure на вашей учетной записи. (ℹ Возможно, вам придется разрешить разъем.)
  • Расположение сценария : ‘Inline Script’
  • Встроенный скрипт : AZ Storage Blobload-Batch-ACCOUNT-name -ACCOUNT-KEY -УДАЛЕНИЕ $ WEB-SORCE $ (Система. DefaultWorkingDirectory) \ build \ build

Теперь вы можете получить доступ к вашему приложению React через первичную конечную точку. Следующим шагом будет подключение статического веб -сайта с сетью доставки контента, которая дополнительно дает нам возможность подключить пользовательский домен и сертификат SSL для пользовательского домена.

Оригинал: «https://dev.to/jakob_vdh/react-js-azure-devops-azure-storage-azure-cdn-part-1-2-k70»