Özel Bir Uygulamadan Teams Toplantısına Sesli/Görüntülü Arama

Makale
Developer (Orta)
Tamamlanması için 59 dakika kaldı

Düzey: Ara

Bu öğreticide, Azure İletişim Hizmetleri kullanıcının Microsoft Teams toplantısında sesli/görüntülü arama yapmasına izin vermek için özel bir React uygulamasında nasıl kullanılabileceğini öğreneceksiniz. Bu senaryoyu mümkün kılmak için kullanılabilecek farklı yapı taşları hakkında bilgi edinecek ve ilgili farklı Microsoft Bulut hizmetlerinde size yol gösteren uygulamalı adımlar sağlanacaktır.

Bu Öğreticide Neler Oluşturacaksınız?

Uygulama Çözümüne Genel Bakış

ACS Ses/Video Çözümü

Önkoşullar

Node LTS - Bu proje için Node LTS kullanılır
git
Visual Studio Code veya seçtiğiniz başka bir IDE.
VS Code için Azure İşlevleri Uzantısı
Azure Functions Core Tools
Azure Aboneliği
Microsoft 365 geliştirici kiracısı
GitHub hesabı
Öğreticinin C# sürümünü kullanıyorsanız Visual Studio . Tercih ederseniz Visual Studio Code da kullanılabilir.

Bu öğreticide kullanılan teknolojiler şunlardır:

React
Azure İletişim Hizmetleri
Azure İşlevleri
Microsoft Graph
Microsoft Teams

Azure İletişim Hizmetleri Kaynağı Oluşturma

57 dakika kaldı

Bu alıştırmada Azure portalında bir Azure İletişim Hizmetleri (ACS) kaynağı oluşturacaksınız.

Azure portalında ACS

Başlamak için aşağıdaki görevleri gerçekleştirin:

Tarayıcınızda Azure portalını ziyaret edin ve oturum açın.
Sayfanın üst kısmındaki arama çubuğuna iletişim hizmetleri yazın ve görüntülenen seçeneklerden İletişim Hizmetleri'ni seçin.
Araç çubuğunda Oluştur'u seçin.
Aşağıdaki görevleri gerçekleştirin:
- Azure aboneliği seçin.
- Kullanılacak kaynak grubunu seçin (yoksa yeni bir grup oluşturun).
- Bir ACS kaynak adı girin. Bu, benzersiz bir değer olmalıdır.
- Bir veri konumu seçin.
Gözden Geçir + Oluştur'u ve ardından Oluştur'u seçin.
ACS kaynağınız oluşturulduktan sonra bu kaynağa gidin ve Ayarlar --> Kimlikler ve Kullanıcı Erişim Belirteçleri'ni seçin.
Sesli ve görüntülü arama (VOIP) onay kutusunu seçin.
Oluştur seçeneğini belirleyin.
Kimlik ve Kullanıcı Erişimi belirteç değerlerini yerel bir dosyaya kopyalayın. Bu alıştırmanın ilerleyen bölümlerinde değerlere ihtiyacınız olacak.
Ayarlar --> Anahtarlar'ı seçin ve Birincil anahtar bağlantı dizesi değerini kullanıcı kimliği ve belirteç değerlerini kopyaladığınız yerel dosyaya kopyalayın.
Uygulamayı çalıştırmak için bir Teams toplantı bağlantısına ihtiyacınız vardır. Microsoft Teams'e gidin, Microsoft 365 geliştirici kiracınızla oturum açın ve soldaki Takvim seçeneğini belirleyin.

İpucu

Şu anda bir Microsoft 365 hesabınız yoksa Microsoft 365 Geliştirici Programı aboneliğine kaydolabilirsiniz. 90 gün boyunca ücretsizdir ve geliştirme etkinliği için kullandığınız sürece sürekli olarak yenilenir. Visual Studio Enterprise veya Professional aboneliğiniz varsa, her iki program da Visual Studio aboneliğinizin ömrü boyunca etkin olan ücretsiz bir Microsoft 365 geliştirici aboneliği içerir.
Takvimde herhangi bir tarih/saat seçin, toplantı için bir başlık ekleyin, Microsoft 365 geliştirici kiracınızdan bir kullanıcıyı davet edin ve Kaydet'i seçin.
Takvime eklediğiniz yeni toplantıyı seçin ve ACS kullanıcı kimliğini, belirtecini ve bağlantı dizesi depoladığınız dosyaya görüntülenen Teams toplantı bağlantısını kopyalayın.
ACS kaynağınız ayarlandı ve Teams toplantısına katılma bağlantınız olduğuna göre React uygulamasını çalışır duruma getirelim.

Azure İletişim Hizmetleri Çağrıyı React Uygulamasıyla Tümleştirme

47 dakika kaldı

Bu alıştırmada, özel bir uygulamadan Microsoft Teams toplantısına sesli/görüntülü arama yapmayı etkinleştirmek için ACS kullanıcı arabirimi çağrı bileşik bileşenini react uygulamasına ekleyeceksiniz.

React'te ACS

GitHub'ı ziyaret edin ve oturum açın. Henüz bir GitHub hesabınız yoksa kaydolma seçeneğini belirleyerek bir hesap oluşturabilirsiniz.
Microsoft Cloud GitHub Deposu'na gidin.
Depoyu istediğiniz GitHub kuruluşuna/hesabına eklemek için Çatal seçeneğini belirleyin.
Bu depoyu makinenize kopyalamak için aşağıdaki komutu çalıştırın. YOUR_ORG_NAME> yerine GitHub kuruluşunuzun/hesap adınızı yazın<.
```
git clone https://github.com/<YOUR_ORG_NAME>/MicrosoftCloud
```
Visual Studio Code'da samples/acs-to-teams-meeting proje klasörünü açın.
client/react klasörünü genişletin.
package.json dosyasını VS Code'da açın ve aşağıdaki ACS paketlerinin dahil olduğunu unutmayın:
```
@azure/communication-common 
@azure/communication-react
```
Bir terminal penceresi açıp aşağıdaki komutu çalıştırarak npm 10 veya üstünün yüklü olup olmadığını bir kez daha denetleyin:
```
npm --version
```
İpucu

Npm 10 veya üzeri yüklü değilse komutunu çalıştırarak npm install -g npmnpm'yi en son sürüme güncelleştirebilirsiniz.
Uygulama bağımlılıklarını yüklemek için bir terminal penceresi açın ve react klasöründe komutunu çalıştırınnpm install.
App.tsx dosyasını açın ve dosyanın en üstündeki içeri aktarmaları incelemek için biraz bekleyin. Bunlar, uygulamada kullanılacak ACS güvenlik ve sesli/görüntülü arama simgelerini içeri aktarmayı işler.
```
import { 
    AzureCommunicationTokenCredential,
    CommunicationUserIdentifier 
} from '@azure/communication-common';
import {  
  CallComposite, 
  fromFlatCommunicationIdentifier, 
  useAzureCommunicationCallAdapter 
} from '@azure/communication-react';
import React, { useState, useMemo, useEffect } from 'react';
import './App.css';
```
Not

