Alıştırma - SignalR Hizmeti’ni kullanarak bir web uygulamasında otomatik güncelleştirmeleri etkinleştirme

12 dakika

Bu prototipe SignalR eklemek için şunları oluşturmanız gerekir:

Azure SignalR kaynağı
SignalR'yi desteklemek için birkaç yeni işlev
İstemciyi SignalR'yi destekleyecek şekilde güncelleştirme

SignalR kaynağı oluşturma

Bir Azure SignalR kaynağı oluşturmanız gerekir.

SignalR kaynağını oluşturmak için terminale dönün.

Kaynağı oluşturmak için setup-resources alt dizine gidin.

cd stock-prototype/setup-resources && bash create-signalr-resources.sh & cd ..

SignalR kaynağının bağlantı dizesi kopyalayın. Sunucu kodunu güncelleştirmek için buna ihtiyacınız olacaktır.

Kaynak Türü Ortam değişkeni

Azure SignalR SIGNALR_CONNECTION_STRING olarak adlandırılır

Kaynak Türü	Ortam değişkeni
Azure SignalR	SIGNALR_CONNECTION_STRING olarak adlandırılır

Sunucu yapılandırma ortamı değişkenlerini güncelleştirme

./start/server/local.settings.json içinde, terminalde listelenen değerle adlı SIGNALR_CONNECTION_STRING Values nesnesine bir değişken ekleyin ve dosyayı kaydedin.

İşlevi `signalr-open-connection` oluşturma

Web istemcisi, sunucuyla bağlantı kurmak için SignalR istemcisi SDK’sını kullanır. SDK, hizmete bağlanmak için signalr-open-connection adlı bir işlev aracılığıyla bağlantıyı alır.

F1’e basarak Visual Studio Code komut paletini açın.
Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.
Varsayılanı ayarla'yı ve ardından başlat/sunucu'ya seçerek İşlev uygulamasının konumunu ayarlayın.
VS Code ile kullanmak üzere projeyi başlatmanız istendiğinde Evet'i seçin.
İstendiğinde aşağıdaki bilgileri girin.

Veri Akışı Adı Değer

Template HTTP Tetikleyicisi

Veri Akışı Adı signalr-open-connection

signalr-open-connection.ts adlı bir dosya artık adresinde ./start/server/src/functionskullanılabilir.

Veri Akışı Adı	Değer
Template	HTTP Tetikleyicisi
Veri Akışı Adı	signalr-open-connection

signalr-open-connection.ts açın ve her şeyi aşağıdaki kodla değiştirin.

import { app, input } from '@azure/functions';

