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

В этой статье показано, как создать и развернуть веб-приложение VuePress в статических веб-приложениях Azure. Окончательным результатом является новое приложение статических веб-приложений Azure со связанными GitHub Actions, которое дает вам контроль над тем, как приложение будет создано и опубликовано.

В этом руководстве вы узнаете, как:

• Создание приложения 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 (не создавайте README) из 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. На вкладке "Основные сведения" введите следующие значения.

   Недвижимость	Ценность
   Subscription	Имя подписки 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.

   

Очистите ресурсы

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

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

Дальнейшие шаги

Добавление личного домена