Bu alıştırmanın ilerleyen bölümlerinde bileşenin CallComposite nasıl kullanıldığını göreceksiniz. Uygulamadan Microsoft Teams toplantısına sesli/görüntülü arama yapmayı etkinleştirmek için Azure İletişim Hizmetleri için temel kullanıcı arabirimi işlevselliği sağlar.
App Bileşeni bulun ve aşağıdaki görevleri gerçekleştirin:
- Bileşendeki useState tanımları incelemek için bir dakika bekleyin.
- İşlevin userId useState boş tırnaklarını önceki alıştırmada kopyaladığınız ACS kullanıcı kimliği değeriyle değiştirin.
- İşlevin token useState boş tırnaklarını önceki alıştırmada kopyaladığınız ACS belirteci değeriyle değiştirin.
- İşlevin teamsMeetingLink useState boş tırnaklarını önceki alıştırmada kopyaladığınız Teams toplantısı bağlantı değeriyle değiştirin.
```
// Replace '' with the ACS user identity value
const [userId, setUserId] = useState<string>('');

// Replace '' with the ACS token value
const [token, setToken] = useState<string>('');

// Replace '' with the Teams meeting link value
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```
Not

Bu öğreticinin ilerleyen bölümlerinde , tokenve teamsMeetingLink değerlerini dinamik olarak nasıl alabileceğinizi userIdgöreceksiniz.
Bileşendeki useMemo App işlevleri keşfetmek için biraz zaman ayırın.
- credential useMemo belirteç bir değere sahip olduğunda işlev yeni AzureCommunicationTokenCredential bir örnek oluşturur.
- İşlev, callAdapterArgs useMemo sesli/görüntülü arama yapmak için kullanılan bağımsız değişkenleri içeren bir nesne döndürür. ACS çağrı bağımsız değişkenlerinde , credentialve teamsMeetingLink değerlerinin kullanıldığına userIddikkat edin.
```
const credential = useMemo(() => {
    if (token) {
        return new AzureCommunicationTokenCredential(token)
    }
    return;
}, [token]);

const callAdapterArgs = useMemo(() => {
    if (userId && credential && displayName && teamsMeetingLink) {
        return {
            userId: fromFlatCommunicationIdentifier(userId) as CommunicationUserIdentifier,
            displayName,
            credential,
            locator: { meetingLink: teamsMeetingLink },
        }
    }
    return {};
}, [userId, credential, displayName, teamsMeetingLink]);
```
Not

useMemo nesnenin AzureCommunicationTokenCredential ve çağrı bağdaştırıcısının yalnızca gerekli parametreler geçirildikçe bir kez oluşturulmasını istediğimizden bu senaryoda kullanılır. useMemo ile ilgili ek ayrıntıları burada görüntüleyebilirsiniz.
credentials ve callAdapterArgs hazır olduğunda aşağıdaki satır, ACS tarafından sağlanan React kancasını useAzureCommunicationCallAdapter kullanarak bir ACS çağrı bağdaştırıcısı oluşturmayı işler. callAdapter nesnesi daha sonra bileşik bileşeni çağıran kullanıcı arabiriminde kullanılacaktır.
```
const callAdapter = useAzureCommunicationCallAdapter(callAdapterArgs);
```
Not

useAzureCommunicationCallAdapter React kancası olduğundan, değer callAdapter geçerli olana kadar callAdapterArgs değerine değer atamaz.

Daha önce kullanıcı kimliğini, belirteci ve Teams toplantı bağlantısını bileşendeki App durum değerlerine atamıştınız. Bu şimdilik düzgün çalışıyor, ancak sonraki bir alıştırmada bu değerleri dinamik olarak nasıl alabileceğinizi göreceksiniz. Değerleri daha önce ayarladığınızdan, işlevdeki useEffect kodu sonrakinde gösterildiği gibi açıklama satırı yapın. Sonraki alıştırmalarda Azure İşlevleri çalıştırdıktan sonra bu kodu yeniden ziyaret edersiniz.

useEffect(() => {
    /* Commenting out for now

    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

    */
}, []);

Aşağıdaki JSX kodunu bulun. React uygulamasından Teams toplantısına CallComposite sesli/görüntülü arama yapmak için kullanılan kullanıcı arabirimini işlemek için içeri aktarılmış olarak gördüğünüz simgeyi kullanır. Daha callAdapter önce keşfettiniz, gerekli bağımsız değişkenleri sağlamak için özelliğine geçirilir adapter .
```
if (callAdapter) {
    return (
        <div>
            <h1>Contact Customer Service</h1>
            <div className="wrapper">
                <CallComposite
                    adapter={callAdapter} 
                />
            </div>
        </div>
    );
}
```
Devam etmeden önce dosyayı kaydedin.
npm start Uygulamayı çalıştırmak için terminal pencerenizde komutunu çalıştırın. React klasöründe komutunu çalıştırdığınızdan emin olun.
Uygulamalar derlendikten sonra bir arama kullanıcı arabiriminin görüntülendiğini görmeniz gerekir. Mikrofonunuzu ve kameranızı seçip aramayı başlatın. Bekleme odasına yerleştirildiğinizi görmelisiniz. Daha önce Microsoft Teams'de oluşturduğunuz toplantıya katılırsanız, konuğun toplantıya girmesine izin vekleyebilirsiniz.
Uygulamayı durdurmak için Ctrl + C tuşlarına basın. Şimdi başarıyla çalıştırdığınıza göre ACS kullanıcı kimliğini ve belirtecini dinamik olarak nasıl edinebileceğinizi ve otomatik olarak bir Microsoft Teams toplantısı oluşturup Microsoft Graph kullanarak katılma URL'sini nasıl döndürebileceğinizi keşfedelim.

Microsoft Graph kullanarak Dinamik Olarak Microsoft Teams Toplantısı Oluşturma

37 dakika kaldı

Bu alıştırmada, Azure İşlevleri ve Microsoft Graph kullanarak Microsoft Teams toplantı bağlantısı oluşturma ve ACS'ye geçiş işlemini otomatikleştireceksiniz.

Teams Toplantısı Oluşturma

