Latihan - Membuat proyek Azure Functions

  • 6 menit

Aplikasi web daftar belanja Anda memerlukan API. Dalam latihan ini, Anda membuat dan menjalankan API menggunakan proyek Azure Functions. Dari sana, Anda memperluas API dengan fungsi baru menggunakan ekstensi Azure Functions untuk Visual Studio Code.

Dalam latihan ini, Anda menyelesaikan langkah-langkah berikut:

  1. Buat cabang saat Anda bersiap untuk membuat perubahan pada aplikasi web Anda.
  2. Jelajahi proyek Azure Function.
  3. Buat fungsi HTTP GET.
  4. Gantikan kode awal fungsi dengan logika untuk mendapatkan produk.
  5. Konfigurasikan aplikasi web untuk mem-proksi permintaan HTTP ke API.
  6. Jalankan API dan aplikasi web.

Dapatkan aplikasi fungsi

Sekarang, tambahkan API dan sambungkan ke aplikasi front-end Anda. Folder api-starter mencakup proyek Azure Functions yang tidak lengkap. Jadi, mari kita lengkapi itu sekarang.

Membuat cabang API

Sebelum membuat perubahan pada aplikasi, ada baiknya membuat cabang baru untuk perubahan. Anda akan menyelesaikan API untuk aplikasi Anda, jadi sekarang saat yang tepat untuk membuat cabang.

  1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

  2. Masukkan dan pilih Git: Checkout ke....

  3. Pilih Buat cabang baru.

  4. Masukkan api untuk nama cabang baru, dan tekan Enter.

Anda baru saja membuat cabang git api.

Menyelesaikan API Azure Functions

Untuk menyelesaikan API, mulailah dengan memindahkan kode API pemula ke folder bernama api. Anda memasukkan nama folder ini untuk api_location saat membuat instans Static Web Apps.

  1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

  2. Masukkan dan pilih Terminal : Buat Terminal Baru (Di Ruang Kerja Aktif).

  3. Pastikan Anda berada di folder akar proyek.

  4. Jalankan perintah git berikut untuk mengganti nama folder api-starter menjadi api .

    git mv api-starter api

  5. Buka palet perintah dengan menekan F1.

  6. Masukkan dan pilih Git: Terapkan Semua.

  7. Masukkan pesan komit api dan tekan Enter.

Sekarang, Anda akan melihat folder api di penjelajah Visual Studio Code. Folder api berisi proyek Azure Functions Anda, bersama dengan tiga fungsi.

Folder dan file Metode Rute
api/products-post TIANG products
api/products-put MELETAKKAN products/:id
api/products-delete MENGHAPUS products/:id

Membuat fungsi HTTP GET

API Anda memiliki rute untuk memanipulasi produk untuk daftar belanja, tetapi tidak memiliki rute untuk mendapatkan produk. Mari kita tambahkan itu sekarang.

Menginstal ekstensi Azure Functions untuk Visual Studio Code

Anda dapat membuat dan mengelola aplikasi Azure Functions dengan menggunakan ekstensi Azure Functions untuk Visual Studio Code.

  1. Buka Visual Studio Marketplace, dan instal ekstensi Azure Functions untuk Visual Studio Code.

  2. Saat tab ekstensi dimuat di Visual Studio Code, pilih Instal.

  3. Setelah penginstalan selesai, pilih Muat Ulang.

Nota

Pastikan untuk menginstal Azure Functions Core Tools, yang memungkinkan Anda menjalankan Azure Functions secara lokal.

Membuat fungsi

Sekarang Anda memperluas aplikasi Azure Function dengan fungsi untuk mendapatkan produk Anda.

  1. Di Visual Studio Code, buka palet perintah dengan menekan F1.

  2. Masukkan dan pilih Azure Functions: Buat Fungsi.

  3. Ketika diminta untuk membuat fungsi, pilih Pemicu HTTP.

  4. Masukkan products-get sebagai nama fungsi.

  5. Pilih Anonim sebagai tingkat autentikasi.

Nota

Aplikasi Functions berada di folder api, yang memisahkannya dari proyek aplikasi web individual. Semua aplikasi web yang menggunakan kerangka kerja front-end melakukan panggilan ke API yang sama. Anda dapat memutuskan cara menyusun aplikasi Anda, tetapi untuk sampel ini akan membantu jika melihatnya terpisah.

Mengonfigurasi Metode HTTP dan titik akhir rute

Perhatikan folder api/products-get berisi file function.json. File ini berisi konfigurasi untuk fungsi Anda.

Titik akhir rute memiliki nama yang sama dengan folder yang berisi fungsi, menurut konvensi. Karena fungsi dibuat di folder products-get, titik akhir rute dihasilkan sebagai products-get, secara default. Namun, Anda ingin titik akhir menjadi produk.

Konfigurasikan fungsi Anda:

  1. Buka file api/products-get/function.json.

  2. Perhatikan bahwa metode tersebut memungkinkan GET dan POST.

  3. Ubah array metode untuk hanya mengizinkan permintaan GET.

  4. Tambahkan entri "route": "products" setelah array metode.

