Alıştırma - Azure İşlevleri projesi oluşturma

  • 6 dakika

Alışveriş listesi web uygulamanızın bir API'ye ihtiyacı var. Bu alıştırmada bir Azure İşlevleri projesi kullanarak API'nizi derleyip çalıştıracaksınız. Buradan, Visual Studio Code için Azure İşlevleri uzantısını kullanarak API'yi yeni bir işlevle genişletirsiniz.

Bu alıştırmada aşağıdaki adımları tamamlaacaksınız:

  1. Web uygulamanızda değişiklik yapmaya hazırlanırken bir dal oluşturun.
  2. Azure İşlevi projesini keşfedin.
  3. HTTP GET işlevini oluşturun.
  4. Ürünleri almak için işlev başlatma kodunu mantıkla değiştirin.
  5. WEB uygulamasını API'ye HTTP isteklerine ara sunucu olarak yapılandırın.
  6. API'yi ve web uygulamasını çalıştırın.

İşlev uygulamasını edinin

Şimdi bir API ekleyin ve bunu ön uç uygulamanıza bağlayın. Klasör api-starter tamamlanmamış bir Azure İşlevleri projesi içerir. Şimdi bunu tamamlayalım.

API dalı oluşturma

Uygulamada değişiklik yapmadan önce, değişiklikler için yeni bir dal oluşturmak iyi bir uygulamadır. Uygulamanızın API'sini tamamlamak üzeresiniz, bu nedenle şimdi bir dal oluşturmak için iyi bir zaman.

  1. Visual Studio Code'da F1 tuşuna basarak komut paletini açın.

  2. Girin veGit: Checkout'u seçin.

  3. yeni dal oluşturseçin.

  4. Yeni dal adı için api girin ve Enter tuşuna basın.

Api git dalını yeni oluşturdunuz.

Azure İşlevleri API'sini tamamlama

API'yi tamamlamak için başlangıç API kodunu adlı apibir klasöre taşıyarak başlayın. Static Web Apps örneğini oluştururken api_location için bu klasör adını girdiniz.

  1. Visual Studio Code'da F1 tuşuna basarak komut paletini açın.

  2. Terminal: Yeni Terminal Oluştur (Etkin Çalışma Alanında) girin ve seçin.

  3. Projenin kök klasöründe olduğunuzdan emin olun.

  4. Klasörü api-starterolarak yeniden adlandırmak api için aşağıdaki git komutunu çalıştırın.

    git mv api-starter api

  5. F1 tuşuna basarak komut paletini açın.

  6. girin ve Git: Tümünü İşleseçin.

  7. İşleme iletisi API'sini girin ve Enter tuşuna basın.

Şimdi Visual Studio Code gezgininde bir api klasörü görürsünüz. API klasörü, Azure İşlevleri projenizi ve üç işlevi içerir.

Klasör ve dosya Yöntem Güzergah
api/products-post GÖNDER products
api/products-put KOYMAK products/:id
api/products-delete SİLMEK products/:id

HTTP GET işlevini oluşturma

API'nizin alışveriş listesi için ürünleri işlemeye yönelik yolları vardır, ancak ürünleri almak için bir yol yok. Şimdi bunu ekleyelim.

Visual Studio Code için Azure İşlevleri uzantısını yükleme

Visual Studio Code için Azure İşlevleri uzantısını kullanarak Azure İşlevleri uygulamaları oluşturabilir ve yönetebilirsiniz.

  1. Visual Studio Market'e gidin ve Visual Studio Code için Azure İşlevleri uzantısını yükleyin.

  2. Visual Studio Code'da uzantı sekmesi yüklendiğinde Yükle'yi seçin.

  3. Yükleme tamamlandıktan sonra yeniden yükle'yiseçin.

Not

Azure İşlevleri'ni yerel olarak çalıştırmanıza olanak tanıyan Azure İşlevleri Temel Araçları'nı yüklediğinizden emin olun.

İşlevi oluşturma

Azure İşlevi uygulamanızı, ürünlerinizi almak üzere bir işlev ekleyerek genişletin.

  1. Visual Studio Code'da F1 tuşuna basarak komut paletini açın.

  2. Azure İşlevleri: İşlev Oluştur girin ve seçin.

  3. İşlev oluşturmanız istendiğinde http tetikleyicisi seçin.

  4. İşlevin adı olarak products-get girin.

  5. Kimlik doğrulama düzeyi olarak Anonim seçin.

Not

İşlevler uygulaması, bu klasörü tek tek web uygulaması projelerinden ayıran klasördedir api . Ön uç çerçevelerini kullanan tüm web uygulamaları aynı API'ye çağrı yapar. Uygulamanızı nasıl yapılandıracağınıza karar verebilirsiniz, ancak bu örnek için bunları ayrı görmeniz yardımcı olur.

HTTP Yöntemini ve yol uç noktasını yapılandırma

api/products-get klasörünün function.jsondosyasını içerdiğine dikkat edin. Bu dosya işlevinizin yapılandırmasını içerir.

Uç nokta, kurala göre işlevi içeren klasörle aynı isme sahiptir. İşlev products-get klasöründe oluşturulduğundan, rota uç noktası varsayılan olarak products-get olarak oluşturulur. Ancak uç noktanın ürünlerolmasını istiyorsunuz.

İşlevinizi yapılandırın:

  1. api/products-get/function.jsondosyasını açın.

  2. Yöntemlerin hem GET hem de POSTizin vermesine dikkat edin.

  3. Methods dizisini yalnızca GET isteklerine izin verecek şekilde değiştirin.

  4. Methods dizisinin arkasına bir "route": "products" girdisi ekleyin.