Daemon uygulama kimlik doğrulaması için bir Microsoft Entra ID uygulaması oluşturmanız gerekir. Bu adımda, kimlik doğrulaması arka planda uygulama kimlik bilgileriyle işlenir ve bir Microsoft Entra ID uygulaması Microsoft Graph API çağrıları yapmak için Uygulama İzinleri'ni kullanır. Microsoft Graph, dinamik olarak bir Microsoft Teams toplantısı oluşturmak ve Teams toplantısı URL'sini döndürmek için kullanılır.
Bir Microsoft Entra ID uygulaması oluşturmak için aşağıdaki adımları gerçekleştirin:
1. Azure portalına gidin ve Microsoft Entra Id'yi seçin.
2. Uygulama kaydı sekmesini ve ardından + Yeni kayıt'ı seçin.
3. Yeni uygulama kayıt formu ayrıntılarını aşağıda gösterildiği gibi doldurun ve Kaydet'i seçin:
  - Ad: ACS Teams Birlikte Çalışma Uygulaması
  - Desteklenen hesap türleri: Herhangi bir kuruluş dizinindeki hesaplar (Herhangi bir Microsoft Entra ID dizini - Çok Kiracılı) ve kişisel Microsoft hesapları (örneğin Skype, Xbox)
  - Yeniden yönlendirme URI'si: Bu değeri boş bırakın
4. Uygulama kaydedildikten sonra API izinleri'ne gidin ve + İzin ekle'yi seçin.
5. Microsoft Graph'ı ve ardından Uygulama izinleri'yi seçin.
6. Calendars.ReadWrite İzni ve ardından Ekle'yi seçin.
7. İzinleri ekledikten sonra YOUR_ORGANIZATION_NAME> için <yönetici onayı ver'i seçin.
8. Sertifikalar ve gizli diziler sekmesine gidin, + Yeni istemci gizli dizisi'ni ve ardından Ekle'yi seçin.
9. Gizli dizinin değerini yerel bir dosyaya kopyalayın. Değerini bu alıştırmanın ilerleyen bölümlerinde kullanacaksınız.
10. Genel Bakış sekmesine gidin ve değerlerini önceki adımda kullandığınız yerel dosyaya kopyalayın Directory (tenant) ID Application (client) ID.

samples/acs-to-teams-meeting/server/csharp/GraphACSFunctions.sln dosyasını Visual Studio'da açın veya Visual Studio Code'da GraphACSFunctions klasörünü açın.
GraphACSFunctions Projeye gidin ve aşağıdaki değerleri içeren bir local.settings.json dosya oluşturun:
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "dotnet-isolated",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- ve değerlerini güncelleştirmek TENANT_IDCLIENT_ID CLIENT_SECRET için önceki bir alıştırmada yerel dosyaya kopyaladığınız değerleri kullanın.
- Microsoft Teams Toplantısı oluşturmak istediğiniz kullanıcı kimliğiyle tanımlayın USER_ID .
Kullanıcı Kimliğini Azure portalından alabilirsiniz.
- Microsoft 365 geliştirici kiracısı yönetici hesabınızı kullanarak oturum açın.
- Microsoft Entra ID'yi seçin
- Yan çubukta Kullanıcılar sekmesine gidin.
- Kullanıcı adınızı arayın ve kullanıcı ayrıntılarını görmek için seçin.
- Kullanıcı ayrıntılarının içinde öğesini Object ID temsil eder User ID. Object ID Değeri kopyalayın ve local.settings.json değeri için USER_ID kullanın.
Not

ACS_CONNECTION_STRING bir sonraki alıştırmada kullanılacaktır, bu nedenle henüz güncelleştirmeniz gerekmez.

acs-to-teams-meeting/server/csharp klasöründe bulunan open GraphACSFunctions.sln ve aşağıdaki Microsoft Graph ve Identity paketlerini içerdiğini unutmayın:

<PackageReference Include="Azure.Communication.Identity" Version="1.3.1" />
<PackageReference Include="Azure.Identity" Version="1.11.2" />
<PackageReference Include="Microsoft.Graph" Version="5.51.0" />

Program.cs gidin ve yönteminde ConfigureServices aşağıdaki kodu not edin:

    var host = new HostBuilder()
        .ConfigureFunctionsWebApplication()
        .ConfigureServices(services => {
            services.AddApplicationInsightsTelemetryWorkerService();
            services.ConfigureFunctionsApplicationInsights();
            services.AddSingleton(static p =>
            {
                var config = p.GetRequiredService<IConfiguration>();
                var clientSecretCredential = new ClientSecretCredential(
                    config.GetValue<string>("TENANT_ID"),
                    config.GetValue<string>("CLIENT_ID"),
                    config.GetValue<string>("CLIENT_SECRET")
                );

                return new GraphServiceClient(
                    clientSecretCredential,
                    ["https://graph.microsoft.com/.default"]
                );
            });

            ...

            services.AddSingleton<IGraphService, GraphService>();
        })
        .Build();
}

Bu kod, Azure İşlevleri'dan Microsoft Graph'ı çağırmak için kullanılabilecek bir GraphServiceClient nesne oluşturur. Tekildir ve diğer sınıflara eklenebilir.
Oluşturucuya bir ClientSecretCredential değer geçirerek yalnızca uygulama izinleriyle (Calendars.ReadWrite gibi) Microsoft Graph API çağrıları GraphServiceClient yapabilirsiniz. , ClientSecretCredential Microsoft Entra ID uygulamasından ve Client Id Client Secret değerlerini kullanırTenant Id.

Hizmetler/GraphService.cs'i açın.

Yöntemini keşfetmek CreateMeetingEventAsync için biraz zaman ayırın:

using System;
using System.Threading.Tasks;
using Microsoft.Graph;
using Microsoft.Extensions.Configuration;

namespace GraphACSFunctions.Services;

public class GraphService : IGraphService
{
    private readonly GraphServiceClient _graphServiceClient;
    private readonly IConfiguration _configuration;

    public GraphService(GraphServiceClient graphServiceClient, IConfiguration configuration)
    {
        _graphServiceClient = graphServiceClient;
        _configuration = configuration;
    }

