Mengelola grup sumber daya Azure dengan TypeScript Function API

Artikel
03/30/2023

Dalam tutorial ini, Anda akan membuat aplikasi TypeScript Azure Function lokal dengan API untuk mengelola grup sumber daya Azure dan menyebarkan aplikasi ke Azure.

Fitur dan fungsionalitas:

Membuat proyek aplikasi TypeScript Azure Function lokal di Visual Studio Code
Membuat kode boilerplate API fungsi di Visual Studio Code
Menyebarkan ke Azure Functions dari Visual Studio Code
Membuat perwakilan layanan dengan Azure CLI
Mengonfigurasi pengaturan aplikasi lokal dan jarak jauh dengan Visual Studio Code
Gunakan DefaultAzureCredential di lingkungan lokal dan jarak jauh untuk koneksi tanpa kata sandi
Menggunakan Azure Identity dan Azure Resource Management SDK untuk mengelola sumber daya Azure
Gunakan API lokal dan cloud Anda untuk membuat, menghapus, dan membuat daftar grup sumber daya di langganan Anda

Sementara kode sumber ditulis dengan TypeScript, kode sumbernya sederhana. Jika Anda nyaman dengan JavaScript modern menggunakan asinkron/tunggu, kode akan akrab bagi Anda.

Membuat atau menggunakan langganan Azure yang sudah ada

Anda memerlukan akun pengguna Azure dengan langganan aktif. Buat akun gratis.

Prasyarat

Node.js LTS 18+ dan npm diinstal ke komputer lokal Anda. Versi lingkungan pengembangan lokal Anda dari Node.js harus cocok dengan salah satu versi runtime cloud Azure Function yang tersedia.
Visual Studio Code diinstal ke mesin lokal Anda.
- Ekstensi Azure Function v1.10.4 atau lebih tinggi.
Azure Functions Core Tools v4.0.5095 atau lebih tinggi
Azure Cloud Shell atau Azure CLI diinstal ke komputer lokal Anda.

Arsitektur aplikasi

Aplikasi ini menyediakan titik akhir API berikut.

Metode	URL	Deskripsi
POSTING,HAPUS	http://localhost:7071/api/resourcegroup	Menambahkan atau menghapus grup sumber daya. Saat menambahkan, sertakan tag (pasangan kunci/nilai) untuk mengidentifikasi tujuan grup nanti.
GET	http://localhost:7071/api/resourcegroups	Cantumkan semua grup sumber daya dalam langganan.
GET	http://localhost:7071/api/resources	Cantumkan semua sumber daya dalam langganan atau grup sumber daya.

Meskipun titik akhir ini bersifat publik, Anda harus mengamankan titik akhir API Anda dengan autentikasi dan otorisasi sebelum menyebarkan ke lingkungan langsung Anda.

Aplikasi ini terbatas pada langganan karena itu adalah cakupan yang ditentukan saat membuat perwakilan layanan.

1. Menyiapkan lingkungan Anda

Anda harus menyiapkan lingkungan lokal dan cloud Anda untuk menggunakan Azure Identity SDK.

Di terminal bash, masuk ke Azure CLI dengan perintah berikut:

az login

Dapatkan ID Langganan Azure Anda

Di terminal bash, dapatkan langganan Anda dan temukan ID langganan yang ingin Anda gunakan. Kueri berikut mengembalikan ID langganan, nama langganan, dan ID penyewa yang diurutkan menurut nama langganan.
```
az account list --query "sort_by([].{Name:name, SubscriptionId:id, TenantId:tenantId}, &Name)" --output table
```
Salin ID langganan ke file sementara sebelumnya. Anda akan memerlukan pengaturan ini nanti.

Membuat perwakilan layanan Azure

Perwakilan layanan Azure menyediakan akses ke Azure tanpa harus menggunakan kredensial pengguna pribadi Anda. Untuk tutorial ini, perwakilan layanan dapat digunakan baik di lingkungan lokal maupun cloud Anda. Di lingkungan perusahaan, Anda ingin perwakilan layanan terpisah untuk setiap lingkungan.

Tentukan format nama perwakilan layanan sehingga Anda dapat dengan mudah menemukan perwakilan layanan Anda nanti. Misalnya, beberapa ide format adalah:
- Proyek dan pemilik Anda: resource-management-john-smith.
- Departemen dan tanggal Anda: IT-2021-September
- Pengidentifikasi unik: 1e8966d7-ba85-424b-9db4-c39e1ae9d0ca
Di terminal bash, buat perwakilan layanan Anda dengan az ad sp create-for-rbac. Ganti <SUBSCRIPTION-ID> dengan ID Langganan Anda.
```
az ad sp create-for-rbac --name YOUR-SERVICE-PRINCIPAL-NAME --role Contributor --scopes /subscriptions/<SUBSCRIPTION-ID>
```

