Share via

Nasıl yapılır: Azure Static Web Apps kullanarak Akıcı uygulamalar dağıtma

  • Makale

Bu makalede, Azure Static Web Apps kullanarak Akıcı uygulamaların nasıl dağıtılacağı gösterilmektedir. FluidHelloWorld deposu, tüm bağlı istemcilerin zar atıp sonucu görüntülemesini sağlayan DiceRoller adlı bir Fluid uygulaması içerir. Bu nasıl yapılır bölümünde DiceRoller uygulamasını Visual Studio Code uzantısını kullanarak Azure Static Web Apps'e dağıtacaksınız.

Azure aboneliğiniz yoksa ücretsiz bir deneme hesabı oluşturun.

Önkoşullar

Depoyu çatallama ve kopyalama

https://github.com/microsoft/FluidHelloWorld FluidHelloWorld deposunda kendi çatalınızı oluşturmak için Çatal düğmesine gidin ve tıklayın.

Ardından aşağıdaki komutu kullanarak çatalınızı yerel makinenize kopyalayın.

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

değerini GitHub kullanıcı adınız ile değiştirdiğinden <YOUR_GITHUB_ACCOUNT_NAME> emin olun.

Ardından Visual Studio Code'ı açın ve kopyalanan depoyu düzenleyicide açmak için Dosya > Klasör Aç'a gidin.

Azure Fluid Relay'e Bağlan

Azure kaynağını oluştururken sizin için benzersiz olarak oluşturulan kiracı kimliğini ve anahtarını sağlayarak Azure Fluid Relay'e bağlanabilirsiniz. Kendi belirteç sağlayıcısı uygulamanızı oluşturabilir veya Akıcı Çerçeve tarafından sunulan AzureFunctionTokenProvideriki belirteç sağlayıcısı uygulamasını kullanabilirsiniz.

Yerel geliştirme için InsecureTokenProvider'ı kullanma hakkında daha fazla bilgi edinmek için bkz. HizmetteBağlan, uygulamanızda kimlik doğrulaması ve yetkilendirme.

AzureFunctionTokenProvider'i kullanma

AzureFunctionTokenProvider , gizli anahtarı istemci tarafı kodunda kullanıma sunmayan ve üretim senaryolarında kullanılabilen bir belirteç sağlayıcısıdır. Bu belirteç sağlayıcısı uygulaması, kiracı anahtarıyla erişim belirteçlerini imzalamaktan sorumlu olan bir HTTPS uç noktasından belirteç getirmek için kullanılabilir. Bu, belirteci oluşturmak ve istemci uygulamasına geri geçirmek için güvenli bir yol sağlar.

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

Bu belirteç sağlayıcısını kullanmak için belirteçleri imzalayacak bir HTTPS uç noktası dağıtmanız ve URL'yi uç noktanıza AzureFunctionTokenProvider'a geçirmeniz gerekir.

Azure Statik Web uygulamalarını kullanarak Azure İşlevi dağıtma

Azure Static Web Apps, tüm web barındırma ortamının sunucu tarafı yapılandırmasıyla ilgilenmenize gerek kalmadan tam yığın web sitesi geliştirmenize olanak tanır. statik web sitenizin yanı sıra Azure İşlevleri dağıtabilirsiniz. Bu özelliği kullanarak belirteçleri imzalayacak HTTP ile tetiklenen bir Azure İşlevi dağıtabilirsiniz.

Azure İşlev destekli API'leri statik web uygulamanıza dağıtma hakkında daha fazla bilgi için bkz. Azure İşlevleri ile Azure Static Web Apps'e API ekleme.

Dekont

İşlevinizi uygulamak üzere belirteçleri imzalamak için Azure İşlevi Uygulama bölümünde örnek Azure İşlevi kodunu kullanabilirsiniz.

Azure İşleviniz dağıtıldıktan sonra AzureFunctionTokenProvider'a geçirilen URL'yi güncelleştirmeniz gerekir.

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

npm run build Uygulamayı yeniden derlemek için kök dizinden komutunu çalıştırın. Bu, Statik Web uygulamasına dağıtılması gereken uygulama kodunu içeren bir dist klasör oluşturur.

Azure'da oturum açma

Azure hizmet uzantılarını zaten kullanıyorsanız oturum açmış olmanız gerekir ve bu adımı atlayabilirsiniz.

Visual Studio Code'da bir uzantı yükledikten sonra Azure hesabınızda oturum açmanız gerekir.

  1. Visual Studio Code'da Azure gezgini simgesini ve ardından Azure'da oturum aç'ı seçin ve istemleri izleyin.

    Sign in to Azure through VS Code

  2. Oturum açtıktan sonra Azure hesabınızın e-posta adresinin Durum Çubuğu'nda, aboneliklerinizin ise Azure gezgininde göründüğünü doğrulayın:

    VS Code Azure explorer showing subscriptions

Statik web uygulaması oluşturma

  1. Visual Studio Code'un etkinlik çubuğundan Azure logosunu seçerek Azure uzantıları penceresini açın.

    An image of the Azure Logo on a white background.

    Dekont

    Devam etmek için Visual Studio Code'da Azure ve GitHub'da oturum açmanız gerekir. Henüz kimliğiniz doğrulanmamışsa, uzantı oluşturma işlemi sırasında her iki hizmette de oturum açmanızı ister.

  2. Visual Studio Code komut paletini açmak için F1'i seçin.

  3. Komut kutusuna Statik web uygulaması oluştur yazın.

  4. Azure Statik Web Uygulamaları: Statik web uygulaması oluştur... öğesini ve ardından Enter'ı seçin.

    Ayar Değer
    Adı my-first-static-web-app girin
    Bölge Size en yakın bölgeyi seçin.
    Derleme ön ayarı Özel'i seçin.

  5. Çerçeve önceden ayarlanmış seçiminizle eşleşen ayarlar değerlerini girin.

    Ayar Değer
    Uygulama kodunun konumu /src girin
    Azure İşlev kodunun konumu api

  6. Uygulama oluşturulduktan sonra Visual Studio Code'da bir onay bildirimi gösterilir.

    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.

    Dağıtım devam ederken Visual Studio Code uzantısı derleme durumunu size bildirir.

    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.

    Dağıtım tamamlandıktan sonra doğrudan web sitenize gidebilirsiniz.

  7. Web sitesini tarayıcıda görüntülemek için, Statik Web Apps uzantısında projeye sağ tıklayın ve Siteye Gözat'ı seçin.

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

  8. Uygulama kodunuzun konumu, Azure İşlevi ve derleme çıkışı, dizinde bulunan iş akışı dosyasının /.github/workflows bir parçasıdırazure-static-web-apps-xxx-xxx-xxx.yml. Bu dosya, Statik Web uygulamasını oluşturduğunuzda otomatik olarak oluşturulur. Statik Web uygulamanızı derlemek ve dağıtmak için bir GitHub Actions tanımlar.

Kaynakları temizleme

Bu uygulamayı kullanmaya devam etmeyecekseniz uzantı aracılığıyla Azure Static Web Apps örneğini silebilirsiniz.

Visual Studio Code Gezgini penceresinde Statik Web Uygulamaları bölümüne dönün ve my-first-static-web-app öğesine sağ tıklayın ve Sil'i seçin.

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