Início Rápido: Rolo de dados

Artigo
03/14/2023

Neste início rápido, vamos explicar o processo de criação de uma aplicação de rolos de dados que utiliza o serviço Azure Fluid Relay. O início rápido é dividido em duas partes. Na primeira parte, vamos criar a própria aplicação e executá-la num servidor fluido local. Na segunda parte, vamos reconfigurar a aplicação para ser executada no serviço Azure Fluid Relay em vez do servidor de programador local.

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

Configurar o ambiente de desenvolvimento

Para acompanhar este início rápido, precisará de uma conta do Azure e do Azure Fluid Relay aprovisionados. Se não tiver uma conta, pode experimentar o Azure gratuitamente.

Também precisará do seguinte software instalado no seu computador.

Editor de código – recomendamos o Visual Studio Code.
Git
Node.js versão 12.17 ou superior

Introdução Localmente

Primeiro, terá de transferir a aplicação de exemplo a partir do GitHub. Abra uma nova janela de comandos e navegue para a pasta onde pretende transferir o código e utilize o Git para clonar o repositório FluidHelloWorld e dar saída do main-azure ramo. O processo de clonagem criará uma subpasta denominada FluidHelloWorld com os ficheiros do projeto.

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

Navegue para a pasta recém-criada, instale dependências e inicie a aplicação.

cd FluidHelloWorld
npm install
...
npm start

Quando executar o npm start comando, ocorrerão duas coisas. Primeiro, um servidor Fluid será iniciado num processo local. Este servidor destina-se apenas ao desenvolvimento. Irá atualizar para um servidor de produção alojado no Azure mais tarde. Em segundo lugar, será aberto um novo separador do browser numa página que contém uma nova instância da aplicação de rolo de dados. Pode abrir novos separadores com o mesmo URL para criar instâncias adicionais da aplicação de rolos de dados. Cada instância da aplicação está configurada por predefinição para utilizar o serviço Fluid local. Clique no botão Roll em qualquer instância da aplicação e tenha em atenção que o estado dos dados é alterado em todos os clientes.

Atualizar para o Azure Fluid Relay

Para executar no serviço Azure Fluid Relay, terá de atualizar a configuração da aplicação para ligar ao serviço do Azure em vez do servidor local.

Configurar e criar um cliente do Azure

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

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

Para configurar o cliente do Azure, substitua o objeto de ligação serviceConfig local em app.js pelos valores de configuração do serviço Azure Fluid Relay. Estes valores podem ser encontrados na secção "Chave de Acesso" do recurso de Reencaminhamento de Fluidos no portal do Azure. O serviceConfig objeto deverá ter este aspeto com os valores substituídos. (Para obter informações sobre como encontrar estes valores, veja Como: Aprovisionar um serviço de Reencaminhamento de Fluidos do Azure.) Tenha em atenção que os id campos 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, pode utilizar InsecureTokenProvider para gerar e assinar tokens de autenticação que o serviço Azure Fluid Relay aceitará. No entanto, como o nome indica, isto é inseguro e não deve ser utilizado em ambientes de produção. O processo de criação de recursos do Azure Fluid Relay fornece-lhe uma chave secreta que pode ser utilizada para assinar pedidos seguros. Para garantir que este segredo não é exposto, este deve ser substituído por outra implementação do ITokenProvider que obtém o token de um serviço de back-end seguro fornecido pelo programador antes de ser lançado para produção.

Uma abordagem segura está descrita em "Como: Escrever um TokenProvider com uma Função do Azure".

Criar e executar apenas o cliente

Agora que apontou a sua aplicação para utilizar o Azure em vez de um servidor local, não precisa de iniciar o servidor fluido local juntamente com a aplicação cliente. Pode iniciar o cliente sem também iniciar o servidor com este comando.

npm run start:client

🥳Parabéns🎉 Deu o primeiro passo para desbloquear o mundo da colaboração fluida.

Share via