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

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 dağıtacaksınız.

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

Önkoşullar

Depoyu ayrı bir kopyasını oluşturup klonlama

https://github.com/microsoft/FluidHelloWorld FluidHelloWorld deposunun kendi çatalını oluşturmak için Çatal düğmesine gidip 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

<YOUR_GITHUB_ACCOUNT_NAME> yerine GitHub kullanıcı adınızı değiştirmeyi unutmayın.

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

Azure Fluid Relay bağlan

Azure kaynağı oluştururken sizin için benzersiz olarak oluşturulan kiracı kimliğini ve anahtarı sağlayarak Azure Fluid Relay'e bağlanabilirsiniz. Kendi belirteç sağlayıcısı uygulamanızı oluşturabilir veya Fluid Framework'ün sağladığı 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. Hizmete bağlanma ve 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ı kullanarak Azure İşlevi dağıtma

Azure Static Web Apps, tüm web barındırma ortamının sunucu tarafı yapılandırmasıyla uğraşmanıza gerek kalmadan tam yığın web sitesi geliştirmenizi sağlar. statik web sitenizin yanında Azure Functions dağıtabilirsiniz. Bu özelliği kullanarak, belirteçleri imzalayacak HTTP ile tetiklenen bir Azure İşlevi dağıtabilirsiniz.

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

Uyarı

Azure İşlevinizi uygulamak için Belirteçleri İmzalamak için Bir Azure İşlevi Gerçekleştirmek bölümündeki örnek Azure Function 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 oturum açma

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

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

  1. Visual Studio Code Azure explorer simgesini seçin, ardından Azure için oturum açın'ı seçin ve istemleri izleyin.

    VS Code aracılığıyla Azure'da oturum açın

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

    VS Code Azure gezgini abonelikleri gösteriyor

Statik web uygulaması oluşturma

  1. Visual Studio Code içinde Etkinlik Çubuğu'ndaki Azure logosunu seçerek Azure uzantıları penceresini açın.

    Beyaz bir arka planda Azure Logosu resmi.

    Uyarı

    Devam etmek için Visual Studio Code'da Azure ve GitHub'a 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 öğesini seçin.

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

  4. Azure Static Web Apps: Statik web uygulaması oluştur... öğesini seçin. ve Enter öğesini seçin.

    Setting Değer
    İsim 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 ön ayarlı seçiminizle eşleşen ayar değerlerini girin.

    Setting Değer
    Uygulama kodunun konumu /src girin
    Azure İşlev kodunun konumu API

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

    Uygulama oluşturulurken Visual Studio Code'da gösterilen bildirimin resmi. Bildirimde şu ifade yer alıyor: 'my-first-static-web-app' adlı yeni statik web uygulaması başarıyla oluşturuldu. GitHub Actions uygulamanızı derliyor ve dağıtıyor, dağıtım tamamlandığında kullanılabilir olacaktır.

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

    Bir abonelik altındaki static web apps listesini gösteren Static Web Apps uzantısı kullanıcı arabiriminin görüntüsü. Vurgulanan statik web uygulamasının yanında Dağıtım Bekleniyor durumu görüntüleniyor.

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

  7. Web sitesini tarayıcıda görüntülemek için, Static Web Apps uzantısında projeye sağ tıklayın ve Browse Site öğesini seçin.

    Statik bir web uygulamasına sağ tıklandığında gösterilen menünün görüntüsü. Siteye Gözat seçeneği vurgulanır.

  8. Uygulama kodunuzun konumu, Azure İşlevi ve derleme çıkışı, azure-static-web-apps-xxx-xxx-xxx.yml dizininde bulunan /.github/workflows iş akışı dosyasının bir parçasıdır. 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ı temizle

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

Visual Studio Code Gezgini penceresinde Static Web Apps bölümüne dönün ve my-first-static-web-app sağ tıklayın ve Delete'yi seçin.

Statik bir web uygulamasına sağ tıklandığında gösterilen menünün görüntüsü. Sil seçeneği vurgulanır.

  • Son güncelleştirme: