Tambahkan API di Azure Static Web Apps dengan Azure Functions

Artikel
05/08/2024

Anda dapat menambahkan API tanpa server ke Azure Static Web Apps yang didukung oleh Azure Functions. Artikel ini menunjukkan cara menambahkan dan menyebarkan API ke situs Azure Static Web Apps.

Catatan

Fungsi yang disediakan secara default di Static Web Apps telah dikonfigurasi sebelumnya untuk menyediakan titik akhir API yang aman dan hanya mendukung fungsi yang dipicu HTTP. Lihat dukungan API dengan Azure Functions untuk informasi tentang perbedaannya dengan aplikasi Azure Functions mandiri.

Prasyarat

Akun Azure dengan langganan aktif.
- Jika Anda tidak memiliki akun, Anda dapat membuatnya secara gratis.
Visual Studio Code.
Ekstensi Azure Static Web Apps untuk Visual Studio Code.
Ekstensi Azure Functions untuk Visual Studio Code.
Node.js v18 untuk menjalankan aplikasi frontend dan API.

Tip

Anda dapat menggunakan alat nvm untuk mengelola beberapa versi Node.js pada sistem pengembangan Anda. Pada Windows, NVM untuk Windows dapat diinstal melalui Winget.

Membuat aplikasi web statis

Sebelum menambahkan API, buat dan sebarkan aplikasi frontend ke Azure Static Web Apps dengan mengikuti mulai cepat Membangun situs statis pertama Anda dengan Azure Static Web Apps .

Setelah Anda memiliki aplikasi frontend yang disebarkan ke Azure Static Web Apps, kloning repositori aplikasi Anda. Misalnya, untuk mengkloning git menggunakan baris perintah:

git clone https://github.com/my-username/my-first-static-web-app

Di Visual Studio Code, buka akar repositori aplikasi Anda. Struktur folder berisi sumber untuk aplikasi frontend Anda dan alur kerja GitHub Aplikasi Web Statis di folder .github/alur kerja.

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

Membuat API

Anda membuat proyek Azure Functions untuk API aplikasi web statis Anda. Secara default, ekstensi Static Web Apps Visual Studio Code membuat proyek di folder bernama api di akar repositori Anda.

Tekan F1 untuk membuka Palet Perintah.
Pilih Azure Static Web Apps: Buat Fungsi HTTP.... Jika Anda diminta untuk menginstal ekstensi Azure Functions, instal dan jalankan ulang perintah ini.
Saat diminta, masukkan nilai berikut:

Prompt Nilai

Pilih bahasa JavaScript

Pilih model pemrograman V3

Menyediakan nama fungsi message

Tip

Anda dapat mempelajari selengkapnya tentang perbedaan antara model pemrograman di panduan pengembang Azure Functions

Proyek Azure Functions dihasilkan dengan fungsi yang dipicu HTTP. Aplikasi Anda sekarang memiliki struktur project yang mirip dengan contoh berikut.
```
├── .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)
```
Selanjutnya, ubah message fungsi untuk mengembalikan pesan ke frontend. Perbarui fungsi dalam api/message/index.js dengan kode berikut.
```
module.exports = async function (context, req) {
    context.res.json({
        text: "Hello from the API"
    });
};
```

Prompt	Nilai
Pilih bahasa	JavaScript
Pilih model pemrograman	V3
Menyediakan nama fungsi	message

Tip

Anda dapat menambahkan lebih banyak fungsi API dengan menjalankan perintahAzure Static Web Apps: Create HTTP Function... lagi.

Perbarui aplikasi frontend untuk memanggil API

Perbarui aplikasi frontend Anda untuk memanggil API /api/message dan menampilkan pesan respons.

Jika Anda menggunakan panduan mulai cepat untuk membuat aplikasi, gunakan instruksi berikut untuk menerapkan pembaruan.

Perbarui konten file src/index.html dengan kode berikut untuk mengambil teks dari fungsi API dan menampilkannya di layar.

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

Perbarui konten src/app/app.module.ts dengan kode berikut untuk diaktifkan HttpClient di aplikasi Anda.

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

Perbarui konten file index.htmfile l dengan kode berikut untuk mengambil teks dari fungsi API dan menampilkannya di layar.

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

