Guia de Início Rápido: Lançamento de dados

Artigo
03/17/2023

Neste guia de início rápido, daremos uma olhada no processo de criação de um aplicativo de lançamento de dados que usa o serviço Azure Fluid Relay. O guia de início rápido é dividido em duas partes. Na primeira parte, criaremos o aplicativo em si e o executaremos em um servidor local do Fluid. Na segunda, reconfiguraremos o aplicativo para que ele seja executado no serviço Azure Fluid Relay em vez do servidor de desenvolvimento local.

O código de exemplo usado neste guia de início rápido está disponível aqui.

Configurar seu ambiente de desenvolvimento

Para acompanhar este guia de início rápido, você precisará ter uma conta do Azure e um Azure Fluid Relay provisionado. Caso não tenha uma conta, experimente o Azure gratuitamente.

Você também precisará ter os programas de software a seguir instalados no computador.

Um editor de código. Recomendamos usar o Visual Studio Code.
Git
Node.js versão 12.17 ou superior

Introdução no local

Primeiro, você precisará baixar o aplicativo de exemplo do GitHub. Abra uma nova janela Comando, procure a pasta em que deseja baixar o código e use o Git para clonar o repositório FluidHelloWorld e faça check-out do branch main-azure. O processo de clonagem criará uma subpasta chamada FluidHelloWorld com os arquivos de projeto.

git clone -b main-azure https://github.com/microsoft/FluidHelloWorld.git

Procure a pasta recém-criada, instale as dependências e inicie o aplicativo.

cd FluidHelloWorld
npm install
...
npm start

Quando você executar o comando npm start, duas coisas acontecerão. Primeiro, um servidor do Fluid será iniciado em um processo local. Esse servidor destina-se apenas ao desenvolvimento. Você o atualizará para um servidor de produção hospedado no Azure posteriormente. Em segundo lugar, uma nova guia do navegador será aberta em uma página que contém uma nova instância do aplicativo de lançamento de dados. Você pode abrir novas guias com a mesma URL para criar instâncias adicionais do aplicativo de lançamento de dados. Cada instância do aplicativo é configurada por padrão para usar o serviço Fluid local. Clique no botão Jogar em qualquer instância do aplicativo e observe que o estado do dado muda em cada cliente.

Atualização para o Azure Fluid Relay

Para execução no serviço Azure Fluid Relay, você precisará atualizar a configuração do aplicativo para se conectar ao serviço do Azure em vez do servidor local.

Configurar e criar um cliente do Azure

Instale @fluidframework/azure-client e @fluidframework/test-client-utils packages and importe o Cliente do Azure e o InsecureTokenProvider.

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

Para configurar o cliente do Azure, substitua o objeto de conexão local serviceConfig em app.js pelos valores de configuração do serviço Azure Fluid Relay. Esses valores podem ser encontrados na seção "Chave de Acesso" do recurso do Fluid Relay no portal do Azure. Seu objeto serviceConfig deve ter esta aparência com os valores substituídos. Para obter informações sobre como encontrar esses valores, confira Como provisionar um serviço do Azure Fluid Relay. Os campos id e name são arbitrários.

const user = { id: "userId", name: "userName" };

const serviceConfig = {
    connection: {
        tenantId: "MY_TENANT_ID", // REPLACE WITH YOUR TENANT ID
        tokenProvider: new InsecureTokenProvider("" /* REPLACE WITH YOUR PRIMARY KEY */, user),
        endpoint: "https://myServiceEndpointUrl", // REPLACE WITH YOUR SERVICE ENDPOINT
        type: "remote",
    }
};

Aviso

Durante o desenvolvimento, você pode usar o InsecureTokenProvider para gerar e assinar tokens de autenticação que serão aceitos pelo serviço Azure Fluid Relay. No entanto, como o nome indica, isso não é seguro e não deve ser usado em ambientes de produção. O processo de criação de recursos do Azure Fluid Relay fornece uma chave secreta que pode ser usada para assinar solicitações seguras. Para garantir que esse segredo não seja exposto, ele deve ser substituído por outra implementação do ITokenProvider que busca o token de um serviço de back-end seguro fornecido pelo desenvolvedor antes da liberação para produção.

Uma abordagem segura está descrita em "Como gravar um TokenProvider com uma função do Azure".

Compilar e executar somente o cliente

Agora que você apontou seu aplicativo para usar o Azure em vez de um servidor local, não será necessário iniciar o servidor do Fluid local junto com o aplicativo cliente. Inicie o cliente sem também iniciar o servidor com este comando.

npm run start:client

🥳Parabéns🎉Você deu o primeiro passo bem-sucedido para aproveitar todo o potencial do mundo da colaboração com o Fluid.

Compartilhar via