Salin seluruh hasil output ke file sementara. Anda akan memerlukan pengaturan ini nanti.

{
  "appId": "YOUR-SERVICE-PRINCIPAL-ID",
  "displayName": "YOUR-SERVICE-PRINCIPAL-NAME",
  "name": "http://YOUR-SERVICE-PRINCIPAL-NAME",
  "password": "YOUR-SERVICE-PRINCIPAL-PASSWORD",
  "tenant": "YOUR-TENANT-ID"
}

2. Membuat aplikasi Azure Function lokal di Visual Studio Code

Buat aplikasi Azure Function di Visual Studio Code untuk mengelola grup sumber daya Azure.

Membuat aplikasi fungsi

Menggunakan Visual Studio Code untuk membuat aplikasi fungsi Function lokal.

Di terminal bash, buat dan ubah menjadi direktori baru:
```
mkdir my-function-app && cd my-function-app
```
Di terminal bash, buka Visual Studio Code:
```
code .
```
Buka palet perintah Visual Studio Code:Ctrl + Shift + p.

Memasuki Azure Functions: create new project. Gunakan tabel berikut untuk menyelesaikan perintah:

Prompt	Nilai
Pilih folder yang akan berisi proyek fungsi Anda	Pilih direktori default (saat ini)
Pilih bahasa	Pilih TypeScript.
Pilih model pemrograman TypeScript	Pilih Model V4 (Pratinjau)
Pilih templat untuk fungsi pertama proyek Anda	Pilih pemicu HTTP.
Buat pemicu HTTP baru	Masukkan nama API dari `resourcegroups`.
Tingkat otorisasi	Pilih anonim. Jika Anda melanjutkan proyek ini setelah artikel ini, ubah tingkat otorisasi ke fungsi . Pelajari Otorisasi tingkat fungsi lebih lanjut.

Boilerplate proyek dibuat dan dependensi diinstal.

Menambahkan pengaturan perwakilan layanan ke file local.settings.json

./local.settings.json Buka file di direktori akar proyek dan tambahkan bagian VALUES Anda dengan lima variabel lingkungan berikut.

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "AZURE_CLIENT_ID": "REPLACE-WITH-SERVICE-PRINCIPAL-APPID",
    "AZURE_CLIENT_SECRET": "REPLACE-WITH-SERVICE-PRINCIPAL-PASSWORD",
    "AZURE_SUBSCRIPTION_ID":"REPLACE-WITH-SUBSCRIPTION-ID",
    "AZURE_TENANT_ID":"REPLACE-WITH-SERVICE-PRINCIPAL-TENANT",
    "NODE_ENV":"development"
  }
}

Lihat pengaturan Anda dari bagian sebelumnya untuk menambahkan nilai. Variabel lingkungan ini DIPERLUKAN agar konteksnya menggunakan DefaultAzureCredential.
- AZURE_TENANT_ID: tenant dari output perwakilan layanan di atas.
- AZURE_CLIENT_ID: appId dari output perwakilan layanan di atas.
- AZURE_CLIENT_SECRET: password dari output perwakilan layanan di atas.
Anda juga perlu mengatur ID langganan. Diperlukan untuk menggunakan Azure SDK untuk manajemen sumber daya.
- AZURE_SUBSCRIPTION_ID: Langganan default Anda yang berisi grup sumber daya Anda.

File local.settings.json ini diabaikan oleh git lokal Anda dengan sengaja sehingga Anda tidak memberikannya ke kode sumber Anda.

Menginstal dependensi npm untuk Azure Identity dan Resource management

Di terminal bash terintegrasi Visual Studio Code, instal dependensi Azure SDK untuk Azure Identity dan Manajemen sumber daya.

npm install @azure/identity @azure/arm-resources

Cantumkan semua grup sumber daya dalam langganan dengan JavaScript

Buka file ./src/functions/resourcegroups.ts dan ganti konten dengan kode berikut:

import { ResourceGroup } from '@azure/arm-resources';
import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext
} from '@azure/functions';
import {
  createResourceGroup,
  deleteResourceGroup
} from '../lib/azure-resource-groups';
import { processError } from '../lib/error';

