Skip to main content

Развертывание статического веб-приложения Azure

Веб-приложение можно развернуть в статическом веб-приложении Azure в рамках рабочих процессов непрерывного развертывания (CD).

Введение

Это руководство объясняет, как использовать GitHub Actions для сборки и развертывания веб-приложения в Статических веб-приложениях Azure.

Примечание. Если рабочим процессам GitHub Actions требуется доступ к ресурсам от поставщика облачных служб, поддерживающего OpenID Connect (OIDC), можно настроить рабочие процессы для проверки подлинности непосредственно в поставщике облачных служб. Это позволит прекратить хранение таких учетных данных в виде долгоживущих секретов и обеспечить другие преимущества безопасности. Дополнительную информацию см. в разделе Сведения об усилении защиты с помощью OpenID Connect. и Настройка OpenID Connect в Azure.

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

Перед созданием рабочего процесса GitHub Actions сначала нужно выполнить следующие действия по настройке:

  1. Создайте статическое веб-приложение Azure, используя параметр "Другое" для источника развертывания. Дополнительные сведения см. в разделе Краткое руководство. Создание первого статического сайта на портале Azure в документации Azure.

  2. Создайте секрет с именем AZURE_STATIC_WEB_APPS_API_TOKEN со значением токена развертывания статического веб-приложения. Дополнительные сведения о том, как найти токен развертывания, см. в разделе Сброс токенов развертывания в Статических веб-приложениях Azure в документации Azure.

Создание рабочего процесса

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

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

Под ключом env рабочего процесса измените следующие значения:

  • APP_LOCATION в расположение кода клиента
  • API_LOCATION на расположение исходного кода API. Если API_LOCATION не имеет значения, можно удалить переменную и строки, в которых она используется.
  • APP_ARTIFACT_LOCATION на расположение вывода сборки кода клиента

Дополнительные сведения об этих значениях см. в разделе Конфигурация сборки для Статических веб-приложений Azure в документации Azure.

YAML
# Этот рабочий процесс использует действия, которые не сертифицированы GitHub.
# Они предоставляются сторонним поставщиком, и на них распространяются
# отдельные условия обслуживания, политика конфиденциальности и поддержка
# документации.

# GitHub рекомендует закрепить действия в фиксации SHA.
# Чтобы получить более новую версию, потребуется обновить SHA.
# Вы также можете ссылаться на тег или ветвь, однако действие может измениться без предупреждения.

name: Deploy web app to Azure Static Web Apps

env:
  APP_LOCATION: "/" # location of your client code
  API_LOCATION: "api" # location of your api source code - optional
  APP_ARTIFACT_LOCATION: "build" # location of client code build output

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

permissions:
  issues: write
  contents: read

jobs:
  build_and_deploy:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: ${{ env.APP_LOCATION }}
          api_location: ${{ env.API_LOCATION }}
          app_artifact_location: ${{ env.APP_ARTIFACT_LOCATION }}

  close:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close
    steps:
      - name: Close
        uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

Дополнительные ресурсы

Следующие ресурсы также содержат полезные сведения на эти темы:

  • Исходный начальный рабочий процесс см. в azure-staticwebapp.yml из репозитория starter-workflows GitHub Actions.
  • Действие, используемое для развертывания веб-приложения, является официальным действием Azure/static-web-apps-deploy Azure.
  • Дополнительные примеры рабочих процессов GitHub Actions, которые развертываются в Azure, см. в репозитории actions-workflow-samples.