Создание статического веб-приложения в Azure с помощью Node.js
Статические веб-приложения Azure — это служба, которая автоматически создает и развертывает веб-приложения полного стека в Azure из репозитория кода.
- клиентские приложения: статические веб-приложения обычно создаются с помощью библиотек и платформ, таких как Angular, React, Svelte, Vue или Blazor, где не требуется отрисовка на стороне сервера.
- API: Конечные точки API размещаются с использованием бессерверной архитектуры, что позволяет избежать необходимости в полноценном серверном бэкэнде.
серии видео:
- 1. Что такое статические веб-приложения Azure и что его можно использовать?
- 2. Какие средства необходимо использовать для работы со статическими веб-приложениями Azure?
- 3. Развертывание первых статических веб-приложений Azure
- 4. Как работают CI/CD и предварительные версии веток со статическими веб-приложениями Azure
- 5. Создание личного блога с помощью Gatsby & Azure Static Web Apps
- 6. Настройка маршрутизации в статических веб-приложениях Azure
- 7. Добавление API в статическое веб-приложение Azure
- 8. Интеграция проверки подлинности
- 9. Настройка авторизации в статических веб-приложениях Azure
- 10. Настройка имени личного домена в статических веб-приложениях Azure
- 14. Создание бессерверных приложений JavaScript с помощью статических веб-приложений Azure
- 15. Создание статических веб-приложений Azure на основе шаблона GitHub
- 16. Настройка Azure Cosmos DB для MongoDB для использования со статическими веб-приложениями Azure
Примеры:
- образцы из сообщества статических веб-приложений — отличный способ найти код для использования в качестве начального шаблона для вашего проекта.
- начальные проекты статических веб-приложений — это еще один отличный способ начать проект.
Что такое статическое веб-приложение?
Статические веб-приложения 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 для статических веб-приложений для создания локальной структуры папок и начальных зависимостей.
Форкнуть один из шаблонных репозиториев GitHub для выбора клиента и API или создать новый репозиторий.
В Visual Studio Code создайте новое статическое веб-приложение.
На шаге создания выберите форк репозитория и ветвь.
При отправке в этот репозиторий и ветвь код также развертывается в статическом веб-приложении. Для этой цели обычно используется
live
илиdeploy
ветвь.На этапах создания выберите структуру проекта, расположение кода приложения и каталог сборки.
Обычно значения по умолчанию можно принимать, если структура папок соответствует типичной структуре папок для типа проекта.
После завершения этапов создания, форк вашего репозитория имеет 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: сначала в разделе «Параметры», затем «Конфигурация».
Расширение Visual Studio Code: под производственной, затем настройки приложения
Azure CLI: Использовать az staticwebapp appsettings set
Развертывание в Azure
Развертывание статического веб-приложения в Azure запускается путем отправки в конкретную ветвь репозитория исходного кода, указанную в GitHub Action в pull_requests:branches
. При отправке с локального компьютера необходимо использовать репозиторий статического веб-приложения или форк репозитория. Если у вашей учетной записи пользователя GitHub нет разрешения на отправку в указанную ветвь в репозитории указанной организации, например, в организации GitHub вашей компании, сделайте форк репозитория, а затем настройте ваше действие GitHub Action на использование этого форка.
Просмотр успешного развертывания в GitHub Actions.
Включение журналов
Включите 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'});
Дальнейшие действия
- Узнайте больше о статических веб-приложениях