export async function resourcegroup(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  try {
    console.log(JSON.stringify(request.query));
    console.log(JSON.stringify(request.params));

    const name: string = request.query.get('name');
    const location: string = request.query.get('location');
    console.log(`name: ${name}`);
    console.log(`location: ${location}`);

    switch (request.method) {
      case 'POST': // wait for create to complete before returning
        if (!name || !location) {
          return { body: 'Missing required parameters.', status: 400 };
        }

        if (request.headers.get('content-type') === 'application/json') {
          // create with tags

          const body: Record<string, unknown> =
            (await request.json()) as Record<string, string>;
          const tags: Record<string, string> = body?.tags
            ? (body?.tags as Record<string, string>)
            : null;
          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            tags
          );
          return { jsonBody: resourceGroup, status: 200 };
        } else {
          // create without tags

          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            null
          );
          return { jsonBody: resourceGroup, status: 200 };
        }

      case 'DELETE': // wait for delete to complete before returning
        if (!name) {
          return { body: 'Missing required parameters.', status: 400 };
        }
        await deleteResourceGroup(name);
        return { status: 204 };
    }
  } catch (err: unknown) {
    return processError(err);
  }
}

app.http('resourcegroup', {
  methods: ['DELETE', 'POST'],
  authLevel: 'anonymous',
  handler: resourcegroup
});

File ini merespons permintaan API dan /api/resourcegroups mengembalikan daftar semua grup sumber daya dalam langganan.

Buat subdirektori di src bernama lib dan buat file baru di direktori bernama azure-resource-groups.ts.

Salin kode berikut ke dalam file ./src/lib/azure-resource-groups.ts:

// Include npm dependencies
import {
  ResourceGroup, ResourceManagementClient
} from '@azure/arm-resources';
import { DefaultAzureCredential } from '@azure/identity';
import { getSubscriptionId } from './environment-vars';

const subscriptionId = getSubscriptionId();

// Create Azure authentication credentials
const credentials = new DefaultAzureCredential();

// Create Azure SDK client for Resource Management such as resource groups
const resourceManagement = new ResourceManagementClient(
  credentials,
  subscriptionId
);

// all resources groups in subscription
export const listResourceGroups = async (): Promise<{
  list: ResourceGroup[];
  subscriptionId: string;
}> => {
  const list: ResourceGroup[] = [];
  for await (const resourceGroup of resourceManagement.resourceGroups.list()) {
    list.push(resourceGroup);
  }
  return {
    subscriptionId,
    list
  };
};
export const createResourceGroup = async (
  resourceGroupName: string,
  location: string,
  tags: { [propertyName: string]: string }
): Promise<ResourceGroup> => {
  const resourceGroupParameters = {
    location: location,
    tags
  };

  return await resourceManagement.resourceGroups.createOrUpdate(
    resourceGroupName,
    resourceGroupParameters
  );
};
export const deleteResourceGroup = async (
  resourceGroupName: string
): Promise<void> => {
  return await resourceManagement.resourceGroups.beginDeleteAndWait(
    resourceGroupName
  );
};

File ini melengkapi yang berikut:

Mendapatkan ID langganan
Membuat konteks DefaultAzureCredential
Membuat ResourceManagementClient yang diperlukan untuk menggunakan SDK Manajemen sumber Daya.
Mendapatkan semua grup sumber daya dalam langganan.

Buat file baru di ./src/lib direktori bernama environment-vars.ts dan salin kode berikut ke dalam file tersebut.

export const checkAzureAuth = () => {
  // The following code is only used to check you have environment
  // variables configured. The DefaultAzureCredential reads your
  // environment - it doesn't read these variables.
  const tenantId = process.env['AZURE_TENANT_ID'];
  if (!tenantId)
    throw Error('AZURE_TENANT_ID is missing from environment variables.');
  const clientId = process.env['AZURE_CLIENT_ID'];
  if (!clientId)
    throw Error('AZURE_CLIENT_ID is missing from environment variables.');
  const secret = process.env['AZURE_CLIENT_SECRET'];
  if (!secret)
    throw Error('AZURE_CLIENT_SECRET is missing from environment variables.');
};

export const getSubscriptionId = (): string => {
  checkAzureAuth();

  // Get subscription from environment variables
  const subscriptionId = process.env['AZURE_SUBSCRIPTION_ID'];
  if (!subscriptionId)
    throw Error('Azure Subscription is missing from environment variables.');
  return subscriptionId;
};

