Share via

Cara: Menyebarkan aplikasi Fluid menggunakan Azure Static Web Apps

  • Artikel

Artikel ini menunjukkan cara menyebarkan aplikasi Fluid menggunakan Azure Static Web Apps. Repositori FluidHelloWorld berisi aplikasi Fluid yang disebut DiceRoller yang memungkinkan semua klien yang terhubung untuk menggulung mati dan melihat hasilnya. Dalam panduan ini, Anda menyebarkan aplikasi ke Azure Static Web Apps menggunakan ekstensi Visual Studio Code.

Jika Anda tidak memiliki langganan Azure, buat akun uji coba gratis.

Prasyarat

Fork dan kloning repositori

Arahkan ke https://github.com/microsoft/FluidHelloWorld dan klik tombol Fork untuk membuat fork Anda sendiri dari repositori FluidHelloWorld.

Kemudian kloning fork Anda ke mesin lokal Anda menggunakan perintah berikut.

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

Pastikan untuk mengganti <YOUR_GITHUB_ACCOUNT_NAME> dengan nama pengguna GitHub Anda.

Selanjutnya, buka Visual Studio Code dan buka File > Buka Folder untuk membuka repositori kloning di editor.

Koneksi ke Azure Fluid Relay

Anda dapat tersambung ke Azure Fluid Relay dengan menyediakan ID penyewa dan kunci yang dibuat secara unik untuk Anda saat membuat sumber daya Azure. Anda dapat membangun implementasi penyedia token Anda sendiri atau Anda dapat menggunakan dua implementasi penyedia token yang disediakan AzureFunctionTokenProviderFluid Framework .

Untuk mempelajari selengkapnya tentang menggunakan InsecureTokenProvider untuk pengembangan lokal, lihat Menyambungkan ke layanan dan Autentikasi dan otorisasi di aplikasi Anda.

Menggunakan AzureFunctionTokenProvider

AzureFunctionTokenProvider adalah penyedia token yang tidak mengekspos kunci rahasia dalam kode sisi klien dan dapat digunakan dalam skenario produksi. Implementasi penyedia token ini dapat digunakan untuk mengambil token dari titik akhir HTTPS yang bertanggung jawab untuk menandatangani token akses dengan kunci penyewa. Ini menyediakan cara yang aman untuk menghasilkan token dan meneruskannya kembali ke aplikasi klien.

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

Untuk menggunakan penyedia token ini, Anda perlu menerapkan titik akhir HTTPS yang akan menandatangani token, dan meneruskan URL ke titik akhir Anda ke AzureFunctionTokenProvider.

Menerapkan Azure Function menggunakan Azure Static Web apps

Azure Static Web Apps memungkinkan Anda mengembangkan situs web tumpukan penuh tanpa perlu berurusan dengan konfigurasi sisi server dari seluruh lingkungan hosting web. Anda dapat menerapkan Azure Functions di samping situs web statis Anda. Dengan menggunakan kemampuan ini, Anda dapat menerapkan Azure Function yang dipicu HTTP yang akan menandatangani token.

Untuk informasi selengkapnya tentang menerapkan API bertenaga Azure Function ke aplikasi web statis Anda lihat Tambahkan API ke Azure Static Web Apps dengan Azure Functions.

Catatan

Anda dapat menggunakan contoh kode Azure Function dalam Menerapkan Fungsi Azure untuk menandatangani token untuk mengimplementasikan fungsi Anda.

Setelah Azure Function Anda digunakan, Anda harus memperbarui URL yang diteruskan ke 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);

Jalankan npm run build perintah dari direktori akar untuk membangun kembali aplikasi. Ini akan menghasilkan dist folder dengan kode aplikasi yang harus digunakan ke aplikasi Web Statis.

Masuk ke Azure

Jika Anda telah menggunakan ekstensi layanan Azure, Anda seharusnya sudah masuk dan dapat melompati langkah ini.

Setelah Anda memasang ekstensi di Visual Studio Code, Anda perlu masuk ke akun Azure Anda.

  1. Di Visual Studio Code, pilih ikon Azure explorer, lalu pilih Masuk ke Azure, dan ikuti petunjuknya.

    Sign in to Azure through VS Code

  2. Setelah masuk, verifikasi bahwa alamat email akun Azure Anda muncul di Bilah Status dan langganan Anda muncul di Azure explorer:

    VS Code Azure explorer showing subscriptions

Membuat Static Web App

  1. Di dalam Visual Studio Code, pilih logo Azure di Bilah Aktivitas untuk membuka jendela ekstensi Azure.

    An image of the Azure Logo on a white background.

    Catatan

    Anda diharuskan masuk ke Azure dan GitHub di Visual Studio Code untuk melanjutkan. Jika Anda belum terautentikasi, ekstensi akan meminta Anda untuk masuk ke kedua layanan selama proses pembuatan.

  2. Pilih F1 untuk membuka palet perintah Visual Studio Code.

  3. Masukkan Buat aplikasi web statis di kotak perintah.

  4. Pilih Azure Static Web Apps: Buat aplikasi web statis... dan pilih Enter.

    Pengaturan Nilai
    Nama Masukkan my-first-static-web-app
    Wilayah Pilih wilayah yang terdekat dengan Anda.
    Preset build Pilih Kustom.

  5. Masukkan nilai pengaturan untuk yang cocok dengan pilihan prasetel kerangka kerja Anda.

    Pengaturan Nilai
    Lokasi kode aplikasi Masukkan /src
    Lokasi kode Azure Function api

  6. Setelah aplikasi dibuat, pemberitahuan konfirmasi ditampilkan di 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.

    Saat penyebaran sedang berlangsung, ekstensi Visual Studio Code melaporkan status build kepada Anda.

    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.

    Setelah penyebaran selesai, Anda dapat menavigasi langsung ke situs web Anda.

  7. Untuk menampilkan situs web di browser, klik kanan pada proyek di ekstensi Static Web Apps, dan pilih Telusuri Situs.

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

  8. Lokasi kode aplikasi Anda, Azure Function, dan bangun output adalah bagian dari azure-static-web-apps-xxx-xxx-xxx.yml file alur kerja yang terletak di /.github/workflows direktori. File ini secara otomatis dibuat saat Anda membuat aplikasi Web Statis. Ini mendefinisikan GitHub Actions untuk membangun dan menyebarkan aplikasi Web Statis Anda.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, Anda dapat menghapus instans Azure Static Web Apps melalui ekstensi.

Di jendela Visual Studio Code Explorer, kembali ke bagian Static Web Apps dan klik kanan pada my-first-static-web-app dan pilih Hapus.

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