Руководство по Публикация сайта VuePress в службе "Статические веб-приложения Azure"

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

В этом руководстве описано следующее:

• Создание приложения VuePress
• Настройка Статических веб-приложений Azure
• Развертывание приложения VuePress в Azure

Предварительные требования

• Учетная запись Azure с активной подпиской. Если ее нет, можно создать учетную запись бесплатно.
• Учетная запись GitHub. Если ее нет, можно создать учетную запись бесплатно.
• Установленная программа установки Git. Если у вас ее нет, вы можете установить Git.
• Установленный компонент Node.js.

Создание приложения VuePress

Создайте приложения VuePress из интерфейса командной строки (CLI).

1. Создайте новую папку для приложения VuePress.

   mkdir static-site
   

2. Добавьте в нее файл README.md.

   echo '# Hello From VuePress' > README.md
   

3. Инициализируйте файл package.json.

   npm init -y
   

4. Добавьте VuePress в качестве devDependency.

   npm install --save-dev vuepress
   

5. Откройте файл package.json в текстовом редакторе и добавьте команду сборки в раздел scripts.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Создайте GITIGNORE-файл , чтобы исключить папку node_modules .

   echo 'node_modules' > .gitignore
   

7. Инициализируйте репозиторий Git.

    git init
    git add -A
    git commit -m "initial commit"
   

Отправьте приложение в GitHub.

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

1. Создайте пустой репозиторий GitHub (не создавая файл сведений) со страницы https://github.com/new с именем vuepress-static-app.

2. Добавьте репозиторий GitHub в локальный репозиторий в качестве удаленного. В следующей команде не забудьте добавить имя пользователя GitHub вместо заполнителя <YOUR_USER_NAME>.

   git remote add origin https://github.com/<YOUR_USER_NAME>/vuepress-static-app
   

3. Отправьте локальный репозиторий на сайт GitHub.

   git push --set-upstream origin main
   

Развертывание веб-приложения

Ниже описано, как создать новое статическое приложение сайта и развернуть его в рабочей среде.

Создание приложения

1. Перейдите на портал Azure.

2. Выберите Создать ресурс.

3. Найдите Статические веб-приложения.

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

5. Нажмите кнопку Создать

6. На вкладке Основные сведения введите приведенные ниже значения.

   Свойство	Значение
   Подписка	Имя подписки Azure.
   Группа ресурсов	my-vuepress-group
   Имя	vuepress-static-app
   Тип плана	Бесплатный
   Область для API Функций Azure и промежуточных сред	Выберите ближайший к вам регион.
   Источник	GitHub

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

8. Введите следующие значения GitHub.

   Свойство	Значение
   Организация	Выберите нужную организацию GitHub.
   Репозиторий	Выберите vuepress-static-app.
   Ветвь	Выберите Main.

   Примечание

   Если репозитории не отображаются, может потребоваться авторизовать Статические веб-приложения Azure на GitHub. Перейдите в репозиторий GitHub и перейдите в раздел Параметры > Приложения > Авторизованные приложения OAuth, выберите Статические веб-приложения Azure, а затем — Предоставить. Чтобы предоставить разрешения для репозиториев организации, необходимо быть владельцем организации.

9. В разделе Сведения о сборке выберите VuePress из раскрывающегося списка Варианты сборки и сохраните значения по умолчанию.

Просмотр и создание

1. Выберите Просмотр и создание , чтобы убедиться, что все сведения указаны правильно.

2. Выберите Создать, чтобы начать создание статического веб-приложения Служба приложений и подготовить GitHub Actions для развертывания.

3. После завершения развертывания выберите Перейти к ресурсу.

4. На экране ресурса щелкните ссылку URL-адрес , чтобы открыть развернутое приложение. Возможно, потребуется подождать минуту или две, пока GitHub Actions завершится.

   

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

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

1. Откройте портал Azure.
2. На панели поиска вверху найдите приложение по имени, которое вы указали ранее.
3. Щелкните приложение.
4. Нажмите кнопку Удалить.
5. Нажмите кнопку Да, чтобы подтвердить действие удаления.

Дальнейшие действия

Добавить личный домен