Perbarui konten src/App.js dengan kode berikut untuk mengambil teks dari fungsi API dan menampilkannya di layar.

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;

Perbarui konten src/App.vue dengan kode berikut untuk mengambil teks dari fungsi API dan menampilkannya di layar.

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

Jalankan frontend dan API secara lokal

Untuk menjalankan aplikasi frontend dan API Anda secara lokal, Azure Static Web Apps menyediakan CLI yang meniru lingkungan cloud. CLI menggunakan Azure Functions Core Tools untuk menjalankan API.

Pasang alat baris perintah

Pastikan Anda telah memasang alat baris perintah yang diperlukan.

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

Tip

Jika Anda tidak ingin menginstal swa baris perintah secara global, Anda dapat menggunakan npx swa alih-alih swa dalam instruksi berikut.

Membangun aplikasi frontend

Jika aplikasi Anda menggunakan kerangka kerja, buat aplikasi untuk menghasilkan output sebelum menjalankan CLI Static Web Apps.

Tidak perlu membuat aplikasi.

Instal dependensi npm dan buat aplikasi ke dalam folder dist/angular-basic .

npm install
npm run build --prod

Instal dependensi npm dan buat aplikasi ke dalam folder build .

npm install
npm run build

Instal dependensi npm dan buat aplikasi ke dalam folder dist.

npm install
npm run build

Menjalankan aplikasi secara lokal

Jalankan aplikasi frontend dan API bersama-sama dengan memulai aplikasi dengan CLI Static Web Apps. Menjalankan dua bagian aplikasi Anda dengan cara ini memungkinkan CLI untuk melayani output build frontend Anda dari folder, dan membuat API dapat diakses oleh aplikasi yang sedang berjalan.

Di akar repositori Anda, mulai CLI Static Web Apps dengan start perintah. Sesuaikan argumen jika aplikasi Anda memiliki struktur folder yang berbeda.
- Tanpa Kerangka Kerja
- Sudut
- React
- Vue
Lewati folder saat ini ( src ) dan folder API ( api ) ke CLI.
```
swa start src --api-location api
```
Lewati folder output build ( dist/angular-basic ) dan folder API ( api ) ke CLI.
```
swa start dist/angular-basic --api-location api
```
Lewati folder output build ( build ) dan folder API ( api ) ke CLI.
```
swa start build --api-location api
```
Lewati folder output build ( dist ) dan folder API ( api ) ke CLI.
```
swa start dist --api-location api
```
Windows Firewall mungkin meminta agar runtime Azure Functions dapat mengakses Internet. Pilih Izinkan.
Saat proses CLI dimulai, akses aplikasi Anda di http://localhost:4280/ . Perhatikan bagaimana halaman memanggil API dan menampilkan outputnya, Hello from the API.
Untuk menghentikan CLI, ketik Ctrl + C.

Menambahkan lokasi API ke alur kerja

Sebelum dapat menerapkan aplikasi ke Azure, perbarui alur kerja GitHub Actions repositori Anda dengan lokasi folder API yang benar.

Buka alur kerja Anda di .github/workflows/azure-static-web-apps-DEFAULT-HOSTNAME<>.yml.

Cari properti api_location dan atur nilainya keapi.

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

Simpan file.

Sebarkan perubahan

Untuk memublikasikan perubahan pada aplikasi web statik Anda di Azure, terapkan dan dorong kode Anda ke repositori GitHub jarak jauh.

Tekan F1 untuk membuka Palet Perintah.
Pilih perintah Git: Terapkan Semua.
Saat dimintai pesan penerapan, masukkan feat: tambahkan API dan terapkan semua perubahan pada repositori git lokal Anda.
Tekan F1 untuk membuka Palet Perintah.
Pilih Git: perintah push.

Perubahan Anda didorong ke repositori jarak jauh di GitHub, memicu alur kerja Tindakan GitHub Static Web Apps untuk membangun dan menyebarkan aplikasi Anda.
Buka repositori Anda di GitHub untuk memantau status alur kerja Anda berjalan.
Saat alur kerja selesai, kunjungi aplikasi web statis Anda untuk melihat perubahan Anda.

Langkah berikutnya

Mengonfigurasi pengaturan aplikasi

Share via