const inputSignalR = input.generic({
    type: 'signalRConnectionInfo',
    name: 'connectionInfo',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

app.http('open-signalr-connection', {
    authLevel: 'anonymous',
    handler: (request, context) => {
        return { body: JSON.stringify(context.extraInputs.get(inputSignalR)) }
    },
    route: 'negotiate',
    extraInputs: [inputSignalR]
});

SignalR bağlantı bilgileri işlevinden döndürülür.

İşlevi `signalr-send-message` oluşturma

F1’e basarak Visual Studio Code komut paletini açın.
Azure İşlevleri: İşlev Oluştur komutunu arayın ve seçin.
İşlev uygulamasının başlangıç/sunucu olarak konumunu seçin.

İstendiğinde aşağıdaki bilgileri girin.

Veri Akışı Adı	Değer
Template	Azure Cosmos DB tetikleyicisi
Veri Akışı Adı	`signalr-send-message`
Cosmos DB bağlantı dizesi	COSMOSDB_CONNECTION_STRING
İzlenecek veritabanı adı	`stocksdb`
Koleksiyon adı	`stocks`
Varlığı denetler ve kira koleksiyonunu otomatik olarak oluşturur	true

Güncelleştirmeleri görmek için Visual Studio Code’un Gezgin penceresini yenileyin. signalr-open-connection adlı bir dosya artık adresinde ./start/server/src/functionskullanılabilir.

signalr-send-message.ts açın ve her şeyi aşağıdaki kodla değiştirin.

import { app, output, CosmosDBv4FunctionOptions, InvocationContext } from "@azure/functions";

const goingOutToSignalR = output.generic({
    type: 'signalR',
    name: 'signalR',
    hubName: 'default',
    connectionStringSetting: 'SIGNALR_CONNECTION_STRING',
});

export async function dataToMessage(documents: unknown[], context: InvocationContext): Promise<void> {

    try {

        context.log(`Documents: ${JSON.stringify(documents)}`);

        documents.map(stock => {
            // @ts-ignore
            context.log(`Get price ${stock.symbol} ${stock.price}`);
            context.extraOutputs.set(goingOutToSignalR,
                {
                    'target': 'updated',
                    'arguments': [stock]
                });
        });
    } catch (error) {
        context.log(`Error: ${error}`);
    }
}

const options: CosmosDBv4FunctionOptions = {
    connection: 'COSMOSDB_CONNECTION_STRING',
    databaseName: 'stocksdb',
    containerName: 'stocks',
    createLeaseContainerIfNotExists: true,
    feedPollDelay: 500,
    handler: dataToMessage,
    extraOutputs: [goingOutToSignalR],
};

app.cosmosDB('send-signalr-messages', options);

Gelen verileri tanımlama: comingFromCosmosDB Nesne, değişiklikleri izlemek için Cosmos DB tetikleyicisini tanımlar.
Giden aktarımı tanımlama: goingOutToSignalR Nesnesi aynı SignalR bağlantısını tanımlar. hubName aynı hub'dır default.
Verileri aktarıma bağlama: , dataToMessage tablodaki stocks değiştirilen öğeleri alır ve aynı hub'ı defaultkullanarak SignalR aracılığıyla değiştirilen her öğeyi extraOutputs tek tek gönderir.
Uygulamaya bağlan: app.CosmosDB Bağlamaları işlev adına send-signalr-messagesbağlar.

Değişiklikleri işleme ve GitHub'a gönderme

Terminalde değişiklikleri depoya işleyin.

git add .
git commit -m "Add SignalR functions"
git push

İşlevi `signalr-send-message` oluşturma

Azure'da yeni işlev kodunu yayımlayabileceğiniz bir işlev uygulaması ve ilgili kaynaklar oluşturun.

Yeni bir işlev uygulaması oluşturmak için Azure portalını açın.

Kaynak oluşturma temel bilgileri sekmesini tamamlamak için aşağıdaki bilgileri kullanın.

Veri Akışı Adı	Değer
Kaynak grubu	Yeni bir kaynak grubu adı `stock-prototype`oluşturun.
İşlev Uygulamasının adı	Adınızı adresine postayla `api`ekleyin. Örneğin, `api-jamie`.
Kod veya kapsayıcı	Kodu seçin.
Çalışma zamanı yığını	Node.js’yi seçin.
Sürüm	Node.js lts sürümünü seçin.
Bölge	Size yakın bir bölge seçin.
İşletim Sistemi	Linux'ı seçin.
Barındırma	Tüketim Planı'nı seçin.

Diğer sekmeleri doldurmayın ve Gözden geçir + oluştur'u ve ardından Oluştur'u seçin. Devam etmeden önce dağıtımın tamamlanmasını bekleyin.
Yeni işlev uygulamasını açmak için Kaynağa git'i seçin.

GitHub dağıtımını yapılandırma

Sürekli dağıtımı etkinleştirmek için yeni işlev uygulamanızı GitHub deposuna bağlayın. Üretim ortamında, kod değişikliklerini üretim ortamına değiştirmeden önce hazırlama yuvasına dağıtırsınız.

Yeni işlev uygulamasının Azure portalı sayfasında sol taraftaki menüden Dağıtım Merkezi'ni seçin.
GitHub Kaynağı'nı seçin.

Dağıtım yapılandırmasını tamamlamak için aşağıdaki bilgileri kullanın.

Veri Akışı Adı	Değer
Kuruluş	GitHub hesabınızı seçin.
Depo	`mslearn-advocates.azure-functions-and-signalr` araması yapın ve sonuçlardan bunu seçin.
Şube	Ana dalı seçin.
İş Akışı Seçeneği	İş akışı ekle .... öğesini seçin.
Authentication type	Kullanıcı tarafından atanan kimlik'i seçin.
Abonelik	Sayfanın üst kısmında gösterildiği gibi aynı aboneliği seçin.
Kimlik	Yeni oluştur’u seçin.

Ayarları kaydetmek için bölümün üst kısmındaki Kaydet'i seçin. Bu, çatallanmış deponuzda yeni bir iş akışı dosyası oluşturur.
Bu dağıtım yapılandırması, depoda bir GitHub Actions iş akışı dosyası oluşturur. İş akışı dosyasını işlev uygulaması için doğru paket yolunu kullanacak şekilde güncelleştirmeniz gerekir.

Bu noktada GitHub dağıtımınız, Azure'daki kaynak grubunuzda oluşturulan kullanıcı tarafından atanan yönetilen kimlikte yanlış yapılandırma nedeniyle bir hata oluşturabilir.

Yönetilen kimliği güncelleştirme

Azure portalındaki yeni işlev uygulaması sayfanızda, Genel Bakış>Temel Parçalar'da kaynak grubunuzu seçin ve ardından Kaynaklar'ın altında yönetilen kimliği seçin. Bu yönetilen kimlik, GitHub dağıtımını etkinleştirdiğinizde İşlevler tarafından oluşturulmuştur.
Yönetilen Kimlik sayfasında Ayarlar>Federasyon kimlik bilgileri'ni ve ardından mevcut kimlik bilgilerini seçin.
Github hesabınızı bağlama bölümünde Varlık ayarını Ortam olarak değiştirin ve Ortam için girinProduction.
Kimlik bilgilerini güncelleştirmek için Güncelleştir'i seçin.

GitHub dağıtım iş akışını düzenleme

Visual Studio Code terminalinde, çatalınızdan (kaynak) yeni iş akışı dosyasını aşağı çekin.
```
git pull origin main
```
Bu, .github'a iş akışı dosyanızın yolunu içeren yeni bir klasör yerleştirmelidir: .github/workflows/main_RESOURCE_NAME.yml burada RESOURCE_NAME işlev uygulaması adıdır.
İş akışı dosyasını açın ve dosyanın en üstündeki değeri olarak Serverdeğiştirinname.
Kaynak depoda işlev uygulaması bir alt dizinde olduğundan, eylem dosyasının bunu yansıtacak şekilde değiştirilmesi gerekir. env bölümünde, paket yolunu kullanmak için adlı PACKAGE_PATH yeni bir değişken ekleyin.
```
env:
  PACKAGE_PATH: 'start/server'
```
Npm Kullanarak Proje Bağımlılıklarını Çözümle adımını bulun ve paket alt dizini yolunu da kullanmak için içeriği aşağıdaki YAML ile değiştirin. Kritik değişiklik, komutunda pushd değişkenin dahil olduğu env.PACKAGE_PATH yoldur.
```
- name: 'Resolve Project Dependencies Using Npm'
  shell: bash
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    npm install
    npm run build --if-present
    npm run test --if-present
    popd
```

Dağıtım adımı için Zip yapıtını bulun ve paket alt dizinini de kullanmak için içeriği aşağıdaki YAML ile değiştirin.

- name: Zip artifact for deployment
  run: |
    pushd './${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}'
    zip -r release.zip .
    popd
    cp ./${{ env.AZURE_FUNCTIONAPP_PACKAGE_PATH }}/${{ env.PACKAGE_PATH }}/release.zip ./release.zip

Zip dosyası deponun köküne yerleştirilir, bu nedenle ../ zip dosyasını köke yerleştirmek için değer gereklidir.

Dosyayı kaydedin ve değişiklikleri depoya işleyin.
```
git add .
git commit -m "Update deployment workflow to use package path"
git push
```
Bu değişiklik iş akışının çalıştırılmasını tetikler. GitHub'da çatalın Eylemler bölümünden iş akışını izleyebilirsiniz.

API işlevleri için ortam değişkenlerini yapılandırma

Azure portalında işlev uygulamanızı bulun ve Ayarlar>Yapılandırması'nı ve ardından Yeni uygulama ayarı'nı seçin.
Cosmos DB ve SignalR bağlantı dizesi ayarlarını girin. değerlerini local.settings.json start/server klasöründe bulabilirsiniz.

Veri Akışı Adı Değer

COSMOSDB_CONNECTION_STRING Cosmos DB hesabının bağlantı dizesi.

SIGNALR_CONNECTION_STRING SignalR hesabının bağlantı dizesi.
Ayarları kaydetmek için Kaydet’i seçin.

Veri Akışı Adı	Değer
COSMOSDB_CONNECTION_STRING	Cosmos DB hesabının bağlantı dizesi.
SIGNALR_CONNECTION_STRING	SignalR hesabının bağlantı dizesi.

API İşlevlerinin dağıtımını test edin

Azure portalında Genel Bakış'ı seçin ve url'yi seçerek uygulamayı tarayıcıda açın.
URL'yi kopyalayın; 7. Ünite'de çalışırken değerin BACKEND_URL istemci .env dosyasını güncelleştirirken buna ihtiyacınız olur.
API işlevlerini test etmek için TARAYıCıDA URL'yi açın.
Tarayıcıda URL'ye ekleyin /api/getStocks ve Enter tuşuna basın. Stok verileri içeren bir JSON dizisi görmeniz gerekir.

SignalR ile hisse senetlerini iade etmek için sunucu kodunu güncelleştirdiniz ve bir işlev uygulamasına dağıttınız. Ardından istemciyi güncelleştirmeleri almak için SignalR kullanacak şekilde güncelleştireceksiniz.

Alıştırma - SignalR Hizmeti’ni kullanarak bir web uygulamasında otomatik güncelleştirmeleri etkinleştirme

SignalR kaynağı oluşturma

Sunucu yapılandırma ortamı değişkenlerini güncelleştirme

İşlevi signalr-open-connection oluşturma

İşlevi signalr-send-message oluşturma

Değişiklikleri işleme ve GitHub'a gönderme

İşlevi signalr-send-message oluşturma

GitHub dağıtımını yapılandırma

Yönetilen kimliği güncelleştirme

GitHub dağıtım iş akışını düzenleme

API işlevleri için ortam değişkenlerini yapılandırma

API İşlevlerinin dağıtımını test edin

Geri Bildirim

İşlevi `signalr-open-connection` oluşturma

İşlevi `signalr-send-message` oluşturma

İşlevi `signalr-send-message` oluşturma