Compartilhar via

Como implantar aplicativos Fluidos usando Aplicativos Web Estáticos do Azure

  • Artigo

Este artigo demonstra como implantar aplicativos fluidos usando Aplicativos Web Estáticos do Azure. O repositório FluidHelloWorld contém um aplicativo Fluido chamado DiceRoller que permite que todos os clientes conectados rolem um dado e vejam o resultado. Neste guia de início rápido, você implantará um aplicativo DiceRoller nos Aplicativos Web Estáticos do Azure usando a extensão do Visual Studio Code.

Se você não tiver uma assinatura do Azure, crie uma conta de avaliação gratuita.

Pré-requisitos

Bifurcar e clonar o repositório

Navegue para https://github.com/microsoft/FluidHelloWorld e clique no botão Bifurcação para criar sua própria bifurcação do repositório FluidHelloWorld.

Clone a bifurcação em seu computador local usando o comando a seguir.

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

Lembre-se de substituir <YOUR_GITHUB_ACCOUNT_NAME> pelo seu nome de usuário do GitHub.

Em seguida, abra o Visual Studio Code e acesse Arquivo > Abrir Pasta para abrir o repositório clonado no editor.

Conectar-se ao Azure Fluid Relay

Você pode se conectar ao Azure Fluid Relay fornecendo a ID do locatário e a chave que é gerada exclusivamente para você ao criar o recurso do Azure. Você pode criar sua própria implementação de provedor de token ou pode usar as duas implementações de provedor de token que o Fluid Framework fornece um AzureFunctionTokenProviderarquivo .

Para saber mais sobre como usar o InsecureTokenProvider para desenvolvimento local, confira Como conectar-se ao serviço e Autenticação e autorização em seu aplicativo.

Como usar o AzureFunctionTokenProvider

AzureFunctionTokenProvider é um provedor de token que não expõe a chave secreta no código do lado do cliente e pode ser usado em cenários de produção. Essa implementação do provedor de token pode ser usada para buscar um token de um ponto de extremidade HTTPS responsável por assinar tokens de acesso com a chave de locatário. Isso fornece uma maneira segura de gerar o token e passá-lo de volta para o aplicativo cliente.

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);

Para usar esse provedor de token, é necessário implantar um ponto de extremidade HTTPS responsável por assinar tokens e passar a URL para seu ponto de extremidade para o AzureFunctionTokenProvider.

Implantar uma Função do Azure usando Aplicativos Web Estáticos do Azure

Os Aplicativos Web Estáticos do Azure permitem que você desenvolva um site de pilha completa sem a necessidade de lidar com a configuração do lado do servidor de um ambiente inteiro de hospedagem na Web. Você pode implantar Funções do Azure junto com seu site estático. Usando essa funcionalidade, você pode implantar uma Função do Azure disparada por HTTP que assinará tokens.

Para obter mais informações sobre como implantar APIs acionadas por Função do Azure em seu aplicativo Web estático, confira Adicionar uma API ao Aplicativos Web Estáticos do Azure com Funções do Azure.

Observação

Você pode usar o código de exemplo do Azure Functions em Implementando uma Função do Azure para assinar tokens para implementar sua função.

Depois que a Função do Azure for implantada, você deverá atualizar a URL passada para o 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);

Execute o comando npm run build do diretório raiz para recriar o aplicativo. Isso gerará uma pasta dist com o código do aplicativo que deve ser implantado no aplicativo Web Estático.

Entrar no Azure

Se você já usa as extensões de serviço do Azure, já deve estar conectado e pode ignorar esta etapa.

Depois de instalar a extensão no Visual Studio Code, entre na sua conta do Azure.

  1. No Visual Studio Code, clique no ícone do gerenciador do Azure e, em seguida, selecione Entrar no Azure e siga os prompts.

    Sign in to Azure through VS Code

  2. Depois de entrar, verifique se o endereço de email da sua conta do Azure aparece na barra de status e as assinaturas aparecem no gerenciador do Azure:

    VS Code Azure explorer showing subscriptions

Criar um aplicativo Web estático

  1. No Visual Studio Code, selecione o logotipo do Azure na barra de atividade para abrir a janela de extensões do Azure.

    An image of the Azure Logo on a white background.

    Observação

    Você precisará entrar no Azure e no GitHub no Visual Studio Code para continuar. Se você ainda não estiver autenticado, a extensão solicitará que você entre nos dois serviços durante o processo de criação.

  2. Selecione F1 para abrir a paleta de comandos do Visual Studio Code.

  3. Insira Criar aplicativo Web estático na caixa de comando.

  4. Selecione Aplicativos Web Estáticos do Azure: criar aplicativo Web estático... e selecione Enter.

    Configuração Valor
    Nome Inserir my-first-static-web-app
    Região Selecione a região mais próxima de você.
    Build predefinido selecione Personalizado.

  5. Insira os valores de configurações para que correspondam à escolha predefinida da estrutura.

    Configuração Valor
    Local do código do aplicativo Insira /src
    Local do código da Função do Azure api

  6. Depois que o aplicativo é criado, uma notificação de confirmação é mostrada no 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.

    Enquanto a implantação está em andamento, a extensão do Visual Studio Code relata o status do build para você.

    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.

    Após a implantação, navegue diretamente para o site.

  7. Para ver o site no navegador, clique com o botão direito do mouse no projeto na extensão de Aplicativos Web Estáticos e selecione Procurar no Site.

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

  8. O local do código do aplicativo, a Função do Azure e a saída de build fazem parte do arquivo de fluxo de trabalho azure-static-web-apps-xxx-xxx-xxx.yml localizado no diretório /.github/workflows. Esse arquivo é criado automaticamente ao criar o aplicativo Web estático. Ele define um GitHub Actions para criar e implantar seu aplicativo Web estático.

Limpar os recursos

Se você não pretende continuar usando esse aplicativo, exclua a instância dos Aplicativos Web Estáticos do Azure por meio da extensão.

Na janela do Visual Studio Code Explorer, volte à seção Aplicativos Web Estáticos, clique com o botão direito do mouse em my-first-static-web-app e selecione Excluir.

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