    public async Task<string> CreateMeetingAsync()
    {
        var userId = _configuration.GetValue<string>("USER_ID");
        var newMeeting = await _graphServiceClient
            .Users[userId]
            .Calendar
            .Events
            .PostAsync(new()
            {
                Subject = "Customer Service Meeting",
                Start = new()
                {
                    DateTime = DateTime.UtcNow.ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                End = new()
                {
                    DateTime = DateTime.UtcNow.AddHours(1).ToString("yyyy-MM-ddTHH:mm:ss"),
                    TimeZone = "UTC"
                },
                IsOnlineMeeting = true
            });
        return newMeeting.OnlineMeeting.JoinUrl;
    }
}

GraphServiceClient ve IConfiguration nesneleri oluşturucuya eklenir ve alanlara atanır.
İşlev, CreateMeetingAsync() verileri kullanıcının takviminde dinamik olarak bir olay oluşturan ve birleştirme URL'sini döndüren Microsoft Graph Takvim Olayları API'sine postalar.

TeamsMeetingFunctions.cs açın ve oluşturucuyu incelemek için biraz bekleyin. Daha GraphServiceClient önce baktığınız eklenir ve alana atanır _graphService .
```
private readonly IGraphService _graphService;

public TeamsMeetingFunction(IGraphService graphService) => _graphService = graphService;
```

Run yöntemini bulun:

[Function("HttpTriggerTeamsUrl")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteStringAsync(await _graphService.CreateMeetingAsync());
    return response;
}

HTTP GET isteğiyle çağrılabilen işlev adını HttpTriggerTeamsUrl tanımlar.
yeni bir olay oluşturan ve birleştirme URL'sini döndüren öğesini çağırır _graphService.CreateMeetingAsync().

Visual Studio'da F5 tuşuna basarak veya menüden Hata Ayıkla --> Hata Ayıklamayı Başlat'ı seçerek programı çalıştırın. Bu eylem Azure İşlevleri projesini ACSTokenFunction başlatır ve çağrısı için kullanılabilir duruma getirir.

Not

VS Code kullanıyorsanız GraphACSFunctions klasöründe bir terminal penceresi açıp komutunu çalıştırabilirsinizfunc start. Bu, makinenizde Azure İşlevleri Temel Araçları'nın yüklü olduğunu varsayar.

Samples/acs-to-teams-meeting/server/typescript proje klasörünü Visual Studio Code'da açın.
Aşağıdaki değerlerle bir local.settings.json dosyası oluşturun:
```
{
    "IsEncrypted": false,
    "Values": {
        "FUNCTIONS_WORKER_RUNTIME": "node",
        "TENANT_ID": "",
        "CLIENT_ID": "",
        "CLIENT_SECRET": "",
        "USER_ID": "",
        "ACS_CONNECTION_STRING": ""
    },
    "Host": {
        "LocalHttpPort": 7071,
        "CORS": "*",
        "CORSCredentials": false
    },
    "watchDirectories": [
        "Shared"
    ]
}
```
- ve değerlerini güncelleştirmek TENANT_IDCLIENT_ID CLIENT_SECRET için önceki bir alıştırmada yerel dosyaya kopyaladığınız değerleri kullanın.
- Microsoft Teams Toplantısı oluşturmak istediğiniz kullanıcı kimliğiyle tanımlayın USER_ID .
Kullanıcı Kimliğini Azure portalından alabilirsiniz.
- Microsoft 365 geliştirici kiracısı yönetici hesabınızı kullanarak oturum açın.
- Microsoft Entra Id(Microsoft Entra Id) öğesini seçin,
- Yan çubukta Kullanıcılar sekmesine gidin.
- Kullanıcı adınızı arayın ve kullanıcı ayrıntılarını görmek için seçin.
- Kullanıcı ayrıntılarının içinde öğesini Object ID temsil eder User ID. Object ID Değeri kopyalayın ve local.settings.json değeri için USER_ID kullanın.
Not

ACS_CONNECTION_STRING bir sonraki alıştırmada kullanılacaktır, bu nedenle henüz güncelleştirmeniz gerekmez.
package.json dosyasını VS Code'da açın ve aşağıdaki Microsoft Graph ve Identity paketlerinin dahil olduğuna dikkat edin:
```
@azure/communication-identity
@azure/identity
@microsoft/microsoft-graph-client
```
typescript klasöründe bir terminal penceresi açın ve komutunu çalıştırarak npm install uygulama bağımlılıklarını yükleyin.
Paylaşılan/graph.ts açın ve dosyanın en üstündeki içeri aktarmaları incelemek için biraz bekleyin. Bu kod, Microsoft Graph'ı çağırmak için Azure İşlevi'nde kullanılan kimlik doğrulamasını ve istemci simgelerini içeri aktarmayı işler.
```
import { startDateTimeAsync, endDateTimeAsync } from './dateTimeFormat';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
import 'isomorphic-fetch';
```
İpucu

Ayrıca, bu alıştırmanın ilerleyen bölümlerinde kullanılan dateTimeFormat.ts içeri aktarmaları da göreceksiniz. startDateTimeAsync ve endDateTimeAsync toplantının başlangıç tarihini ve bitiş tarihini tanımlamak için bir Microsoft Teams toplantı bağlantısı oluşturulurken kullanılır.
ve appGraphClient'yi incelemek clientSecretCredential için biraz zaman ayırın. Bunlar daha sonra kimlik doğrulama işleminde ve Microsoft Graph API'sini çağırırken kullanılacaktır:
```
let clientSecretCredential;
let appGraphClient;
```

İşlevi ensureGraphForAppOnlyAuth bulun:

ClientSecretCredentialTenant Id, Client Id ve Client Secret değerlerini Microsoft Entra ID uygulamasından kullanır.
authProvider nesnesi, arka planda kimlik doğrulaması yapacak ve Microsoft Graph API çağrıları yapmak için yalnızca uygulama izinlerini (örneğin) kullanacak bir Microsoft Entra Id uygulaması olarak Calendars.ReadWritetanımlanır.

function ensureGraphForAppOnlyAuth() {
    if (!clientSecretCredential) {
        clientSecretCredential = new ClientSecretCredential(
            process.env.TENANT_ID,
            process.env.CLIENT_ID,
            process.env.CLIENT_SECRET
        );
    }

    if (!appGraphClient) {
        const authProvider = new TokenCredentialAuthenticationProvider(
        clientSecretCredential, {
            scopes: [ 'https://graph.microsoft.com/.default' ]
        });

        appGraphClient = Client.initWithMiddleware({
            authProvider: authProvider
        });
    }
}

İşlevi createNewMeetingAsync keşfetmek için biraz zaman ayırın. Verileri, kullanıcının takviminde dinamik olarak bir olay oluşturan ve yeni olay ayrıntılarını döndüren Microsoft Graph Takvim Olayları API'sine postalar:

async function createNewMeetingAsync(userId) {
    ensureGraphForAppOnlyAuth();
    let startTime = await startDateTimeAsync();
    let endTime = await endDateTimeAsync();
    const newMeeting = `/users/${userId}/calendar/events`;

    const event = {
    subject: 'Customer Service Meeting',
    start: {
        dateTime: startTime,
        timeZone: 'UTC'
    },
    end: {
        dateTime: endTime,
        timeZone: 'UTC'
    },
    isOnlineMeeting: true
    };

    const newEvent = await appGraphClient.api(newMeeting).post(event);    
    return newEvent;     
}

export default createNewMeetingAsync;

server/typescript/src/functions/httpTriggerTeamsUrl.ts gidin ve Http Tetikleyicisi işlevini keşfedin:

createNewMeetingAsyncgraph.ts'dan içeri aktarılır. Yeni olay ayrıntılarını oluşturma ve alma işlemlerini işler.
userId http tetikleyicisi işlevinin içindeki local.settings.json alınır. Bu alma işlemi, kullanılarak process.env.USER_IDortam değişkenine USER_ID erişilerek gerçekleştirilir.
İşlev tetiklendiğinde, tanımlı kullanıcı kimliğiyle çağırır createNewMeetingAsync ve parametresinde teamMeetingLink yeni olay ayrıntılarını döndürür.
İşlev, çağrı meeting.onlineMeeting.joinUrl yaparak Teams toplantısına katılma URL'sine erişir ve yanıtın gövdesindeki değeri döndürür.

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import createNewMeetingAsync from '../../Shared/graph';

let teamsMeetingLink;

export async function httpTriggerTeamsUrl(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    context.log("Request received");
    const userId = process.env.USER_ID;
    context.log('UserId', userId);

    teamsMeetingLink = await createNewMeetingAsync(userId);
    const body = JSON.stringify(teamsMeetingLink);
    const meeting = JSON.parse(body);
    context.log("meeting:", meeting);

    return {
        // status: 200, /* Defaults to 200 */
        body: meeting.onlineMeeting.joinUrl
    }    
};

app.http('httpTriggerTeamsUrl', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerTeamsUrl
});

