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

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

Если у вас еще нет подписки Azure, создайте бесплатную пробную учетную запись.

Необходимые компоненты

• Учетная запись GitHub
• Учетная запись Azure
• Visual Studio Code
• Расширение "Статические веб-приложения Azure" для Visual Studio Code
• установите Git;

Создание репозитория

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

Без платформы

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/vanilla-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Примечание.

Для создания веб-приложения Статическим веб-приложениям Azure требуется по крайней мере один HTML-файл. Репозиторий, созданный на этом шаге, включает один файл index.html.

Angular

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/angular-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Blazor

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/blazor-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

React

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/react-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Vue

1. Перейдите к следующему расположению, чтобы создать новый репозиторий:
   1. https://github.com/staticwebdev/vue-basic/generate
2. Присвойте репозиторию имя my-first-static-web-app

Щелкните Create repository (Создать репозиторий).

Клонирование репозитория

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

git clone https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/my-first-static-web-app.git

Замените <YOUR_GITHUB_ACCOUNT_NAME> именем своей учетной записи GitHub.

Затем откройте Visual Studio Code и перейдите в > "Открыть файл", чтобы открыть клонированные репозитории в редакторе.

Установка расширения Статические веб-приложения Azure

Если у вас еще нет расширения Статические веб-приложения Azure для расширения Visual Studio Code, его можно установить в Visual Studio Code.

1. Выберите "Просмотреть>расширения".
2. В разделе "Расширения поиска" в Marketplace введите Статические веб-приложения Azure.
3. Выберите "Установить" для Статические веб-приложения Azure.

Создание Статического веб-приложения

1. В Visual Studio Code на панели действий выберите логотип Azure, чтобы открыть окно расширений Azure.

   

   Примечание.

   Для продолжения работы необходимо войти в Azure и GitHub в Visual Studio Code. Если вы еще не прошли проверку подлинности, расширение предложит войти в обе службы во время процесса создания.

2. Откройте палитру команд Visual Studio Code, нажав клавишу F1.

3. Введите "Создать статическое веб-приложение " в командной строке.

4. Выберите Статические веб-приложения Azure. Создание статического веб-приложения....

5. Выберите свою подписку Azure.

6. Введите имя приложения my-first-static-web-app .

7. Выберите ближайший к вам регион.

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

   Без платформы

   Параметр	Значение
   Платформа	Выбор пользовательского
   Расположение кода приложения	Введите /src
   Расположение сборки	Введите /src

   Angular

   Параметр	Значение
   Платформа	Выберите Angular.
   Расположение кода приложения	Введите /
   Расположение сборки	Введите dist/angular-basic

   Blazor

   Параметр	Значение
   Платформа	Выбор Blazor
   Расположение кода приложения	Введите Client
   Расположение сборки	Введите wwwroot

   React

   Параметр	Значение
   Платформа	Выберите React.
   Расположение кода приложения	Введите /
   Расположение сборки	Введите build

   Vue

   Параметр	Значение
   Платформа	Выберите Vue.js
   Расположение кода приложения	Введите /
   Расположение сборки	Введите dist

9. После создания приложения в Visual Studio Code отобразится уведомление с подтверждением.

   

   Если GitHub предоставляет вам кнопку с меткой "Включить действия" в этом репозитории, нажмите кнопку, чтобы разрешить выполнение действия сборки в репозитории.

   Во время выполнения развертывания расширение Visual Studio Code сообщает вам о состоянии сборки.

   

   После завершения развертывания можно перейти напрямую на веб-сайт.

10. Чтобы просмотреть веб-сайт в браузере, щелкните правой кнопкой мыши проект в расширении "Статические веб-приложения" и выберите Обзор сайта.

    

Очистка ресурсов

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

В окне Azure Visual Studio Code вернитесь в раздел "Ресурсы" и в разделе Статические веб-приложения щелкните правой кнопкой мыши my-first-static-web-app и выберите "Удалить".

Связанный контент

• Серия видео: развертывание веб-сайтов в облаке с помощью Статические веб-приложения Azure

Следующие шаги

Добавление API