File ini memeriksa variabel lingkungan sebelum mengembalikan ID langganan.

Buat file baru di ./src/lib direktori bernama error.ts dan salin kode berikut ke dalam file tersebut.

export function processError(err: unknown): any {
  if (typeof err === 'string') {
    return { body: err.toUpperCase(), status: 500 };
  } else if (
    err['stack'] &&
    process.env.NODE_ENV.toLowerCase() !== 'production'
  ) {
    return { jsonBody: { stack: err['stack'], message: err['message'] } };
  } else if (err instanceof Error) {
    return { body: err.message, status: 500 };
  } else {
    return { body: JSON.stringify(err) };
  }
}

File ini mengembalikan kesalahan 500 dengan pesan kesalahan. Tumpukan dikembalikan jika NODE_ENV variabel tidak diatur ke production.

Menguji fungsi lokal

Di terminal terpadu Visual Studio Code, jalankan proyek lokal:
```
npm start
```
Tunggu hingga terminal bash terintegrasi menampilkan URL fungsi yang sedang berjalan.
Buka terminal bash terintegrasi kedua di Visual Studio Code, Ctrl + Shift + 5, dan gunakan perintah GET cURL berikut untuk menggunakan API:
```
curl http://localhost:7071/api/resourcegroups
```
Jika Anda memiliki banyak grup sumber daya dalam langganan Anda, Anda mungkin ingin menyalurkan output ke file agar lebih mudah ditinjau.
```
curl http://localhost:7071/api/resourcegroups > resourcegroups.json
```

Respons mencakup subscriptionId dan list dari semua grup sumber daya dalam langganan tersebut.

{
  "subscriptionId": "ABC123",
  "list": [
        {
          "id": "/subscriptions/ABC123/resourceGroups/vmagelo-cloudshell",
          "name": "jsmith-cloudshell",
          "type": "Microsoft.Resources/resourceGroups",
          "properties": {
            "provisioningState": "Succeeded"
          },
          "location": "westeurope"
        },
        ... REMOVED FOR BREVITY ...
    ]
}

Pemecahan Masalah

Jika Anda tidak dapat menyelesaikan artikel ini, periksa tabel berikut untuk masalah. Jika masalah Anda tidak tercantum dalam tabel, buka masalah di halaman dokumentasi ini.

Masalah	Perbaikan
Aplikasi tidak memulai.	Tinjau kesalahan. Pastikan Anda menginstal dependensi yang diperlukan.
Aplikasinya ini memulai tetapi Anda tidak bisa mendapatkan respons 200.	Pastikan perintah curl Anda meminta dari rute lokal yang benar.
API mengembalikan respons 200 tetapi tidak mengembalikan hasil.	Gunakan ekstensi Visual Studio Code untuk Azure Resources untuk memastikan langganan Anda memiliki grup sumber daya. Jika Anda tidak melihat grup sumber daya apa pun, jangan khawatir. Tutorial ini menambahkan API untuk membuat dan menghapus grup sumber daya di langganan Anda. API ini ditambahkan setelah penyebaran pertama kode sumber ke Azure, sehingga Anda mempelajari cara menyebarkan ulang kode Anda.

3. Membuat aplikasi Azure Function berbasis cloud

Di Visual Studio Code, pilih ikon Azure untuk membuka Azure Explorer.
+ Pilih ikon untuk membuat aplikasi Azure Function baru di cloud Azure.
Pilih Buat Aplikasi Fungsi di Azure.
Masukkan nama unik global untuk aplikasi fungsi baru. Nama harus unik di semua fungsi Azure. Contohnya,jsmith-rg-management.
Pilih runtime Node.js 18+ LTS yang sama dengan yang Anda pilih saat membuat aplikasi fungsi lokal.
Pilih lokasi geografis yang dekat dengan Anda seperti US Barat 3.
Tunggu hingga sumber daya dibuat. Anda dapat menonton Azure: Log Aktivitas untuk detailnya.

4. Mengonfigurasi aplikasi Azure Function berbasis cloud

Anda perlu mengonfigurasi pengaturan aplikasi Azure Anda untuk terhubung ke aplikasi Azure Function. Secara lokal, pengaturan ini ada di file local.settings.json Anda. Proses ini menambahkan nilai-nilai tersebut ke aplikasi cloud Anda.