export default httpTriggerTeamsUrl;

İşlevi yerel olarak çalıştırmak için samples/acs-video-to-teams-meeting/server/typescript klasöründe çalıştırmak npm start için bir terminal penceresi kullanın.

React'ten Azure İşlevini Çağırma

httpTriggerTeamsUrl İşlev kullanıma hazır olduğuna göre react uygulamasından çağıralım.
client/react klasörünü genişletin.
Klasöre aşağıdaki değerleri içeren bir .env dosyası ekleyin:
```
REACT_APP_TEAMS_MEETING_FUNCTION=http://localhost:7071/api/httpTriggerTeamsUrl
REACT_APP_ACS_USER_FUNCTION=http://localhost:7071/api/httpTriggerAcsToken
```
Derleme işlemi sırasında gerektiğinde kolayca değiştirebilmeniz için, bu değerler oluşturulurken React'e geçirilir.
VS Code'da client/react/App.tsx dosyasını açın.
Bileşende teamsMeetingLink durum değişkenini bulun. Sabit kodlanmış ekipler bağlantısını kaldırın ve boş tırnak işaretleri ile değiştirin:
```
const [teamsMeetingLink, setTeamsMeetingLink] = useState<string>('');
```

useEffect işlevini bulun ve aşağıdaki gibi görünecek şekilde değiştirin. Bu işlem, daha önce baktığınız Azure İşlevi'ni çağırarak teams toplantısı oluşturur ve toplantıya katılma bağlantısını döndürür:

useEffect(() => {
    const init = async () => {
        /* Commenting out for now
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        const res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        const user = await res.json();
        setUserId(user.userId);
        setToken(user.token);
        */

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        const resTeams = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        const link = await resTeams.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);

    }
    init();

}, []);

Devam etmeden önce dosyayı kaydedin.
*react klasörüne bir terminal penceresi cd açın ve uygulamayı derlemek ve çalıştırmak için komutunu npm start çalıştırın.
Uygulama derlenip yüklendikten sonra ACS arama kullanıcı arabiriminin görüntülendiğini ve ardından Microsoft Graph tarafından dinamik olarak oluşturulan Teams toplantısına çağrı yapabildiğini görmeniz gerekir.
Terminal penceresine Ctrl + C girerek terminal işlemini durdurun.
Azure İşlevleri projesini durdurun.

Not

Microsoft Teams toplantılarını başka şekillerde genişletme hakkında daha fazla bilgi edinmek için Azure İletişim Hizmetleri belgelerini ziyaret edin.

Dinamik olarak Azure İletişim Hizmetleri Kimliği ve Belirteci Oluşturma

27 dakika kaldı

Bu alıştırmada, Azure İşlevleri kullanarak kullanıcı kimliği ve belirteç değerlerini Azure İletişim Hizmetleri dinamik olarak almayı öğreneceksiniz. Alındıktan sonra, bir çağrının müşteri tarafından yapılmasını sağlamak için acs ui bileşik değerleri geçirilir.

ACS Kimliği ve Belirteci Oluşturma

C#
TypeScript

local.settings.json açın ve önceki bir alıştırmada ACS_CONNECTION_STRING kaydettiğiniz ACS bağlantı dizesi değeri güncelleştirin.

Visual Studio'da Startup.cs açın ve yöntemindeki ikinci AddSingleton() çağrıyı ConfigureServices() keşfedin.

var host = new HostBuilder()
    .ConfigureFunctionsWebApplication()
    .ConfigureServices(services => {

        ...

        services.AddSingleton(static p =>
        {
            var config = p.GetRequiredService<IConfiguration>();
            var connectionString = config.GetValue<string>("ACS_CONNECTION_STRING");
            return new CommunicationIdentityClient(connectionString);
        });

        ...

    })
    .Build();
}

çağrısı, AddSingleton() local.settings.json değerini kullanarak ACS_CONNECTION_STRING bir CommunicationIdentityClient nesne oluşturur.
ACSTokenFunction.cs açın ve oluşturucu ve alan tanımlarını bulun.
- Kapsamı içeren CommunicationTokenScope.VoIP adlı Scopes bir alan tanımlanır. Bu kapsam, görüntülü arama için erişim belirtecini oluşturmak için kullanılır.
```
private static readonly CommunicationTokenScope[] Scopes =
[
    CommunicationTokenScope.VoIP,
];
```
- CommunicationIdentityClient Startup.cs'de oluşturulan tekil örnek oluşturucuya eklenir ve alana atanır_tokenClient.
```
private readonly CommunicationIdentityClient _tokenClient;

public ACSTokenFunction(CommunicationIdentityClient tokenClient)
{
    _tokenClient = tokenClient;
}
```

Run() ACSTokenFunction.cs yöntemini keşfedin:

