Вам потребуется следующее программное обеспечение/учетная запись Azure. Подробную информацию см. ниже.

Учетная запись GitHub: — Регистрация/Вход на GitHub

Учетная запись Azure: — Получите учетную запись Azure, нажав на следующую ссылку

Студентам предоставляется бесплатный кредит и кредит в размере 200 долларов США, если вы хотите начать работу с Azure.
ученики/

Статические веб-приложения Azure помогают решать проблемы, начиная с исходного кода и заканчивая глобальной доступностью.
Во время сборки любого приложения оно автоматически собирается и размещается на GitHub.

Статические веб-приложения обычно создаются с использованием библиотек и фреймворков, таких как Angular, React, Svelte или Vue. Эти приложения включают ресурсы HTML, CSS, JavaScript и изображения, из которых состоит приложение. При использовании традиционной архитектуры веб-сервера эти файлы обслуживаются с одного сервера вместе со всеми необходимыми конечными точками API.

В Статических веб-приложениях Azure статические ресурсы отделены от традиционного веб-сервера и вместо этого обслуживаются из точек, глобально распределенных по всему миру. Этот дистрибутив значительно ускоряет обслуживание файлов, поскольку файлы физически находятся ближе к пользователям.
Когда вы создаете ресурс Статических веб-приложений Azure, Azure настраивает рабочий процесс GitHub Actions или Azure DevOps в репозитории исходного кода приложения. Рабочий процесс отслеживает выбранную вами ветвь. Каждый раз, когда вы отправляете коммиты или создаете запросы на включение в отслеживаемую ветвь, рабочий процесс автоматически создает и развертывает ваше приложение и его API в Azure.

Описание изображения


Действия по созданию и подключению страниц GitHub и статических веб-приложений Azure:


Шаг 1: Разверните свой проект на страницах GitHub.

Разверните проект с помощью GitHub Pages.

Описание изображения


Шаг 2. Создайте учетную запись Azure и войдите на портал Azure.

Создайте учетную запись Azure с помощью ссылок, представленных в этом блоге, а затем войдите на портал Azure.
Теперь нажмите «Создать ресурс» и найдите статические веб-приложения. Затем нажмите кнопку создания статических веб-приложений, и оно будет перенаправлено в статическое веб-приложение Azure.

Описание изображения

Описание изображения


Шаг 3. Заполните данные и подключите созданную страницу GitHub к Статическим веб-приложениям Azure.

Правильно заполните реквизиты. В разделе «Сведения о проекте» выберите подписку на Azure для учащихся, а затем создайте группу ресурсов по своему желанию.

В разделе сведений о статическом веб-приложении укажите имя статического веб-приложения по вашему выбору. (В моем случае я назвал его Second-Site)

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

Теперь в разделе развертывания выберите GitHub, а затем подключите свою учетную запись GitHub, войдя в GitHub.
Раздел «Организация» будет автоматически заполнен вашим именем пользователя GitHub. Затем выберите репозиторий вашего проекта, в котором вы создали страницы GitHub, и установите ветку в качестве главной.

Описание изображения

Описание изображения
Теперь нажмите «Обзор + создать».


Шаг 4. Проверьте все предоставленные вами данные.

Внимательно просмотрите все детали и при необходимости внесите исправления, нажав на предыдущую кнопку.

Описание изображения
Теперь нажмите СОЗДАТЬ.


Шаг 5. Сайт развертывается в статических веб-приложениях Azure.

После нажатия на кнопку «Создать» появится уведомление (…Отправка развертывания).

Описание изображения

Затем после успешного развертывания вы получите URL-адрес развертывания проекта.

Описание изображения

Описание изображения