Введение
Это руководство объясняет, как использовать GitHub Actions для сборки и развертывания веб-приложения в Статических веб-приложениях Azure.
Note
Если рабочим процессам GitHub Actions требуется доступ к ресурсам от поставщика облачных служб, поддерживающего OpenID Connect (OIDC), можно настроить рабочие процессы для проверки подлинности непосредственно в поставщике облачных служб. Это позволит прекратить хранение таких учетных данных в виде долгоживущих секретов и обеспечить другие преимущества безопасности. Дополнительные сведения см. в разделе "Сведения об усилении защиты с помощью OpenID Connect" и Настройка OpenID Connect в Azure.
Необходимые компоненты
Перед созданием рабочего процесса GitHub Actions сначала нужно выполнить следующие действия по настройке:
-
Создайте статическое веб-приложение Azure, используя параметр "Другое" для источника развертывания. Дополнительные сведения см. в кратком руководстве по созданию первого статического сайта в портал Azure документации Azure.
-
Создайте секрет с именем
AZURE_STATIC_WEB_APPS_API_TOKENсо значением токена развертывания статического веб-приложения. Дополнительные сведения о том, как найти маркер развертывания, см. в статье "Сброс маркеров развертывания" в Статические веб-приложения Azure документации Azure.
Создание рабочего процесса
Выполнив предварительные требования, можно приступить к созданию рабочего процесса.
В следующем примере рабочего процесса показано, как собрать и развернуть статическое веб-приложение Azure при отправке в ветвь main или при открытии, синхронизации или повторном открытии запроса на вытягивание, нацеленного на main. Рабочий процесс также удаляет соответствующее предварительное развертывание при закрытии запроса на вытягивание, нацеленного на main.
Под ключом рабочего процесса env измените следующие значения:
APP_LOCATIONв расположение кода клиентаAPI_LOCATIONна расположение исходного кода API. ЕслиAPI_LOCATIONне имеет значения, можно удалить переменную и строки, в которых она используется.OUTPUT_LOCATIONна расположение вывода сборки кода клиента
Дополнительные сведения об этих значениях см. в разделе "Конфигурация сборки" для Статические веб-приложения Azure в документации По Azure.
# Этот рабочий процесс использует действия, которые не сертифицированы 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
OUTPUT_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
pull-requests: write
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@v4
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 }}
output_location: ${{ env.OUTPUT_LOCATION }}
close_pull_request:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request
steps:
- name: Close Pull Request
uses: Azure/static-web-apps-deploy@1a947af9992250f3bc2e68ad0754c0b0c11566c9
with:
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
action: "close"
# Этот рабочий процесс использует действия, которые не сертифицированы 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
OUTPUT_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
pull-requests: write
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@v4
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 }}
output_location: ${{ env.OUTPUT_LOCATION }}
close_pull_request:
if: github.event_name == 'pull_request' && github.event.action == 'closed'
runs-on: ubuntu-latest
name: Close Pull Request
steps:
- name: Close Pull Request
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. в репозитории GitHub Actions .starter-workflows - Действие, используемое для развертывания веб-приложения, является официальным действием
Azure/static-web-apps-deployAzure. - Дополнительные примеры рабочих процессов GitHub Actions, которые развертываются в Azure, см. в репозитории actions-workflow-samples.