[Function("HttpTriggerAcsToken")]
public async Task<HttpResponseData> Run(
    [HttpTrigger(AuthorizationLevel.Anonymous, "get", Route = null)] HttpRequestData req,
    ILogger log)
{
    var user = await _tokenClient.CreateUserAsync();
    var userToken = await _tokenClient.GetTokenAsync(user, Scopes);

    var response = req.CreateResponse(HttpStatusCode.OK);
    await response.WriteAsJsonAsync(
        new
        {
            userId = user.Value.Id,
            userToken.Value.Token,
            userToken.Value.ExpiresOn
        }
    );
    return response;
}

HTTP GET isteğiyle çağrılabilen adlı HttpTriggerAcsToken bir işlev tanımlar.
yöntemi çağrılarak _tokenClient.CreateUserAsync() yeni bir ACS kullanıcısı oluşturulur.
Görüntülü aramalar için kullanılan bir erişim belirteci yöntemi çağrılarak _tokenClient. GetTokenAsync() oluşturulur.
Kullanıcı kimliği ve belirteci işlevinden bir JSON nesnesi olarak döndürülür.

Visual Studio'da F5 tuşuna basarak veya menüden Hata Ayıkla --> Hata Ayıklamayı Başlat'ı seçerek programı çalıştırın. Bu işlem Azure İşlevleri projesini ACSTokenFunction başlatır ve çağrısı için kullanılabilir duruma getirir.

Not

VS Code kullanıyorsanız GraphACSFunctions klasöründe bir terminal penceresi açıp komutunu çalıştırabilirsinizfunc start. Bu, makinenizde Azure İşlevleri Temel Araçları'nın yüklü olduğunu varsayar.
artık Azure İşlevleri yerel olarak çalıştığına göre, istemcinin ACS kullanıcı kimliği ve belirteç değerlerini almak için bunları çağırabilmesi gerekir.
Samples/acs-to-teams-meeting/client/react/App.tsx dosyasını düzenleyicinizde açın.
bileşendeki userId ve token durum değişkenlerini bulun. Sabit kodlanmış değerleri kaldırın ve bunları boş tırnaklarla değiştirin:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

İşlevi useEffect bulun ve acs kullanıcı kimliği ve belirteci almak üzere Azure İşlevi'nin çağrılmasını etkinleştirmek için aşağıdaki gibi değiştirin:

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

Devam etmeden önce dosyayı kaydedin.
Bir terminal penceresi açın ve klasöründe komutunu çalıştırın npm start react . Derlenip yüklendikten sonra ACS arama kullanıcı arabiriminin görüntülendiğini görmeniz gerekir ve Microsoft Graph tarafından dinamik olarak oluşturulan Teams toplantısına çağrı yapabilirsiniz.
Terminal penceresinde Ctrl + C tuşlarına basarak React uygulamasını durdurun.
Azure İşlevleri projesini durdurun.
Visual Studio Code kullanarak git değişikliklerinizi işleyin ve GitHub deponuza gönderin:
- Kaynak Denetimi simgesini (Visual Studio Code araç çubuğundaki 3. simge) seçin.
- bir işleme iletisi girin ve İşle'yi seçin.
- Değişiklikleri Eşitle'yi seçin.

local.settings.json açın ve önceki bir alıştırmada ACS_CONNECTION_STRING kaydettiğiniz ACS bağlantı dizesi değeri güncelleştirin.

Visual Studio Code'da server/typescript/src/functions/httpTriggerAcsToken.ts açın. Aşağıdaki koda sahiptir:

import { app, HttpRequest, HttpResponseInit, InvocationContext } from "@azure/functions";
import { CommunicationIdentityClient } from '@azure/communication-identity';

export async function httpTriggerAcsToken(request: HttpRequest, context: InvocationContext): Promise<HttpResponseInit> {
    // Get ACS connection string from local.settings.json (or App Settings when in Azure)
    const connectionString = process.env.ACS_CONNECTION_STRING;
    let tokenClient = new CommunicationIdentityClient(connectionString);
    const user = await tokenClient.createUser();
    const userToken = await tokenClient.getToken(user, ["voip"]);
    return {
        jsonBody: { userId: user.communicationUserId, ...userToken }
    };
}

app.http('httpTriggerAcsToken', {
    methods: ['GET'],
    authLevel: 'anonymous',
    handler: httpTriggerAcsToken
});

export default httpTriggerAcsToken;

İşlev aşağıdaki görevleri gerçekleştirir:
- Kullanıcı kimliğini ve belirtecini oluşturmak için kullanılacak içeri aktarmalar CommunicationIdentityClient .
```
import { CommunicationIdentityClient } from '@azure/communication-identity';
```
- adlı ACS_CONNECTION_STRINGbir ortam değişkeninden ACS bağlantı dizesi alır.
```
const connectionString = process.env.ACS_CONNECTION_STRING;
```
Not

Bu, daha önce local.settings.json dosyasına eklediğiniz bağlantı dizesi değeridir.
- Yeni CommunicationIdentityClient bir örnek oluşturur ve ACS bağlantı dizesi ona geçirir.
```
let tokenClient = new CommunicationIdentityClient(connectionString);
```
- Bir ACS kullanıcısı oluşturur ve ip üzerinden ses belirteci alır.
```
const user = await tokenClient.createUser();
const userToken = await tokenClient.getToken(user, ["voip"]);
```
- userId ve belirteç değerlerini çağırana geri gönderir.
```
return {
    jsonBody: { userId: user.communicationUserId, ...userToken }
};
```
Terminal penceresinde server/typescript klasörüne gidin ve komutunu çalıştırınnpm start.
artık Azure İşlevleri yerel olarak çalıştığına göre, istemcinin ACS kullanıcı kimliği ve belirteç değerlerini almak için bunları çağırabilmesi gerekir.
Düzenleyicinizde client/react/App.tsx dosyasını açın.
bileşendeki userId ve token durum değişkenlerini bulun. Sabit kodlanmış değerleri kaldırın ve bunları boş tırnaklarla değiştirin:
```
const [userId, setUserId] = useState<string>('');
const [token, setToken] = useState<string>('');
```

İşlevi useEffect bulun ve acs kullanıcı kimliği ve belirteci almak üzere Azure İşlevi'nin çağrılmasını etkinleştirmek için aşağıdaki gibi değiştirin:

useEffect(() => {
    const init = async () => {
        setMessage('Getting ACS user');
        //Call Azure Function to get the ACS user identity and token
        let res = await fetch(process.env.REACT_APP_ACS_USER_FUNCTION as string);
        let user = await res.json();
        setUserId(user.userId);
        setToken(user.token);

        setMessage('Getting Teams meeting link...');
        //Call Azure Function to get the meeting link
        res = await fetch(process.env.REACT_APP_TEAMS_MEETING_FUNCTION as string);
        let link = await res.text();
        setTeamsMeetingLink(link);
        setMessage('');
        console.log('Teams meeting link', link);
    }
    init();

}, []);