Di Visual Studio Code, di penjelajah Azure, di bagian Sumber Daya , perluas Aplikasi Fungsi lalu pilih aplikasi fungsi Anda.
Klik kanan Pengaturan Aplikasi dan pilih Tambahkan Pengaturan Baru.
Tambahkan empat nilai dari local.settings.json Anda dengan nama dan nilai yang sama persis.
- AZURE_TENANT_ID: tenant dari output perwakilan layanan di atas.
- AZURE_CLIENT_ID: appId dari output perwakilan layanan di atas.
- AZURE_CLIENT_SECRET: password dari output perwakilan layanan di atas.
- AZURE_SUBSCRIPTION_ID: Langganan default Anda yang berisi grup sumber daya Anda.
- AzureWebJobsFeatureFlags:EnableWorkerIndexing

Cuplikan layar parsial penjelajah Azure Visual Studio Code memperlihatkan pengaturan aplikasi fungsi jarak jauh/cloud.

5. Menyebarkan aplikasi fungsi Resource Manager

Sebarkan aplikasi Azure Function di Visual Studio Code untuk mengelola grup sumber daya Azure.

Gunakan ekstensi Visual Studio Code untuk disebarkan ke lingkungan hosting

Di Visual Studio Code, buka local.settings.json file sehingga terlihat. Ini akan mempermudah langkah-langkah penyalinan nama dan nilai tersebut.
Pilih logo Azure untuk membuka Azure Explorer, lalu di bawah Functions, pilih ikon cloud untuk menyebarkan aplikasi Anda.

Atau, Anda dapat menyebarkan dengan membuka Palet Perintah dengan Ctrl + Shift + p, masukkan deploy to function app, dan jalankan perintah Azure Functions: Sebarkan ke Aplikasi Fungsi.
Pilih Sebarkan ke aplikasi Fungsi.
Pilih nama Aplikasi Fungsi yang Anda buat di bagian sebelumnya.
Saat ditanya apakah Anda yakin ingin menyebarkan, pilih Sebarkan.
Panel Output Visual Studio Code untuk Azure Functions menunjukkan kemajuan. Saat menyebarkan, seluruh aplikasi Fungsi disebarkan, sehingga mengubah ke semua fungsi individual disebarkan sekaligus.

Aplikasi Verifikasi Fungsi tersedia dengan browser

Saat masih di Visual Studio Code, gunakan penjelajah Azure Functions, perluas simpul untuk langganan Azure Anda, perluas simpul untuk aplikasi Fungsi Anda, lalu perluas Azure Functions (hanya baca). Klik kanan nama fungsi, dan pilih Salin URL Fungsi:
Tempelkan URL ke browser dan tekan Enter untuk meminta daftar grup sumber daya dari API cloud.

6. Tambahkan API ke aplikasi fungsi dan sebarkan ulang ke Azure

Tambahkan API berikut lalu sebarkan ulang aplikasi Azure Function Anda di Visual Studio Code:

Menambahkan dan menghapus grup sumber daya
Mencantumkan sumber daya dalam grup sumber daya atau langganan.

Pada titik ini dalam tutorial, Anda membuat aplikasi fungsi lokal dengan satu API untuk mencantumkan grup sumber daya langganan Anda dan Anda menyebarkan aplikasi tersebut ke Azure. Sebagai pengembang Azure, Anda mungkin ingin membuat atau menghapus grup sumber daya sebagai bagian dari alur otomatisasi proses Anda.

Membuat API grup sumber daya untuk aplikasi fungsi Anda

Gunakan ekstensi Visual Studio Code untuk Azure Functions untuk menambahkan file TypeScript ke aplikasi fungsi Anda untuk membuat dan menghapus grup sumber daya.

Buka palet perintah Visual Studio Code:Ctrl + Shift + p.
Masukkan Azure Functions: Create Function lalu tekan enter untuk memulai proses.

Gunakan tabel berikut untuk membuat API /api/resourcegroup :

Prompt	Nilai
Pilih templat untuk fungsi Anda	Pemicu HTTP
Menyediakan nama fungsi	`resourcegroup`
Tingkat otorisasi	Pilih anonim. Jika Anda melanjutkan proyek ini, ubah tingkat otorisasi ke fungsi . Pelajari Otorisasi tingkat fungsi lebih lanjut.

./src/functions/resourcegroup.ts Buka dan ganti seluruh file dengan kode sumber berikut.

import { ResourceGroup } from '@azure/arm-resources';
import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext
} from '@azure/functions';
import {
  createResourceGroup,
  deleteResourceGroup
} from '../lib/azure-resource-groups';
import { processError } from '../lib/error';

