Aracılığıyla paylaş


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

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

  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 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)
    
  4. 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"
        });
    };
    

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

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

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.

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

    swa start src --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: "/" # 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 ######
    
  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