Как развертывать Fluid-приложения с использованием Azure Static Web Apps

В этой статье показано, как развернуть приложения Fluid с помощью Azure Static Web Apps. Репозиторий FluidHelloWorld содержит приложение Fluid под названием DiceRoller, которое позволяет всем подключенным клиентам бросить кость и просмотреть результат. В этом руководстве вы развернете приложение DiceRoller для Azure Static Web Apps с помощью расширения Visual Studio Code.

Если у вас нет подписки Azure, создайте бесплатную пробную учетную запись.

Предпосылки

Сделайте форк и клонируйте репозиторий

Перейдите к https://github.com/microsoft/FluidHelloWorld и нажмите кнопку «Форк», чтобы создать собственный форк репозитория FluidHelloWorld.

Затем клонируйте форк на локальный компьютер с помощью следующей команды.

git clone -b main-azure https://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/FluidHelloWorld.git

Обязательно замените <YOUR_GITHUB_ACCOUNT_NAME> именем пользователя GitHub.

Затем откройте Visual Studio Code и перейдите к File > Открыть папку, чтобы открыть клонированные репозитории в редакторе.

Подключение к Azure Fluid Relay

Вы можете подключиться к Azure Fluid Relay, указав идентификатор арендатора и ключ, которые уникально создаются для вас при создании ресурса Azure. Вы можете создать собственную реализацию поставщика маркеров или использовать две реализации поставщика маркеров, которые предоставляет AzureFunctionTokenProviderFluid Framework.

Дополнительные сведения об использовании InsecureTokenProvider для локальной разработки см. в статье "Подключение к службе и проверке подлинности и авторизация" в приложении.

Использование AzureFunctionTokenProvider

AzureFunctionTokenProvider — это поставщик токенов, который не предоставляет секретный ключ в клиентском коде и может использоваться в производственных сценариях. Эту реализацию поставщика маркеров можно использовать для получения маркера из конечной точки HTTPS, ответственной за подписывание маркеров доступа с помощью ключа клиента. Это обеспечивает безопасный способ создания токена и передачи его обратно клиентскому приложению.

import { AzureClient, AzureFunctionTokenProvider } from "@fluidframework/azure-client";

const config = {
    tenantId: "myTenantId",
    tokenProvider: new AzureFunctionTokenProvider("https://myAzureAppUrl"+"/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
    endpoint: "https://myServiceEndpointUrl",
    type: "remote",
};

const clientProps = {
    connection: config,
};

const client = new AzureClient(clientProps);

Чтобы использовать этот поставщик токенов, необходимо развернуть конечную точку HTTPS, которая будет подписывать токены, и передать URL-адрес этой конечной точки в AzureFunctionTokenProvider.

Развертывание функции Azure с помощью статических веб-приложений Azure

Azure Static Web Apps позволяет разрабатывать полнофункциональный веб-сайт без необходимости настраивать серверную часть всего окружения для размещения веб-сайтов. Вы можете развернуть Azure Functions наряду со статическим веб-сайтом. С помощью этой возможности можно развернуть функцию Azure, активируемую через HTTP, которая будет подписывать токены.

Дополнительные сведения о развертывании API, использующих Azure Functions, в статическом веб-приложении см. в статье Добавление API в статическое веб-приложение Azure с помощью функций Azure.

Замечание

Пример кода функции Azure, представленный в Реализация функции Azure для подписания токенов, можно использовать для реализации вашей функции.

После развертывания функции Azure необходимо обновить URL-адрес, переданный в AzureFunctionTokenProvider.

import { AzureClient } from "@fluidframework/azure-client";

const config = {
    tenantId: "myTenantId",
    tokenProvider: new AzureFunctionTokenProvider("https://myStaticWebAppUrl/api/GetAzureToken", { userId: "test-user",userName: "Test User" }),
    endpoint: "https://myServiceEndpointUrl",
    type: "remote",
};

const clientProps = {
    connection: config,
};

const client = new AzureClient(config);

npm run build Выполните команду из корневого каталога, чтобы перестроить приложение. Это создаст папку dist с кодом приложения, который следует развернуть в статическом веб-приложении.

Вход в Azure

Если вы уже используете расширения службы Azure, вы уже войдете в систему и можете пропустить этот шаг.

После установки расширения в Visual Studio Code необходимо войти в учетную запись Azure.

  1. В Visual Studio Code щелкните значок обозревателя Azure, а затем выберите Sign in to Azure и следуйте инструкциям.

    Sign in to Azure through VS Code

  2. После входа убедитесь, что адрес электронной почты учетной записи Azure отображается в строке состояния, а подписки отображаются в обозревателе Azure:

    VS Code Azure explorer, отображающий подписки

Создание статического веб-приложения

  1. В Visual Studio Code выберите логотип Azure на панели действий, чтобы открыть окно расширений Azure.

    Изображение логотипа Azure на белом фоне.

    Замечание

    Чтобы продолжить, необходимо войти в Azure и GitHub в Visual Studio Code. Если вы еще не авторизовались, расширение предложит войти в оба сервиса во время процесса создания.

  2. Выберите F1, чтобы открыть палитру команд Visual Studio Code.

  3. Введите "Создать статическое веб-приложение " в командной строке.

  4. Выберите Azure Static Web Apps: создание статического веб-приложения... и выберите Enter.

    Setting Ценность
    Имя Введите my-first-static-web-app
    Регион Выберите ближайший к вам регион.
    Предустановка сборки Выберите Настраиваемый.

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

    Setting Ценность
    Расположение кода приложения Введите /src
    Расположение кода функции Azure API (интерфейс программирования приложений)

  6. После создания приложения в Visual Studio Code отображается уведомление о подтверждении.

    Изображение уведомления, показанного в Visual Studio Code при создании приложения. В уведомлении указано: успешно создано новое статическое веб-приложение my-first-static-web-app. GitHub Actions выполняет сборку и развертывание вашего приложения, оно станет доступно, как только развертывание завершится.

    Во время развертывания расширение Visual Studio Code сообщает вам о состоянии сборки.

    Изображение пользовательского интерфейса расширения Статические веб-приложения, которая отображает список статических веб-приложений в каждой подписке. Выделенное статическое веб-приложение имеет состояние

    После завершения развертывания можно перейти напрямую на веб-сайт.

  7. Чтобы просмотреть веб-сайт в браузере, щелкните проект правой кнопкой мыши в расширении Static Web Apps и выберите Browse Site.

    Изображение меню, которое отображается при щелчке правой кнопкой мыши статического веб-приложения. Выделен параметр

  8. Расположение кода приложения, функции Azure и выходных данных сборки является частью файла рабочего процесса azure-static-web-apps-xxx-xxx-xxx.yml, расположенного в каталоге /.github/workflows. Этот файл создается автоматически при создании статического веб-приложения. Он определяет GitHub Actions для создания и развертывания статического веб-приложения.

Очистите ресурсы

Если вы не собираетесь продолжать использовать это приложение, можно удалить экземпляр Azure Static Web Apps через расширение.

В окне обозревателя Visual Studio Code вернитесь в раздел Static Web Apps и щелкните правой кнопкой мыши my-first-static-web-app и выберите Delete.

Изображение меню, которое отображается при щелчке правой кнопкой мыши статического веб-приложения. Выделен параметр Delete.

  • Last updated on