Sekarang fungsi Anda dipicu pada permintaan HTTP GET untuk produk. function.json Anda akan terlihat seperti kode berikut:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Memperbarui logika fungsi

File index.js di folder api/products-get berisi logika yang berjalan saat Anda membuat permintaan HTTP ke rute.

Anda perlu memperbarui logika untuk mendapatkan produk Anda. Ada logika akses data dalam modul JavaScript /shared/product-data.js. Modul product-data mengekspos fungsi getProducts untuk mendapatkan produk untuk daftar belanja.

Sekarang, ubah titik akhir fungsi untuk mengembalikan produk:

  1. Buka file api/products-get/index.js.

  2. Ganti kontennya dengan kode berikut:

    const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

Fungsi Anda mendapatkan produk dan mengembalikannya dengan kode status 200, jika berhasil.

Konfigurasi Berbagi Sumber Daya Lintas Asal (CORS) secara lokal

Anda tidak perlu khawatir tentang CORS saat menerbitkan ke Azure Static Web Apps. Azure Static Web Apps secara otomatis mengonfigurasi aplikasi Anda sehingga dapat berkomunikasi dengan API Anda di Azure menggunakan proksi terbalik. Tetapi saat berjalan secara lokal, Anda perlu mengonfigurasi CORS untuk memungkinkan aplikasi web dan API Anda berkomunikasi.

Sekarang, beri tahu Azure Functions untuk mengizinkan aplikasi web Anda membuat permintaan HTTP ke API, di komputer Anda.

  1. Buat file bernama api/local.settings.json.

  2. Tambahkan konten berikut ke file:

    {
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

    {
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Nota

File local.settings.json tercantum dalam file .gitignore, yang mencegah file ini didorong ke GitHub. Ini karena Anda dapat menyimpan rahasia dalam file ini yang tidak Anda inginkan di GitHub. Inilah sebabnya mengapa Anda harus membuat file saat membuat repositori dari templat.

Menjalankan API

Sekarang saatnya untuk menonton aplikasi web anda dan proyek Azure Functions bekerja sama. Mulailah dengan menjalankan proyek Azure Functions Anda secara lokal dengan mengikuti langkah-langkah berikut:

Nota

Pastikan untuk menginstal Azure Functions Core Tools, yang memungkinkan Anda menjalankan Azure Functions secara lokal.

  1. Buka terminal git dan buka folder api:

    cd api

  2. Jalankan aplikasi Azure Functions secara lokal:

    npm install

    npm start

Menjalankan aplikasi web

API Anda sedang berjalan. Sekarang Anda perlu mengonfigurasi aplikasi front-end Anda untuk membuat permintaan HTTP-nya ke API Anda. Aplikasi front-end berjalan pada satu port, dan API berjalan pada port yang berbeda (7071). Setiap kerangka kerja front-end dapat dikonfigurasi untuk memproksi permintaan HTTP ke port dengan aman.

Konfigurasikan port proksi Anda

Konfigurasikan proksi untuk aplikasi front-end Anda dengan langkah-langkah berikut:

  1. Buka file angular-app/proxy.conf.json.

  2. Temukan pengaturan target: 'http://localhost:7071'.

  3. Perhatikan bahwa port target menunjuk ke 7071.

  1. Buka file react-app/package.json.

  2. Temukan pengaturan "proxy": "http://localhost:7071/",.

  3. Perhatikan bahwa port proksi mengarah ke 7071.

  1. Buka file svelte-app/rollup.config.js.

  2. Temukan baris kode const api = 'http://localhost:7071/api';.

  3. Perhatikan bahwa port API menunjuk ke 7071.

  1. Buka file vue-app/vue.config.js.

  2. Temukan pengaturan target: 'http://localhost:7071',.

  3. Perhatikan bahwa port target mengarah ke 7071.

Menjalankan aplikasi web front-end Anda

API Anda sudah berjalan pada port 7071. Sekarang, saat Anda menjalankan aplikasi web, aplikasi web tersebut membuat permintaan HTTP-nya ke API Anda. Jalankan aplikasi web Anda dengan mengikuti langkah-langkah berikut:

  1. Buka instans terminal git kedua.

  2. Selanjutnya, masukkan perintah ini untuk masuk ke folder kerangka kerja front-end pilihan Anda:

    cd angular-app

    cd react-app

    cd svelte-app

    cd vue-app

  3. Jalankan aplikasi klien front-end:

    npm start

    npm start

    npm run dev

    npm run serve

Telusuri ke aplikasi Anda

Saatnya untuk melihat aplikasi Anda berjalan secara lokal terhadap Azure Functions API.

  1. Telusuri ke http://localhost:4200.
  1. Telusuri ke http://localhost:3000.
  1. Telusuri ke http://localhost:5000.
  1. Telusuri ke http://localhost:8080.
  1. Anda membuat aplikasi, dan sekarang aplikasi berjalan secara lokal membuat permintaan HTTP GET ke API Anda. Sekarang, hentikan aplikasi dan API yang sedang berjalan dengan menekan Ctrl-C di terminal.

Langkah berikutnya

Aplikasi Anda berfungsi secara lokal, dan langkah Anda selanjutnya adalah menerbitkan aplikasi dengan API.