export async function resourcegroup(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  try {
    console.log(JSON.stringify(request.query));
    console.log(JSON.stringify(request.params));

    const name: string = request.query.get('name');
    const location: string = request.query.get('location');
    console.log(`name: ${name}`);
    console.log(`location: ${location}`);

    switch (request.method) {
      case 'POST': // wait for create to complete before returning
        if (!name || !location) {
          return { body: 'Missing required parameters.', status: 400 };
        }

        if (request.headers.get('content-type') === 'application/json') {
          // create with tags

          const body: Record<string, unknown> =
            (await request.json()) as Record<string, string>;
          const tags: Record<string, string> = body?.tags
            ? (body?.tags as Record<string, string>)
            : null;
          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            tags
          );
          return { jsonBody: resourceGroup, status: 200 };
        } else {
          // create without tags

          const resourceGroup: ResourceGroup = await createResourceGroup(
            name,
            location,
            null
          );
          return { jsonBody: resourceGroup, status: 200 };
        }

      case 'DELETE': // wait for delete to complete before returning
        if (!name) {
          return { body: 'Missing required parameters.', status: 400 };
        }
        await deleteResourceGroup(name);
        return { status: 204 };
    }
  } catch (err: unknown) {
    return processError(err);
  }
}

app.http('resourcegroup', {
  methods: ['DELETE', 'POST'],
  authLevel: 'anonymous',
  handler: resourcegroup
});

File ./src/lib/azure-resource-groups.ts sudah berisi kode untuk menambahkan dan menghapus grup sumber daya.

Membuat API sumber daya untuk aplikasi fungsi Anda

Gunakan ekstensi Visual Studio Code untuk Azure Functions untuk menambahkan file TypeScript ke aplikasi fungsi Anda untuk mencantumkan sumber daya dalam grup sumber daya.

Buka palet perintah Visual Studio Code:Ctrl + Shift + p.
Masukkan Azure Functions: Create Function lalu tekan enter untuk memulai proses.

Gunakan tabel berikut untuk membuat API /api/resources :

Prompt	Nilai
Pilih templat untuk fungsi Anda	Pemicu HTTP
Menyediakan nama fungsi	`resources`
Tingkat otorisasi	Pilih anonim. Jika Anda melanjutkan proyek ini, ubah tingkat otorisasi ke fungsi . Pelajari Otorisasi tingkat fungsi lebih lanjut.

./src/functions/resources.ts Buka dan ganti seluruh file dengan kode sumber berikut.

import {
  app,
  HttpRequest,
  HttpResponseInit,
  InvocationContext
} from '@azure/functions';
import {
  listResourceByResourceGroup, listResourceBySubscription
} from '../lib/azure-resource';
import { processError } from '../lib/error';

export async function resources(
  request: HttpRequest,
  context: InvocationContext
): Promise<HttpResponseInit> {
  try {
    const resourceGroupName: string = request.query.get('resourceGroupName');
    context.log(`resourceGroupName: '${resourceGroupName}'`);

    if (resourceGroupName) {
      const resourcesByName = await listResourceByResourceGroup(
        resourceGroupName
      );
      return { jsonBody: resourcesByName };
    } else {
      const resourcesBySubscription = await listResourceBySubscription();
      return { jsonBody: resourcesBySubscription };
    }
  } catch (err: unknown) {
    return processError(err);
  }
}
app.http('resources', {
  methods: ['GET'],
  authLevel: 'anonymous',
  handler: resources
});

./src/lib/azure-resource.ts Buat file dan salin kode berikut ke dalamnya untuk mencantumkan sumber daya dalam grup sumber daya.

// Include npm dependencies
import { Resource, ResourceManagementClient } from '@azure/arm-resources';
import { DefaultAzureCredential } from '@azure/identity';
import { getSubscriptionId } from './environment-vars';

const subscriptionId = getSubscriptionId();

// Create Azure authentication credentials
const credentials = new DefaultAzureCredential();

// Create Azure SDK client for Resource Management such as resource groups
const resourceManagement = new ResourceManagementClient(
  credentials,
  subscriptionId
);

// all resources groups in subscription
export const listResourceBySubscription = async (): Promise<{
  list: Resource[];
  subscriptionId: string;
}> => {
  const list: Resource[] = [];

  for await (const resource of resourceManagement.resources.list()) {
    list.push(resource);
  }

  return {
    subscriptionId,
    list
  };
};
// all resources groups in resource group
export const listResourceByResourceGroup = async (
  resourceGroupName: string
): Promise<{
  list: Resource[];
  subscriptionId: string;
  resourceGroupName: string;
}> => {
  const list: Resource[] = [];

  for await (const resource of resourceManagement.resources.listByResourceGroup(
    resourceGroupName
  )) {
    list.push(resource);
  }

  return {
    subscriptionId,
    resourceGroupName,
    list
  };
};

