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

Makale
05/08/2024

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 kopyalamak için:

git clone https://github.com/my-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.

Komut Paletini açmak için F1 tuşuna basın.
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.
İstendiğinde aşağıdaki değerleri girin:

İstem Değer

Dil seçin JavaScript

Programlama modeli seçme V3

İş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
│   ├── message
│   │   ├── function.json
│   │   └── index.js
│   ├── host.json
│   ├── local.settings.json
│   └── package.json
│
└── (folders and files from your static web app)
```
Ardından, ön uçta message bir ileti döndürmek için işlevini değiştirin. api/message/index.js içindeki işlevi aşağıdaki kodla güncelleştirin.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

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

İ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.

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>

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 {}

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);
  }
}

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;

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.

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.

Uygulamayı derlemeye gerek yoktur.

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

npm install
npm run build --prod

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

npm install
npm run build

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.

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
- Angular
- React
- Vue
Geçerli klasörü (src) ve API klasörünü (api) CLI'ya geçirin.
```
swa start src --api-location api
```
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
```
Derleme çıktı klasörünü (build) ve API klasörünü (api) CLI'ya geçirin.
```
swa start build --api-location api
```
Derleme çıktı klasörünü (dist) ve API klasörünü (api) CLI'ya geçirin.
```
swa start dist --api-location api
```
Windows Güvenlik Duvarı, Azure İşlevleri çalışma zamanının İnternet'e erişmesini isteyebilir. İzin ver'i seçin.
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
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.

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

ö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: "/" # App source code path
api_location: "api" # Api source code path - optional
output_location: "build" # Built app content directory - optional
###### End of Repository/Build Configurations ######

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.

Komut Paletini açmak için F1 tuşuna basın.
Git: Tümünü İşle komutunu seçin.
İşleme iletisi istendiğinde, feat: ADD API yazın ve tüm değişiklikleri yerel git deponuza işleyin.
Komut Paletini açmak için F1 tuşuna basın.
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.
İş akışı çalıştırmanızın durumunu izlemek için GitHub'da deponuzu açın.
İş 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

Aracılığıyla paylaş

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

Önkoşullar

Statik web uygulaması oluşturma

API oluşturma

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

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

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

Ön uç uygulaması oluşturma

Uygulamayı yerel olarak çalıştırma

İş akışına API konumu ekleme

Değişiklikleri dağıtma

Sonraki adımlar

Geri Bildirim

Geri Bildirim

Ek kaynaklar