Devam etmeden önce dosyayı kaydedin.
Ayrı bir terminal açın ve react klasöründe çalıştırın npm start . Derlenip yüklendikten sonra ACS arama kullanıcı arabiriminin görüntülendiğini görmeniz gerekir ve Microsoft Graph tarafından dinamik olarak oluşturulan Teams toplantısına çağrı yapabilirsiniz.
Ctrl + C'yi seçerek terminal işlemlerinin her ikisini de (React ve Azure İşlevleri) durdurun.
Visual Studio Code kullanarak git değişikliklerinizi işleyin ve GitHub deponuza gönderin:
- Kaynak Denetimi simgesini (Visual Studio Code araç çubuğundaki 3. simge) seçin.
- bir işleme iletisi girin ve İşle'yi seçin.
- Değişiklikleri Eşitle'yi seçin.

Uygulamayı Azure İşlevleri ve Azure Container Apps'e dağıtma

17 dakika kaldı

Önemli

Bu öğreticide listelenen önkoşullara ek olarak, bu alıştırmayı tamamlamak için makinenize aşağıdaki araçları da yüklemeniz gerekir.

Azure CLI
VS Code kullanıyorsanız Azure İşlevleri uzantısını yükleyin

Bu alıştırmada, önceki alıştırmalarda ele alınan Microsoft Graph ve ACS işlevlerini Azure İşlevleri dağıtmayı öğreneceksiniz. Ayrıca bir kapsayıcı görüntüsü oluşturacak ve bunu Azure Container Apps'e dağıtacaksınız.

Azure Container Apps

Azure İşlevlerine dağıtma

C#
TypeScript

Not

Bu bölümde, C# işlevlerini Azure'da yayımlamak için Visual Studio kullanılır. Visual Studio Code'u kullanmayı tercih ederseniz, Visual Studio Code kullanarak Azure'da C# işlevi oluşturma hızlı başlangıcındaki yönergeleri izleyebilirsiniz.

samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln Projeyi Visual Studio'da açın.
Projeye sağ tıklayın ve Yayımla'yı GraphACSFunctionsseçin.
Hedef bölümde Azure'ı seçin ve İleri'ye tıklayın.
Azure İşlev Uygulaması (Windows) öğesini seçin ve İleri'ye tıklayın.
Aboneliğinizi ve ardından + Yeni Oluştur'u seçin.
Aşağıdaki bilgileri girin:
- İşlev adı: Genel olarak benzersiz bir ad gereklidir. Örnek: acsFunctions<YOUR_LAST_NAME>.
- Abonelik: Aboneliğinizi seçin.
- Kaynak Grubu: Bu öğreticide daha önce oluşturduğunuz bir kaynak grubunu seçin veya yeni bir tane de oluşturabilirsiniz.
- Barındırma Planı: Tüketim planı.
- Konum: Dağıtmak istediğiniz bölgeyi seçin.
- Azure Depolama: Yeni bir tane oluşturun. (Mevcut bir depolama hesabını da seçebilirsiniz.)
- Azure İçgörüleri: Yeni bir tane oluşturun. (Mevcut bir depolama hesabını da seçebilirsiniz.)
Not

Genel olarak benzersiz bir ad gereklidir. Adın sonuna bir sayı veya soyadı ekleyerek adı daha benzersiz hale getirebilirsiniz.
Azure İşlev Uygulaması oluşturulduktan sonra bir onay ekranı görürsünüz. Paketten çalıştır seçeneğinin belirlendiğinden emin olun ve son'u seçin.
İşlevi Azure'a dağıtmak için Yayımla'yı seçin.
İşlev Azure'a dağıtıldıktan sonra Azure portalına gidin ve oluşturduğunuz İşlev Uygulamasını seçin.
Dağıtılan işlevin URL'sini kopyalayın. Değerini bu alıştırmanın ilerleyen bölümlerinde kullanacaksınız.
Soldaki menüden Ayarlar --> Yapılandırma'ya tıklayın.
+ Yeni uygulama ayarı düğmesini seçin ve Uygulama ayarlarına aşağıdaki anahtarları ve değerleri ekleyin. Bu değerleri local.settings.json projede GraphACSFunctions kullanabilirsiniz.
```
# Retrieve these values from local.settings.json
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>
```
Ayarları kaydetmek için Kaydet düğmesini seçin.
Son olarak, işlev uygulamasının API'lerini etki alanınızın dışından erişilebilir hale getirmek için işlev uygulaması için CORS'yi (Çıkış Noktaları Arası Kaynak Paylaşımı) etkinleştirmeniz gerekir. Soldaki menüden Ayarlar --> CORS'yi seçin.
İzin Verilen Çıkış Noktaları metin kutusuna (herhangi bir etki alanından erişilebilir) girin * ve Kaydet düğmesini seçin.

İşlev kodunu Azure İşlevleri dağıtmak için VS Code kullanarak başlayalım.