Mulai aplikasi fungsi lokal Anda dan uji API baru

Di terminal terpadu Visual Studio Code, jalankan proyek lokal:
```
npm start
```
Tunggu hingga terminal bash terintegrasi menampilkan URL fungsi yang sedang berjalan.

Gunakan perintah curl berikut di terminal bash terintegrasi yang berbeda, untuk memanggil API Anda, untuk menambahkan grup sumber daya ke langganan Anda. Ubah nama grup sumber daya untuk menggunakan konvensi penamaan Anda sendiri.

curl -X POST 'http://localhost:7071/api/resourcegroup?name=my-test-1&location=westus'

curl -X POST 'http://localhost:7071/api/resourcegroup?name=my-test-1&location=westus' \
  -H 'content-type: application/json' \
  -d '{"tags": {"a":"b"}}'

Gunakan perintah curl berikut untuk melihat grup sumber daya baru yang tercantum dalam langganan Anda.
```
curl http://localhost:7071/api/resource-groups
```

Gunakan perintah curl berikut untuk menghapus grup sumber daya yang baru saja Anda tambahkan.

curl -X DELETE 'http://localhost:7071/api/resourcegroup?name=my-test-1' \
  -H 'Content-Type: application/json'

Memindahkan aplikasi fungsi Anda dengan API baru ke Azure

Di Visual Studio Code, sebarkan dengan membuka Palet Perintah dengan Ctrl + Shift + p, memasukkan deploy to function app, dan menjalankan perintah Azure Functions: Deploy to Function App.
Pilih aplikasi fungsi Anda dari daftar aplikasi.
Pilih Sebarkan dari jendela pop-up.
Tunggu hingga penyebaran selesai.

Verifikasi API Fungsi dengan browser

Gunakan perintah cURL sebelumnya, mengganti alamat localhost, http://localhost:7071 dengan nama sumber daya Azure Function Anda seperti https://myfunction.azurewebsites.net.

7. Menampilkan dan mengkueri log aplikasi Fungsi Anda

Menampilkan dan mengkueri log aplikasi Azure Function di portal Azure.

Mengkueri log Azure Function Anda

Gunakan portal Azure untuk melihat dan mengkueri log fungsi Anda.

Di VS Code, pilih logo Azure untuk membuka Azure Explorer, lalu di bawah Functions, klik kanan pada aplikasi fungsi Anda, lalu pilih Buka di Portal.

Tindakan ini membuka portal Azure ke Azure Function Anda.
Pilih Application Insights dari Pengaturan, lalu pilih Lihat data Application Insights.

Tautan ini membawa Anda ke sumber daya metrik terpisah yang dibuat untuk Anda ketika membuat Azure Function dengan VS Code.
Pilih Log di bagian Pemantauan. Jika jendela pop-up Kueri muncul, pilih X di sudut kanan atas pop-up untuk menutupnya.
Di panel Skema dan Filter, pada tab Tabel, klik dua kali tabel jejak.

Ini memasukkan kueri Kusto, traces ke jendela kueri.

Edit kueri untuk mencari panggilan API:

traces 
| where message startswith "Executing "

Pilih Jalankan.

Jika log tidak menampilkan hasil apa pun, mungkin karena ada beberapa menit penundaan antara permintaan HTTP ke Azure Function dan ketersediaan log di Kusto. Tunggu beberapa menit dan jalankan kueri lagi.

Karena sumber daya Application Insights ditambahkan untuk Anda saat membuat aplikasi Azure Function, Anda tidak perlu melakukan apa pun tambahan untuk mendapatkan informasi pengelogan ini:
- Aplikasi Fungsi menambahkan Application Insights untuk Anda.
- Alat Kueri disertakan dalam portal Azure.
- Anda dapat memilih traces alih-alih harus belajar menulis kueri Kusto untuk mendapatkan bahkan informasi minimum dari log Anda.

8. Bersihkan sumber daya Azure

Hapus grup sumber daya

