Рубрики
Uncategorized

Hugo на Azure со статическими веб-приложениями

У меня есть несколько веб-сайтов на основе Wego Framework, которые в настоящее время работают в виде веб-приложений на плане обслуживания Azure App … Теги с Azure, Github, Devops.

У меня есть несколько веб-сайтов на основе Hugo В настоящее время Framework работает в качестве веб-приложений на плане обслуживания Azure App на общий уровень: один из наименее дорогих вариантов с возможностью использования пользовательских доменных имен, вы можете узнать больше о Различия в хостинге BiTewean здесь Отказ В то время я отремонтировал свои сайты Hugo 3 года назад, это был самый простой путь для переезда в Лазурную. Теперь я хочу улучшить свои статические веб-сайты в нескольких областях: # 1 Автоматизируйте рабочий процесс развертывания и # 2 Используйте меньше ресурсов. # 3 Я также хочу использовать действия GitHub.

Действия GitHub

Как Документация GitHub описывает это:

Действия GitHub позволяют легко автоматизировать все ваши рабочие процессы программного обеспечения, теперь с CI/CD World-Class. Создайте, тестируйте и разверните свой код прямо из GitHub.

Действия GitHub являются мощным способом определения трубопроводов на основе YAML, вызванные событиями. Есть отличный пост, описывающий, как использовать Действия GitHub для публикации сайтов Hugo И из этого источника я обнаружил действия GitHub для Hugo, доступных из Действия рынка .

Миририс/Действия-Уго

Действия GitHub для Hugo ⚡️ Установите Hugo быстро и построить свой сайт быстро. Поддерживаются расширенные модули Hugo, Hugo, Linux (Ubuntu), MacOS и Windows.

Действия GitHub для Hugo

Это Действие Hugo Setup можно установить Hugo на виртуальную машину Действия GitHub Уго расширился Версия, Hugo модули Поддерживаются Linux (Ubuntu), MacOS и Windows.

От v2 Это действие Hugo Setup мигрировало на действие JavaScript (TeampScript), которое мы больше не строим и не вытягиваете изображение Hugo Docker, благодаря этому изменениям, мы можем завершить это действие менее чем за несколько секунд. (Действие докера Базовое действие принимало около 1 минуты или более времени выполнения, чтобы построить и потянуть документ докера.)

Служба поддержки ✅ ️ ✅ ️ ✅ ️
Служба поддержки ✅ ️ ✅ ️ ✅ ️

Оглавление

Azure Static Web Apps

Azure Static Web Apps это Сервис, которая автоматически создает и развертывает полное стекловые приложения для Azure из репозитория кода : именно то, что мне нужно для целей # 1, # 2, а также # 3, когда действия GitHub поддерживаются. Это шаги для достижения моей цели:

  • Создайте Azure Static Web Apps
  • Интеграция Действия GitHub с Azure Static Web Apps
  • Запустить мои действия GitHub Только при необходимости
  • Опубликовать мои обновления до отдельной среды, прежде чем перейти в производство

Давайте начнем с мероприятий!

Hugo в Azure Static Web Apps

Значение Azure Static Web Apps сидит в его тесной интеграции с помощью репозитория кода и конвейером CI/CD. Вы можете найти Hugo сосредоточился здесь : Ради краткости, скажем, у меня есть существующий репозиторий GitHUB, содержащий мой сайт Hugo. Как вы можете видеть с изображения выше, я подключаю вновь созданное статическое веб-приложение к моей учетной записи GitHub и Главная Ветка моего веб-сайта с Hugo Repository.

Готов к использованию Действия GitHub

Эта интеграция создает новый Github Action Workflow в моем репозитории , хорошо объяснено в документации. Основные шаги следующие:

on:
  push:
    branches: [main]
    paths-ignore: '.github/workflows/**'
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches: [main]
    paths-ignore: '.github/workflows/**'

С элементами управления на триггере Пути - игнорировать: '.gitub/Workflows/** ' Я предотвращаю работу рабочего процесса, когда я редактирую мои действия. Рабочий процесс продолжается с определением создания и развертывания задания, вызванной push или Pr:

build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_DUNE_09D67E003 }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

Работа срабатывает после обнаружения события PR-близкого события, похоже:

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_GRAY_DUNE_09D67E003 }}
          action: "close"

Помимо секретов, определенных при обеспечении Azure Static Web App и используется для развертывания встроенного сайта Hugo, интересная часть — это использование действий GitHub Azure/static-web-apps-deploy@v0.0.1-preview : что это?

Что такое оркс?

Рабочий процесс Действия GitHub, созданный в репозитории проекта, использует Azure Static Web Apps Развертывает действие GitHub с рынка. Это многоразовое действие использует систему ORYX для создания как статических приложений, так и функций Azure для API, а затем развертывает его. Вы можете найти больше информации о репозитории ORYX в https://github.com/microsoft/oryx и на Как это обнаруживает и построить приложения Hugo Отказ

Проверьте изменения перед публикацией

Как единственный автор моих веб-сайтов, я испытываю соблазн ускорить процесс для публикации чего-то нового: Open VS Code, измените файлы Markdown, Git Commit & Push to Главная Филиал, а затем сборки и развертывание на общедоступном сайте! Кажется проще, если вы не учитываете какую-либо ошибку: заставляя себя следовать более строгим процессу, при этом автоматизируя его как можно больше, — это путь. С Правила защиты от ответственности Вы можете требовать, чтобы запрос на тягу на ветку должен быть рассмотрен перед объединением в защищенную ветвь, Главная В моем случае, не позволяя автору подталкивать прямо в него. Даже, запросив минимум утверждения, мне 1 кратко в моей команде. На данный момент Я заставляю себя начать PRS и не использовать защиту от ответственности. На предыдущем скриншоте я создал ветку для моего фиксации и начал пр. Это потянуть запрос Я начинаю, окончательная цель состоит в том, чтобы объединить эту ветвь в Главная один. Что происходит, когда мы начинаем PR?

PRS и окружение

Azure Static Web Apps настолько хорошо интегрирован с действиями GitHub, который он переводит запросы на тягу (PR) в Постановка средств, поэтому вы можете просмотреть изменения, прежде чем публиковать его перед своими пользователями Отказ Мы только что создали ветку и начали PR: Следующий скриншот показывает, какой рабочий процесс создан для нас Azure Static Web Apps, предоставляет. Действие GitHub было вызвано и собирается создать и публиковать в промежуточную среду. После завершения мы представлены URL Azure Static Web Apps Endsicies В портале Azure мы видим обстановку постановки, перечисленные для нашего Azure Static Web App. У нас есть возможность проверить наши изменения: после того, как мы будем готовы применить их на общедоступный сайт, мы вернемся к пр и объединяем его в Главная филиал. Действие GitHub затем запустит две работы, чтобы закрыть запрос на тягу, удалить обстановку постановки, построить и публиковать сайт Hugo в производственной среде.

Наконец!

В этой статье мы изучили большую интеграцию CI/CD, предоставленную Azure Static Web App с действиями GitHub, для Hugo Static Site и для Многие другие рамки также. С помощью Azure Static Web App i будет выно с выновому выноску приложений, которая в настоящее время поддерживает мои статические сайты, сохраняя при этом Возможность иметь пользовательский домен и бесплатный сертификат TLS! . Поскольку мои сайты относятся личные/хобби, я смогу Используйте его бесплатно Действительно

Оригинал: «https://dev.to/bedindavide/hugo-on-azure-with-static-web-apps-306k»