Azure İşlevleri ile Azure Static Web Apps'e API ekleme

Azure İşlevleri tarafından desteklenen Azure Static Web Apps'e sunucusuz API'ler ekleyebilirsiniz. Bu makalede, Azure Static Web Apps sitesine API ekleme ve dağıtma işlemleri gösterilmektedir.

Not

Statik Web Apps'te varsayılan olarak sağlanan işlevler, güvenli API uç noktaları sağlamak ve yalnızca HTTP ile tetiklenen işlevleri desteklemek için önceden yapılandırılmıştır. Tek başına Azure İşlevleri uygulamalardan farkı hakkında bilgi için bkz. Azure İşlevleri ile API desteği.

Önkoşullar

• Etkin aboneliği olan Azure hesabı.
  • Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Visual Studio Code.
• Visual Studio Code için Azure Static Web Apps uzantısı .
• Visual Studio Code için Azure İşlevleri uzantısı.
• Ön uç uygulamasını ve API'yi çalıştırmak için v18'i Node.js.

İpucu

Geliştirme sisteminizde birden çok Node.js sürümünü yönetmek için nvm aracını kullanabilirsiniz. Windows'da, Windows için NVM Winget aracılığıyla yüklenebilir.

Statik web uygulaması oluşturma

API eklemeden önce, Azure Static Web Apps ile ilk statik sitenizi oluşturma hızlı başlangıcını izleyerek bir ön uç uygulaması oluşturun ve Azure Static Web Apps'e dağıtın.

Azure Static Web Apps'e dağıtılan bir ön uç uygulamanız olduğunda uygulama deponuzu kopyalayın. Örneğin, komut satırını kullanarak git deponuzu kopyalayabilirsiniz.

Aşağıdaki komutu çalıştırmadan önce değerini GitHub kullanıcı adınız ile değiştirdiğinizden <YOUR_GITHUB_USERNAME> emin olun.

git clone https://github.com/<YOUR_GITHUB_USERNAME>/my-first-static-web-app

Visual Studio Code'da uygulamanızın deposunun kökünü açın. Klasör yapısı, ön uç uygulamanızın kaynağını ve .github/workflows klasöründeki Static Web Apps GitHub iş akışını içerir.

├── .github
│   └── workflows
│       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
│
└── (folders and files from your static web app)

API oluşturma

Statik web uygulamanızın API'si için bir Azure İşlevleri projesi oluşturursunuz. Varsayılan olarak, Static Web Apps Visual Studio Code uzantısı projeyi deponuzun kökündeki api adlı bir klasörde oluşturur.

1. Komut Paletini açmak için F1 tuşuna basın.

2. Azure Statik Web Uygulamaları: HTTP İşlevi Oluştur... seçeneğini belirleyin. Azure İşlevleri uzantısını yüklemeniz istenirse uzantıyı yükleyin ve bu komutu yeniden çalıştırın.

3. İstendiğinde aşağıdaki değerleri girin:

   İstem	Değer
   Dil seçin	JavaScript
   Programlama modeli seçme	V4
   İşlev adı belirtin	ileti

   İpucu

   programlama modelleri arasındaki farklar hakkında daha fazla bilgi edinmek için Azure İşlevleri geliştirici kılavuzuna bakın

   HTTP ile tetiklenen bir işlevle bir Azure İşlevleri projesi oluşturulur. Uygulamanızın artık aşağıdaki örneğe benzer bir proje yapısı vardır.

   ├── .github
   │   └── workflows
   │       └── azure-static-web-apps-<DEFAULT_HOSTNAME>.yml
   │
   ├── api
   ├── └──src
   │   │  │ functions
   │   │  │  └── message.js
   │   │  └── index.js
   │   ├── .funcignore
   │   ├── host.json
   │   ├── local.settings.json
   │   ├── package-lock.json
   │   └── package.json
   │
   └── (...plus other folders and files from your static web app)
   