Di Visual Studio Code, pilih logo Azure untuk membuka Azure Explorer, lalu di bawah Functions, klik kanan pada aplikasi fungsi Anda, lalu pilih Buka di Portal. Ini membuka portal Azure ke Azure Function Anda.
Di bagian Gambaran Umum , temukan dan pilih nama grup sumber daya. Tindakan ini membawa Anda ke grup sumber daya di portal Azure.
Halaman grup sumber daya mencantumkan semua sumber daya yang terkait dengan tutorial ini.
Di menu atas, pilih Hapus grup sumber daya.
Di menu samping, masukkan nama grup sumber daya lalu pilih Hapus.

Menghapus perwakilan layanan

Untuk menghapus perwakilan layanan, jalankan perintah berikut. Ganti <YOUR-SERVICE-PRINCIPAL-NAME> dengan nama perwakilan layanan Anda.

az ad sp delete --id <YOUR-SERVICE-PRINCIPAL-NAME>

Kode Sampel

GitHub: Azure-Samples/azure-typescript-e2e-apps

Langkah berikutnya

Mengonversi teks menjadi ucapan di aplikasi Express.js

Mengelola grup sumber daya Azure dengan TypeScript Function API

Membuat atau menggunakan langganan Azure yang sudah ada

Prasyarat

Arsitektur aplikasi

1. Menyiapkan lingkungan Anda

Dapatkan ID Langganan Azure Anda

Membuat perwakilan layanan Azure

2. Membuat aplikasi Azure Function lokal di Visual Studio Code

Membuat aplikasi fungsi

Menambahkan pengaturan perwakilan layanan ke file local.settings.json

Menginstal dependensi npm untuk Azure Identity dan Resource management

Cantumkan semua grup sumber daya dalam langganan dengan JavaScript

Menguji fungsi lokal

Pemecahan Masalah

3. Membuat aplikasi Azure Function berbasis cloud

4. Mengonfigurasi aplikasi Azure Function berbasis cloud

5. Menyebarkan aplikasi fungsi Resource Manager

Gunakan ekstensi Visual Studio Code untuk disebarkan ke lingkungan hosting

Aplikasi Verifikasi Fungsi tersedia dengan browser

6. Tambahkan API ke aplikasi fungsi dan sebarkan ulang ke Azure

Membuat API grup sumber daya untuk aplikasi fungsi Anda

Membuat API sumber daya untuk aplikasi fungsi Anda

Mulai aplikasi fungsi lokal Anda dan uji API baru

Memindahkan aplikasi fungsi Anda dengan API baru ke Azure

Verifikasi API Fungsi dengan browser

7. Menampilkan dan mengkueri log aplikasi Fungsi Anda

Mengkueri log Azure Function Anda

8. Bersihkan sumber daya Azure

Hapus grup sumber daya

Menghapus perwakilan layanan

Kode Sampel

Langkah berikutnya

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Mengelola grup sumber daya Azure dengan TypeScript Function API

Membuat atau menggunakan langganan Azure yang sudah ada

Prasyarat

Arsitektur aplikasi

1. Menyiapkan lingkungan Anda

Masuk ke Azure CLI

Dapatkan ID Langganan Azure Anda

Membuat perwakilan layanan Azure

2. Membuat aplikasi Azure Function lokal di Visual Studio Code

Membuat aplikasi fungsi

Menambahkan pengaturan perwakilan layanan ke file local.settings.json

Menginstal dependensi npm untuk Azure Identity dan Resource management

Cantumkan semua grup sumber daya dalam langganan dengan JavaScript

Menguji fungsi lokal

Pemecahan Masalah

3. Membuat aplikasi Azure Function berbasis cloud

4. Mengonfigurasi aplikasi Azure Function berbasis cloud

5. Menyebarkan aplikasi fungsi Resource Manager

Gunakan ekstensi Visual Studio Code untuk disebarkan ke lingkungan hosting

Aplikasi Verifikasi Fungsi tersedia dengan browser

6. Tambahkan API ke aplikasi fungsi dan sebarkan ulang ke Azure

Membuat API grup sumber daya untuk aplikasi fungsi Anda

Membuat API sumber daya untuk aplikasi fungsi Anda

Mulai aplikasi fungsi lokal Anda dan uji API baru

Memindahkan aplikasi fungsi Anda dengan API baru ke Azure

Verifikasi API Fungsi dengan browser

7. Menampilkan dan mengkueri log aplikasi Fungsi Anda

Mengkueri log Azure Function Anda

8. Bersihkan sumber daya Azure

Hapus grup sumber daya

Menghapus perwakilan layanan

Kode Sampel

Langkah berikutnya

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: