快速入門：骰子

文章
04/24/2024

在本快速入門中，我們將逐步解說使用 Azure 流體轉送服務建立擲骰子應用程式的流程。快速入門分為兩個部分。在第一部分，我們將建立應用程式本身，並針對本機流體伺服器執行該應用程式。在第二部分，我們將重新設定應用程式以針對 Azure 流體轉送服務執行，而不是針對本機開發伺服器執行。

本快速入門使用的範例程式碼可在這裡取得。

設定開發環境

若要遵循本快速入門，您將需要 Azure 帳戶並佈建 Azure 流體轉送。如果您沒有帳戶，您可以免費試用 Azure。

您將也需要在電腦上安裝下列軟體。

程式碼編輯器 -- 我們建議使用 Visual Studio Code。
Git
Node.js 版本 12.17 或更高版本

在本機開始使用

首先，您需要從 GitHub 下載範例應用程式。開啟新的命令視窗並瀏覽至要下載程式碼的資料夾，然後使用 Git 以複製 FluidHelloWorld 存放庫並查看 main-azure 分支。複製流程將建立名為 FluidHelloWorld 的子資料夾，其中包含專案檔。

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

瀏覽至新建立的資料夾，安裝相依性，然後啟動應用程式。

cd FluidHelloWorld
npm install
...
npm start

執行 npm start 命令時，會發生兩件事。第一件事，流體伺服器將在本機處理序中啟動。此伺服器僅供開發使用。您稍後將升級至 Azure 裝載的實際執行伺服器。第二件事，新的瀏覽器索引標籤將開啟頁面，其中包含擲骰子應用程式的新執行個體。您可使用相同 URL 開啟新索引標籤以建立擲骰子應用程式的其他執行個體。每個應用程式的執行個體皆預設為使用本機流體服務。按一下任意應用程式執行個體的 [擲出] 按鈕，並注意每個用戶端的骰子狀態都會變更。

升級至 Azure 流體轉送

若要針對 Azure 流體轉送服務執行，您需要更新應用程式的設定以連線至 Azure 服務，而不是本機伺服器。

設定和建立 Azure 用戶端

安裝 @fluidframework/azure-client 和 "@fluidframework/test-client-utils 套件，並匯入 Azure 用戶端和 InsecureTokenProvider。

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

若要設定 Azure 用戶端，請將 app.js 中的本機連線 serviceConfig 物件取代為 Azure 流體轉送服務設定值。這些值可在 Azure 入口網站 [流體轉送] 資源的 [存取金鑰] 區段中找到。您的 serviceConfig 物件應如下所示，但值已遭取代。 (如需如何尋找這些值的詳細資訊，請參閱如何：佈建 Azure 流體轉送服務。)請注意，id 和 name 欄位是任意的。

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",
    }
};

警告

在部署期間，您可使用 InsecureTokenProvider 來產生並簽署 Azure 流體轉送將接受的驗證權杖。不過，顧名思義，此不安全，不應在實際執行環境中使用。 Azure 流體轉送資源建立流程提供祕密金鑰，可用於簽署安全要求。 為了確保不會公開祕密，這應取代為 ITokenProvider 的其他實作，在發行至實際執行環境之前從安全開發人員提供的後端服務擷取權杖。

「如何：使用 Azure 函式寫入 TokenProvider」中概述一種安全的方法。

僅建置和執行用戶端應用程式

現在您已指定應用程式使用 Azure 而非本機伺服器，您便不需要啟動本機流體伺服器和用戶端應用程式。您可使用此命令啟動用戶端，而不需同時啟動伺服器。

npm run start:client

🥳恭喜🎉 您已成功邁出開啟流體共同作業的第一步。

分享方式：