server/typescript proje klasörünü açın.
Zaten çalıştırmış npm install ve proje kökünde bir node_modules klasörü görüyor olmanız gerekir. Aksi takdirde, bir komut penceresi açın ve komutunu çalıştırarak npm install bağımlılıkları yükleyin.
VS Code komut paletini açma (Mac'te Shift+Cmd+P | Windows üzerinde Shift+Ctrl+P) tuşlarına basın ve Azure İşlevleri: Azure'da İşlev Uygulaması Oluştur'u seçin.

Not

Bu seçeneği görmüyorsanız VS Code'da Azure İşlevleri uzantısının yüklü olduğundan emin olun.
Aşağıdaki bilgileri girmeniz istenir:
- Azure aboneliğinizin adı.
- İşlev adı: acsFunctions<YOUR_LAST_NAME>.
Not

Genel olarak benzersiz bir ad gereklidir. Adın sonuna bir sayı veya soyadı ekleyerek adı daha benzersiz hale getirebilirsiniz.
- Çalışma zamanı yığını - En son Node.js LTS sürümünü seçin.
- Bölge (istediğiniz bölgeyi seçin).
Azure İşlev Uygulaması oluşturulduktan sonra ayrıntıları görüntüleme hakkında bir ileti görürsünüz.
VS Code'da komut paletine geri dönün ve Azure İşlevleri: İşlev Uygulamasına Dağıt'ı seçin. Aboneliğinizi ve daha önce oluşturduğunuz İşlev Uygulaması adını seçmeniz istenir.
İşlev Azure'a dağıtıldıktan sonra aşağıdakileri yapın:
- VS Code'da Azure uzantısını seçin (kenar çubuğundaKi Azure simgesine tıklayın).
- Aboneliğinizi genişletin.
- İşlev Uygulamanızı genişletin.
- İşleve sağ tıklayın ve Web Sitesine Gözat'ı seçin. Devam etmeden önce işlev uygulamasının düzgün çalıştığından emin olun.
Azure İşlevi etki alanını yerel bir dosyaya kopyalayın. Değerini bu alıştırmanın ilerleyen bölümlerinde kullanacaksınız.

Azure Container Apps'e dağıtma

Gerçekleştirdiğiniz ilk görev yeni bir Azure Container Registry (ACR) kaynağı oluşturmaktır. Kayıt defteri oluşturulduktan sonra bir görüntü oluşturacak ve kayıt defterine göndereceksiniz.
Azure aboneliğinizde oturum açmak için bir komut penceresi açın ve aşağıdaki komutu çalıştırın:
```
az login
```

Yer tutucular için değerlerinizi uygun şekilde değiştirerek aşağıdaki kabuk değişkenlerini ekleyin. <GITHUB_USERNAME> küçük harf olarak ekleyin ve Azure İşlevleri etki alanınızı< AZURE_FUNCTIONS_DOMAIN> değeriyle (etki alanı değerine ekleyinhttps://) ekleyin.

Bash
PowerShell

GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

$GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
$RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
$ACR_NAME="aca"+$GITHUB_USERNAME
$AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

Aşağıdaki komutu çalıştırarak yeni bir Azure Container Registry kaynağı oluşturun:

Bash
PowerShell

az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

az acr create `
    --resource-group $RESOURCE_GROUP `
    --name $ACR_NAME `
    --sku Basic `
    --admin-enabled true

client/react/Dockerfile dosyasını düzenleyicinizde açın ve aşağıdaki görevlerin gerçekleştirildiğini göreceksiniz:
- React uygulaması derlenir ve derleme aşamasına atanır.
- nginx sunucusu yapılandırılır ve derleme aşamasının çıkışı nginx sunucu görüntüsüne kopyalanır.

İstemci/react klasörünün kökünden aşağıdaki komutu çalıştırarak Azure'da kapsayıcı görüntüsünü oluşturun. YOUR_FUNCTIONS_DOMAIN>, bu alıştırmanın önceki bölümlerinde yerel bir dosyaya kopyaladığınız Azure İşlevleri etki alanınızla değiştirin<.

Bash
PowerShell

az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

az acr build --registry $ACR_NAME --image acs-to-teams-meeting `
  --build-arg REACT_APP_ACS_USER_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerAcsToken `
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=+$AZURE_FUNCTIONS_DOMAIN+/api/httpTriggerTeamsUrl .

Kayıt defterinizdeki görüntüleri listelemek için aşağıdaki komutu çalıştırın. Yeni görüntünüzün listelendiğini görmeniz gerekir.
```
az acr repository list --name $ACR_NAME --output table
```
Görüntü dağıtıldığından, kapsayıcıyı çalıştırabilen bir Azure Container App oluşturmanız gerekir.
Tarayıcınızda Azure portalını ziyaret edin ve oturum açın.
Üst arama çubuğuna kapsayıcı uygulamaları yazın ve görüntülenen seçeneklerden Kapsayıcı Uygulamaları'nı seçin.
Araç çubuğunda Oluştur'u seçin.

Not

Azure portalını kullanıyor olmanıza rağmen, Azure CLI kullanılarak bir Kapsayıcı Uygulaması da oluşturulabilir. Daha fazla bilgi için bkz . Hızlı Başlangıç: İlk kapsayıcı uygulamanızı dağıtma. Bu alıştırmanın sonunda Azure CLI'nin nasıl kullanılabileceğini gösteren bir örnek de göreceksiniz.
Aşağıdaki görevleri gerçekleştirin:
- Aboneliğinizi seçin.
- Kullanılacak kaynak grubunu seçin (gerekirse yeni bir grup oluşturun). İsterseniz ACS kaynağınız için kullandığınız kaynak grubunu kullanabilirsiniz. Kaynak grubu adınızı, Azure İşlevleri etki alanınızı depoladığınız yerel dosyaya kopyalayın.
- acs-to-teams-meeting kapsayıcı uygulaması adını girin.
- Bölge seçin.
- Container Apps Ortamı bölümünde Yeni oluştur'u seçin.
- acs-to-teams-meeting-env ortam adını girin.
- Oluştur düğmesini seçin.
- İleri: Uygulama ayarları'nı >seçin.
Kapsayıcı Uygulaması Oluştur ekranına aşağıdaki değerleri girin:
- Hızlı başlangıç görüntüsünü kullan onay kutusunun seçimini kaldırın.
- Ad: acs-teams-meeting
- Görüntü kaynağı: Azure Container Registry
- Kayıt Defteri: <YOUR_ACR_REGISTRY_NAME.azurecr.io>
- Resim: acs-teams-meeting
- Görüntü etiketi: en son
- CPU ve Bellek: 0,25 CPU çekirdeği, -.5 Gi bellek
Uygulama giriş ayarları bölümünde aşağıdakileri yapın:
- Etkin onay kutusunu seçin.
- Her yerden trafik kabul et radyo düğmesini seçin.
Bu, React uygulamanız için bir giriş noktası (giriş) oluşturur ve her yerden çağrılmasına izin verir. Azure Container Apps tüm trafiği HTTPS'ye yönlendirir.
- Hedef Bağlantı Noktası: 80

Gözden geçir ve oluştur’u seçin. Doğrulama başarılı olduktan sonra Oluştur düğmesini seçin.

Hata alırsanız bunun nedeni kapsayıcı uygulamaları ortamınızın çok uzun süre etkin olmaması olabilir. En basit çözüm, kapsayıcı uygulamasını yeniden oluşturma işleminden geçmek olacaktır. Alternatif olarak, Azure CLI kullanarak kapsayıcı uygulamasını oluşturmak için aşağıdaki komutu çalıştırabilirsiniz:

Bash
PowerShell

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP `
    --location westus --image acs-to-teams-meeting `
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env `
    --ingress-enabled true --ingress-target-port 80 --ingress-type External `
    --ingress-protocol Https --ingress-traffic Anywhere

Kapsayıcı uygulaması dağıtımınız tamamlandıktan sonra Azure portalında bu uygulamaya gidin ve nginx kapsayıcısında çalışan uygulamayı görüntülemek için Genel Bakış ekranında Uygulama Url'sini seçin!

Aracılığıyla paylaş