4. Ardından, ön uçta message bir ileti döndürmek için işlevini değiştirin. src/functions/message.js içindeki işlevi aşağıdaki kodla güncelleştirin.

   const { app } = require('@azure/functions');
   
   app.http('message', {
       methods: ['GET', 'POST'],
       authLevel: 'anonymous',
       handler: async (request, context) => {
           return { body: `Hello, from the API!` };
       }
   });
   

İpucu

Azure Static Web Apps: HTTP İşlevi Oluştur... komutunu yeniden çalıştırarak daha fazla API işlevi ekleyebilirsiniz.

Api'yi çağırmak için ön uç uygulamasını güncelleştirme

Ön uç uygulamanızı API'yi /api/message çağıracak ve yanıt iletisini görüntüleyecek şekilde güncelleştirin.

Uygulamayı oluşturmak için hızlı başlangıçları kullandıysanız, güncelleştirmeleri uygulamak için aşağıdaki yönergeleri kullanın.

Çerçeve Yok

API işlevinden metin getirmek ve ekranda görüntülemek için src/index.html dosyasının içeriğini aşağıdaki kodla güncelleştirin.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Vanilla JavaScript App</title>
</head>

<body>
    <main>
    <h1>Vanilla JavaScript App</h1>
    <p>Loading content from the API: <b id="name">...</b></p>
    </main>

    <script>
    (async function() {
        const { text } = await( await fetch(`/api/message`)).json();
        document.querySelector('#name').textContent = text;
    }());
    </script>
</body>

</html>

Angular

1. Uygulamanızda etkinleştirmek HttpClient için src/app/app.module.ts içeriğini aşağıdaki kodla güncelleştirin.

   import { BrowserModule } from "@angular/platform-browser";
   import { NgModule } from "@angular/core";
   import { HttpClientModule } from '@angular/common/http';
   
   import { AppComponent } from "./app.component";
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule, HttpClientModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. Src/app/app.component.ts içeriğini aşağıdaki kodla güncelleştirerek API işlevinden metni getirin ve ekranda görüntüleyin.

   import { HttpClient } from '@angular/common/http';
   import { Component } from '@angular/core';
   
   @Component({
     selector: 'app-root',
     template: `<div>{{message}}</div>`,
   })
   export class AppComponent {
     message = '';
   
     constructor(private http: HttpClient) {
       this.http.get('/api/message')
         .subscribe((resp: any) => this.message = resp.text);
     }
   }
   

React

Src/App.js içeriğini aşağıdaki kodla güncelleştirerek API işlevinden metni getirin ve ekranda görüntüleyin.

import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    (async function () {
      const { text } = await( await fetch(`/api/message`)).json();
      setData(text);
    })();
  });

  return <div>{data}</div>;
}

export default App;

Vue

Src/App.vue içeriğini aşağıdaki kodla güncelleştirerek API işlevinden metin getirin ve ekranda görüntüleyin.

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      message: ""
    };
  },
  async mounted() {
    const { text } = await (await fetch("/api/message")).json();
    this.message = text;
  }
};
</script>

Ön uç ve API'yi yerel olarak çalıştırma

Azure Static Web Apps, ön uç uygulamanızı ve API'nizi yerel olarak birlikte çalıştırmak için bulut ortamına öykünen bir CLI sağlar. CLI, API'yi çalıştırmak için Azure İşlevleri Çekirdek Araçları'nı kullanır.

Komut satırı araçlarını yükleyin

Gerekli komut satırı araçlarının yüklü olduğundan emin olun.

Önemli

Statik Web Uygulamaları CLI'sından dağıtımların güvenliğini artırmak için, 15 Ocak 2025'e kadar Static Web Apps CLI'nın en son sürümüne (2.0.2) yükseltmenizi gerektiren bir hataya neden olan değişiklik kullanıma sunulmuştur.

npm install -g @azure/static-web-apps-cli

İpucu

Komut satırını genel olarak yüklemek swa istemiyorsanız, aşağıdaki yönergeler yerine swa komutunu kullanabilirsiniznpx swa.

Ön uç uygulaması oluşturma