Artık işleviniz GET yönelik bir HTTP isteğinde tetikleniyor. function.json aşağıdaki kod gibi görünmelidir:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

İşlev mantığını güncelleştirme

Klasördeki api/products-get dosyası, yola http isteği gönderdiğinizde çalışan mantık içerir.

Ürünlerinizi almak için mantığı güncelleştirmeniz gerekir. /shared/product-data.jsJavaScript modülünde veri erişim mantığı vardır. product-data modülü, alışveriş listesi için ürünleri almak amacıyla bir işlev getProducts'i açığa çıkarır.

Şimdi, ürünleri döndürmek için işlev uç noktasını değiştirin:

  1. api/products-get/index.jsdosyasını açın.

  2. içeriğini aşağıdaki kodla değiştirin:

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

İşleviniz ürünleri alır ve başarılı olduğunda 200 durum koduyla döndürür.

Çapraz Kaynak Paylaşımını (CORS) yerel olarak yapılandırın

Azure Static Web Apps'te yayımladığınızda CORS konusunda endişelenmeniz gerekmez. Azure Static Web Apps, uygulamanızı otomatik olarak yapılandırarak ters ara sunucu kullanarak Azure'da API'nizle iletişim kurabilmesini sağlar. Ancak yerel olarak çalışırken, web uygulamanızın ve API'nizin iletişim kurmasına izin vermek için CORS'yi yapılandırmanız gerekir.

Şimdi Azure İşlevleri'ne web uygulamanızın bilgisayarınızda API'ye HTTP istekleri göndermesine izin vermesini söyleyin.

  1. api/local.settings.jsonadlı bir dosya oluşturun.

  2. Dosyaya aşağıdaki içeriği ekleyin:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Not

local.settings.jsondosyası.gitignore dosyasında listelenir ve bu da bu dosyanın GitHub'a gönderilmesini engeller. Dosya, GitHub'da bulunmasını istemeyebileceğiniz gizli bilgileri içerebileceği için .gitignore dosyasında listelenir. Bu liste, deponuzu şablondan oluştururken dosyayı oluşturmanıza neden olan listedir.

API'yi çalıştırma

Şimdi web uygulamanızın ve Azure İşlevleri projenizin birlikte çalışmasını izleme zamanı geldi. Aşağıdaki adımları izleyerek Azure İşlevleri projenizi yerel olarak çalıştırarak başlayın:

Not

Azure İşlevleri'ni yerel olarak çalıştırmanıza olanak tanıyan Azure İşlevleri Temel Araçları'nı yüklediğinizden emin olun.

  1. Git terminalini açın ve klasörüne api gidin:

    cd api

  2. Azure İşlevleri uygulamasını yerel olarak çalıştırın:

    npm install

    npm start

Web uygulamasını çalıştırma

API'niz çalışıyor. Şimdi ön uç uygulamanızı API'nize HTTP isteğinde bulunmak için yapılandırmanız gerekir. Ön uç uygulaması bir bağlantı noktasında, API ise farklı bir bağlantı noktasında (7071) çalışır. Her bir ön uç çerçevesi, HTTP isteklerini güvenli bir şekilde bir bağlantı noktasına proxy olarak yapılandırabilir.

Proxy bağlantı noktanızı yapılandırma

Ön uç uygulamanız için ara sunucuyu aşağıdaki adımlarla yapılandırın:

  1. angular-app/proxy.conf.jsondosyasını açın.

  2. target: 'http://localhost:7071' ayarını bulun.

  3. Hedefin bağlantı noktasının 7071'e işaret ettiğini unutmayın.

  1. react-app/package.jsondosyasını açın.

  2. "proxy": "http://localhost:7071/", ayarını bulun.

  3. Proxy'nin bağlantı noktasının 7071'e işaret ettiğini unutmayın.

  1. svelte-app/rollup.config.jsdosyasını açın.

  2. const api = 'http://localhost:7071/api';kod satırını bulun.

  3. API'nin bağlantı noktasının 7071'e işaret ettiğini unutmayın.

  1. vue-app/vue.config.jsdosyasını açın.

  2. target: 'http://localhost:7071', ayarını bulun.

  3. Hedefin bağlantı noktasının 7071'e işaret ettiğini unutmayın.

Ön uç web uygulamanızı çalıştırma

API'niz zaten 7071 numaralı bağlantı noktasında çalışıyor. Şimdi web uygulamanızı çalıştırdığınızda API'nize HTTP isteklerinde bulunur. Aşağıdaki adımları izleyerek web uygulamanızı çalıştırın:

  1. İkinci bir git terminal örneği açın.

  2. Ardından, tercih ettiğiniz ön uç çerçevesinin klasörüne gitmek için şu komutu girin:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. Ön uç istemci uygulamasını çalıştırın:

    npm start

    npm start

    npm run dev

    npm run serve

Uygulamanıza göz atın

Uygulamanızın Azure İşlevleri API'sinde yerel olarak çalıştığını görmenin zamanı geldi.

  1. http://localhost:4200adresine gidin.
  1. http://localhost:3000adresine gidin.
  1. http://localhost:5000adresine gidin.
  1. http://localhost:8080adresine gidin.
  1. Uygulamanızı oluşturup yerel olarak çalıştırarak API'nize HTTP GET istekleri göndermeye devam ediyor. Şimdi terminallerde Ctrl-C tuşlarına basarak çalışan uygulamanızı ve API'nizi durdurun.

Sonraki adımlar

Uygulamanız yerel olarak çalışır ve sonraki adımınız uygulamayı API ile yayımlamaktır.