Mulai cepat: Roller dadu

Artikel
03/14/2023

Dalam mulai cepat ini, kita akan menelusuri proses pembuatan aplikasi roller dadu yang menggunakan layanan Azure Fluid Relay. Mulai cepat ini dibagi menjadi dua bagian. Di bagian pertama, kita akan membuat aplikasi itu sendiri dan menjalankannya di server Fluid lokal. Pada bagian kedua, kita akan mengonfigurasi ulang aplikasi untuk berjalan di layanan Azure Fluid Relay dan bukan server pengembang lokal.

Kode sampel lengkap yang digunakan di mulai cepat ini tersedia di sini.

Menyiapkan lingkungan pengembangan Anda

Untuk mengikuti mulai cepat ini, Anda memerlukan akun Azure dan Azure Fluid Relay yang disediakan. Jika Anda tidak memiliki akun, Anda dapat membuat akun Azure secara gratis.

Anda juga akan memerlukan perangkat lunak berikut untuk dipasang pada komputer Anda.

Editor kode -- Kami merekomendasikan Visual Studio Code.
Git
Node.js versi 12.17 atau lebih tinggi

Memulai Secara Lokal

Pertama, unduh aplikasi sampel dari GitHub. Buka jendela perintah baru dan navigasikan ke folder tempat Anda ingin mengunduh kode dan menggunakan Git untuk mengkloning repositori FluidHelloWorld dan periksa cabang.main-azure Proses kloning akan membuat subfolder bernama FluidHelloWorld dengan file proyek di dalamnya.

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

Navigasikan ke folder yang baru dibuat, pasang dependensi, dan mulai aplikasi.

cd FluidHelloWorld
npm install
...
npm start

Saat Anda menjalankan perintah npm start, dua hal akan terjadi. Pertama, server Fluid akan diluncurkan dalam proses lokal. Server ini hanya ditujukan untuk pengembangan. Anda akan meningkatkan ke server produksi yang dihosting Azure nanti. Kedua, tab browser baru akan membuka halaman yang berisi instans baru dari aplikasi roller dadu. Anda dapat membuka tab baru dengan URL yang sama untuk membuat instans tambahan dari aplikasi roller dadu. Setiap instans aplikasi dikonfigurasi secara default untuk menggunakan layanan Fluid lokal Anda. Klik tombol Roll dalam setiap instans aplikasi dan perhatikan bahwa keadaan dadu berubah untuk setiap klien.

Meningkatkan ke Azure Fluid Relay

Untuk menjalankan layanan Azure Fluid Relay, Anda harus memperbarui konfigurasi aplikasi agar tersambung ke layanan Azure Anda, bukan server lokal.

Mengonfigurasi dan membuat klien Azure

Instal @fluidframework/azure-client dan "paket @fluidframework/test-client-utils dan impor Klien Azure dan InsecureTokenProvider.

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

Untuk mengonfigurasi klien Azure, ganti objek koneksi serviceConfig lokal dengan app.js nilai konfigurasi layanan Azure Fluid Relay Anda. Nilai-nilai ini dapat ditemukan di bagian "Access Key" dari sumber daya Fluid Relay di portal Microsoft Azure. Objek Anda serviceConfig akan terlihat seperti ini dengan nilai yang diganti. (Untuk informasi tentang cara menemukan nilai-nilai ini, lihat Cara: Menyediakan layanan Azure Fluid Relay.) Perhatikan bahwa id bidang dan name bersifat arbitrer.

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

Peringatan

Selama pengembangan, Anda dapat menggunakan InsecureTokenProvider untuk menghasilkan dan menandatangani token autentikasi yang akan diterima oleh layanan Azure Fluid Relay. Namun, seperti namanya, hal ini tidak aman dan tidak boleh digunakan di lingkungan produksi. Proses pembuatan sumber daya Azure Fluid Relay memberi Anda kunci rahasia yang dapat digunakan untuk menandatangani permintaan yang aman. Untuk memastikan bahwa rahasia ini tidak terungkap, kunci harus diganti dengan implementasi lain dari ITokenProvider yang mengambil token dari layanan backend yang aman dan disediakan pengembang sebelum dirilis ke produksi.

Satu pendekatan aman diuraikan dalam "Cara: Menulis TokenProvider dengan Azure Function".

Membangun dan menjalankan klien saja

Kini setelah Anda mengarahkan aplikasi untuk menggunakan Azure alih-alih server lokal, Anda tidak perlu meluncurkan server Fluid lokal bersama dengan aplikasi klien. Anda dapat meluncurkan klien tanpa meluncurkan server dengan perintah ini.

npm run start:client

🥳Selamat🎉 Anda telah berhasil mengambil langkah pertama menuju pembukaan dunia kolaborasi Fluid.

Bagikan melalui