Uygulamanız bir çerçeve kullanıyorsa, Static Web Apps CLI'sini çalıştırmadan önce çıkışı oluşturmak için uygulamayı derleyin.

Çerçeve Yok

Uygulamayı derlemeye gerek yoktur.

Angular

npm bağımlılıklarını yükleyin ve uygulamayı dist/angular-basic klasörüne oluşturun.

npm install
npm run build --prod

React

npm bağımlılıklarını yükleyin ve uygulamayı derleme klasörüne oluşturun .

npm install
npm run build

Vue

npm bağımlılıklarını yükleyin ve uygulamayı dist klasörüne oluşturun.

npm install
npm run build

Uygulamayı yerel olarak çalıştırma

Uygulamayı Static Web Apps CLI ile başlatarak ön uç uygulamasını ve API'yi birlikte çalıştırın. Uygulamanızın iki bölümünü bu şekilde çalıştırmak, CLI'nın ön ucunuzun derleme çıkışını bir klasörden sunmasına olanak tanır ve API'yi çalışan uygulama için erişilebilir hale getirir.

1. Deponuzun kökünde, komutuyla Static Web Apps CLI'sini start başlatın. Uygulamanızın farklı bir klasör yapısı varsa bağımsız değişkenleri ayarlayın.

   Çerçeve Yok

   Geçerli klasörü (src) ve API klasörünü (api) CLI'ya geçirin.

   swa start src --api-location api
   

   Angular

   Derleme çıktı klasörünü (dist/angular-basic) ve API klasörünü (api) CLI'ya geçirin.

   swa start dist/angular-basic --api-location api
   

   React

   Derleme çıktı klasörünü (build) ve API klasörünü (api) CLI'ya geçirin.

   swa start build --api-location api
   

   Vue

   Derleme çıktı klasörünü (dist) ve API klasörünü (api) CLI'ya geçirin.

   swa start dist --api-location api
   

2. Windows Güvenlik Duvarı, Azure İşlevleri çalışma zamanının İnternet'e erişmesini isteyebilir. İzin ver'i seçin.

3. CLI işlemleri başladığında, adresinden uygulamanıza http://localhost:4280/erişin. Sayfanın API'yi nasıl çağırıp çıkışını görüntülediğine dikkat edin. Hello from the API

4. CLI'yı durdurmak için Ctrl + C yazın.

İş akışına API konumu ekleme

Uygulamanızı Azure'a dağıtmadan önce deponuzun GitHub Actions iş akışını API klasörünüzün doğru konumuyla güncelleştirin.

1. İş akışınızı .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml adresinde açın.

2. özelliğini api_location arayın ve değerini olarak apiayarlayın.

   ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
   # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
   app_location: "src" # App source code path
   api_location: "api" # Api source code path - optional
   output_location: "" # Built app content directory - optional
   ###### End of Repository/Build Configurations ######
   

   Not: yukarıdaki değerleriapi_locationapp_location,output_location çerçeve için değildir ve bu değerler çerçevenize göre değişir.

3. Dosyayı kaydedin.

Değişiklikleri dağıtma

Değişiklikleri Azure'da statik web uygulamanızda yayımlamak için kodunuzu işleyin ve uzak GitHub deposuna gönderin.

1. Komut Paletini açmak için F1 tuşuna basın.

2. Git: Tümünü İşle komutunu seçin.

3. İşleme iletisi istendiğinde, feat: ADD API yazın ve tüm değişiklikleri yerel git deponuza işleyin.

4. Komut Paletini açmak için F1 tuşuna basın.

5. Git: anında iletme komutunu seçin.

   Değişiklikleriniz GitHub'daki uzak depoya gönderilir ve uygulamanızı derlemek ve dağıtmak için Static Web Apps GitHub Actions iş akışını tetikler.

6. İş akışı çalıştırmanızın durumunu izlemek için GitHub'da deponuzu açın.

7. İş akışı tamamlandığında, değişikliklerinizi görüntülemek için statik web uygulamanızı ziyaret edin.

Sonraki adımlar

Uygulama ayarlarını yapılandırma