Создание статического веб-приложения в Azure с помощью Node.js

Статические веб-приложения Azure — это служба, которая автоматически создает и развертывает веб-приложения полного стека в Azure из репозитория кода.

  • клиентские приложения: статические веб-приложения обычно создаются с помощью библиотек и платформ, таких как Angular, React, Svelte, Vue или Blazor, где не требуется отрисовка на стороне сервера.
  • API: Конечные точки API размещаются с использованием бессерверной архитектуры, что позволяет избежать необходимости в полноценном серверном бэкэнде.

серии видео:

Примеры:

Что такое статическое веб-приложение?

Статические веб-приложения Azure — это размещенное приложение с созданными статическими клиентскими файлами и дополнительными конечными точками API. При создании статического веб-приложения вы включаете сведения, необходимые для GitHub Action, чтобы собрать статические файлы из вашего репозитория GitHub, а затем развернуть их в Azure.

Создайте статическое веб-приложение с помощью одного из следующих элементов:

Использование интерфейса командной строки статических веб-приложений

Интерфейс командной строки статических веб-приложений , также известный как SWA CLI, служит инструментом локальной разработки для Azure Static Web Apps. Это может:

  • Подача статических ресурсов приложения или использование прокси для вашего сервера разработки приложений
  • Обслуживание запросов API или прокси-сервера для API, выполняющихся в основных инструментах Функций Azure
  • Эмулировать проверку подлинности и авторизацию
  • Эмуляция конфигурации статических веб-приложений, включая маршрутизацию

Включение API для приложения полного стека

Функции Azure позволяют разрабатывать полнофункциональный веб-сайт без необходимости работать с серверной конфигурацией всей веб-хостинговой среды. Узнайте больше о приложениях-функциях Azure на JavaScript .

функции Azure доступны для статического веб-приложения двумя способами:

  • управляемые функции: эти API предоставляются в статических веб-приложениях при наличии и обычно размещаются в папке с именем /api.
  • Связанные функции: Эти отдельные приложения с функциями позволяют использовать API без необходимости управлять одним и тем же исходным кодом и развертывать его одновременно.

примеры:

Разработка с помощью Visual Studio Code

Используйте расширение Visual Studio Code для статических веб-приложений для создания локальной структуры папок и начальных зависимостей.

  1. Форкнуть один из шаблонных репозиториев GitHub для выбора клиента и API или создать новый репозиторий.

  2. В Visual Studio Code создайте новое статическое веб-приложение.

  3. На шаге создания выберите форк репозитория и ветвь.

    При отправке в этот репозиторий и ветвь код также развертывается в статическом веб-приложении. Для этой цели обычно используется live или deploy ветвь.

  4. На этапах создания выберите структуру проекта, расположение кода приложения и каталог сборки.

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

  5. После завершения этапов создания, форк вашего репозитория имеет GitHub Action для сборки и развертывания в статическом веб-приложении, расположенном в каталоге /.github/workflows.

учебники, которые используют расширение статических веб-приложений Azure включают:

Настройка переменных среды клиента

GitHub Action контролирует переменные среды , которые внедряются в ваш проект во время сборки. Эти клиентские переменные необходимо настроить в yaml GitHub Action в разделе env. Секреты должны храниться в GitHub secrets и извлекаться в раздел env.

name: Azure Static Web Apps CI/CD

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

jobs:
  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_<GENERATED_HOSTNAME> }}
          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: "search-website" # App source code path
          api_location: "search-website/api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env: # Add environment variables here
          # Inject vars at build time
          myvarname: 'myvarvalue' 
          # Inject secrets at build time from GitHub Secrets
          password: ${{ secrets.PASSWORD }}

  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_<GENERATED_HOSTNAME> }}
          action: "close"

Настройка переменных среды API

Переменные среды API — это переменные среды выполнения, настроенные на портале Azure или Azure CLI.

  • На портале Azure: сначала в разделе «Параметры», затем «Конфигурация».

    снимок экрана портала Azure: в разделе

  • Расширение Visual Studio Code: под производственной, затем настройки приложения

    снимок экрана расширения VSCode: в разделе

  • Azure CLI: Использовать az staticwebapp appsettings set

Развертывание в Azure

Развертывание статического веб-приложения в Azure запускается путем отправки в конкретную ветвь репозитория исходного кода, указанную в GitHub Action в pull_requests:branches. При отправке с локального компьютера необходимо использовать репозиторий статического веб-приложения или форк репозитория. Если у вашей учетной записи пользователя GitHub нет разрешения на отправку в указанную ветвь в репозитории указанной организации, например, в организации GitHub вашей компании, сделайте форк репозитория, а затем настройте ваше действие GitHub Action на использование этого форка.

Просмотр успешного развертывания в GitHub Actions.

просмотр успешного развертывания из действия в GitHub.

Включение журналов

Включите Application Insights на портале Azure для сбора журналов для вашего статического веб-приложения. Интегрированное логирование Application Insights собирает огромное количество сведений без изменений в вашем коде.

Создание настраиваемого логирования

Чтобы настроить пользовательское логирование из вашего приложения в Application Insights, добавьте пакет @microsoft/applicationinsights-web npm, а затем добавьте код JavaScript для фиксации пользовательских данных.

import { ApplicationInsights } from '@microsoft/applicationinsights-web'

const appInsights = new ApplicationInsights({ config: {
  instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE'
  /* ...Other Configuration Options... */
} });
appInsights.trackTrace({message: 'some trace'});

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