Как развертывать приложения Fluid с помощью статических веб-приложений Azure

  • Статья

В этой статье показано, как развернуть приложения Fluid с помощью Статические веб-приложения Azure. Репозиторий FluidHelloWorld содержит приложение Fluid под названием DiceRoller , которое позволяет всем подключенным клиентам свернуть смерть и просмотреть результат. В этом руководстве вы развернете приложение DiceRoller для Статические веб-приложения Azure с помощью расширения 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 и перейдите в папку "Открыть файл>", чтобы открыть клонированные репозитории в редакторе.

Подключение в Ретранслятор Azure Fluid

Вы можете подключиться к Ретранслятору Жидкости Azure, указав идентификатор клиента и ключ, который уникально создается при создании ресурса 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 позволяет разрабатывать веб-сайт с полным стеком без необходимости работать с конфигурацией на стороне сервера всей среды размещения веб-сайтов. Вы можете развернуть Функции Azure вместе со статическим веб-сайтом. С помощью этой возможности можно развернуть функцию Azure с триггером HTTP, которая будет подписывать маркеры.

Дополнительные сведения о развертывании API на основе функций Azure в статичном веб-приложении см. в статье "Добавление 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 Explorer, а затем выберите Войти в Azure и следуйте инструкциям на экране.

    Sign in to Azure through VS Code

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

    VS Code Azure explorer showing subscriptions

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

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

    An image of the Azure Logo on a white background.

    Примечание.

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

  2. Откройте палитру команд Visual Studio Code, нажав клавишу F1.

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

  4. Выберите Статические веб-приложения Azure: Создание статического веб-приложения... и нажмите клавишу ВВОД.

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

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

    Параметр Значение
    Расположение кода приложения Ввод /src
    Расположение кода функции Azure api

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

    An image of the notification shown in Visual Studio Code when the app is created. The notification reads: Successfully created new static web app my-first-static-web-app. GitHub Actions is building and deploying your app, it will be available once the deployment completes.

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

    An image of the Static Web Apps extension UI, which shows a list of static web apps under each subscription. The highlighted static web app has a status of Waiting for Deployment displayed next to it.

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

  7. Чтобы просмотреть веб-сайт в браузере, щелкните правой кнопкой мыши проект в расширении "Статические веб-приложения" и выберите Просмотр сайта.

    An image of the menu that is shown when right-clicking on a static web app. The Browse Site option is highlighted.

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

Очистка ресурсов

Если вы не собираетесь использовать это приложение в дальнейшем, вы можете удалить экземпляр службы "Статические веб-приложения Azure" с помощью расширения.

В окне обозревателя Visual Studio Code вернитесь в раздел Статические веб-приложения, щелкните правой кнопкой мыши my-first-static-web-app и выберите Удалить.

An image of the menu that is shown when right-clicking on a static web app. The Delete option is highlighted.