Mulai cepat: Buat fungsi JavaScript di Azure menggunakan Visual Studio Code

Gunakan Visual Studio Code untuk membuat fungsi JavaScript yang merespons permintaan HTTP. Uji kode secara lokal, lalu sebarkan ke lingkungan tanpa server Azure Functions.

Penting

Konten artikel ini berubah berdasarkan pilihan model pemrograman Node.js Anda di pemilih di bagian atas halaman. Model v4 umumnya tersedia dan dirancang untuk memiliki pengalaman yang lebih fleksibel dan intuitif untuk pengembang JavaScript dan TypeScript. Pelajari selengkapnya tentang perbedaan antara v3 dan v4 dalam panduan migrasi.

Penyelesaian mulai cepat ini dikenakan biaya kecil beberapa sen USD atau kurang di akun Azure Anda.

Ada juga versi berbasis CLI dari artikel ini.

Mengkonfigurasikan lingkungan Anda

Sebelum memulai, pastikan Anda memiliki persyaratan berikut:

• Akun Azure dengan langganan aktif. Buat akun secara gratis.

• Node.js 14.x atau lebih tinggi. Gunakan perintah node --version untuk memeriksa versi Anda.

• Visual Studio Code di salah satu platform yang didukung.

• Ekstensi Azure Functions untuk Visual Studio Code. Ekstensi ini menginstal Azure Functions Core Tools untuk Anda saat pertama kali menjalankan fungsi Anda secara lokal.

• Akun Azure dengan langganan aktif. Buat akun secara gratis.

• Node.js 18.x atau lebih tinggi. Gunakan perintah node --version untuk memeriksa versi Anda.

• Visual Studio Code di salah satu platform yang didukung.

• Ekstensi Azure Functions v1.10.4 atau lebih tinggi untuk Visual Studio Code. Ekstensi ini menginstal Azure Functions Core Tools untuk Anda saat pertama kali menjalankan fungsi Anda secara lokal. Node.js v4 memerlukan versi 4.0.5382, atau versi Core Tools yang lebih baru.

Menginstal atau memperbarui Core Tools

Ekstensi Azure Functions untuk Visual Studio Code terintegrasi dengan Azure Functions Core Tools sehingga Anda dapat menjalankan dan men-debug fungsi Anda secara lokal di Visual Studio Code menggunakan runtime Azure Functions. Sebelum memulai, ada baiknya menginstal Core Tools secara lokal atau memperbarui penginstalan yang ada untuk menggunakan versi terbaru.

Di Visual Studio Code, pilih F1 untuk membuka palet perintah, lalu cari dan jalankan perintah Azure Functions: Instal atau Perbarui Core Tools.

Perintah ini mencoba memulai penginstalan berbasis paket dari versi terbaru Core Tools atau memperbarui penginstalan berbasis paket yang ada. Jika Anda tidak menginstal npm atau Homebrew di komputer lokal, Anda harus menginstal atau memperbarui Core Tools secara manual.

Membuat proyek lokal Anda

Di bagian ini, gunakan Visual Studio Code untuk membuat proyek Azure Functions lokal dalam JavaScript. Kemudian dalam artikel ini, Anda menerbitkan kode fungsi Anda ke Azure.

1. Di Visual Studio Code, tekan F1 untuk membuka palet perintah dan cari dan jalankan perintah Azure Functions: Create New Project....

2. Pilih lokasi direktori untuk ruang kerja proyek Anda dan pilih Pilih. Anda harus membuat folder baru atau memilih folder kosong untuk ruang kerja proyek. Jangan memilih folder proyek yang sudah merupakan bagian dari sebuah ruang kerja.

3. Berikan informasi berikut pada permintaan:

   Prompt	Pilihan
   Pilih bahasa pemrogram untuk proyek fungsi Anda	Pilih JavaScript.
   Pilih model pemrograman JavaScript	Memilih Model V3
   Pilih templat untuk fungsi pertama proyek Anda	Pilih HTTP trigger.
   Berikan nama fungsi	Ketik HttpExample.
   Tingkat otorisasi	Pilih Anonymous, yang memungkinkan siapa saja untuk memanggil titik akhir fungsi Anda. Untuk informasi selengkapnya, lihat Tingkat otorisasi.
   Pilih bagaimana Anda ingin membuka proyek Anda	Pilih Open in current window.

   Dengan menggunakan informasi ini, Visual Studio Code akan membuat proyek Azure Functions dengan pemicu HTTP. Anda bisa melihat file proyek lokal di Explorer. Untuk mempelajari selengkapnya tentang file yang dibuat, lihat File proyek yang dihasilkan.

3. Berikan informasi berikut pada permintaan:

   Prompt	Pilihan
   Pilih bahasa pemrogram untuk proyek fungsi Anda	Pilih JavaScript.
   Pilih model pemrograman JavaScript	Memilih Model V4
   Pilih templat untuk fungsi pertama proyek Anda	Pilih HTTP trigger.
   Berikan nama fungsi	Ketik HttpExample.
   Pilih bagaimana Anda ingin membuka proyek Anda	Memilih Open in current window

   Dengan menggunakan informasi ini, Visual Studio Code akan membuat proyek Azure Functions dengan pemicu HTTP. Anda bisa melihat file proyek lokal di Explorer. Untuk mempelajari selengkapnya tentang file yang dibuat, lihat Panduan pengembang JavaScript Azure Functions.

Jalankan fungsi secara lokal

Visual Studio Code terintegrasi dengan alat Azure Functions Core untuk memungkinkan Anda menjalankan proyek ini di komputer pengembangan lokal sebelum Anda menerbitkan ke Azure.

1. Untuk memulai fungsi secara lokal, tekan F5 atau ikon Jalankan dan Debug di bilah Aktivitas sisi kiri. Panel Terminal menampilkan Output dari Core Tools. Aplikasi Anda dimulai di panel Terminal. Anda dapat melihat titik akhir URL dari fungsi yang dipicu HTTP berjalan secara lokal.

   

   Jika Anda mengalami masalah saat menjalankan fungsi di Windows, pastikan bahwa terminal default untuk Visual Studio Code tidak diatur ke WSL Bash.

2. Dengan Core Tools yang masih berjalan di Terminal, pilih ikon Azure di bilah aktivitas. Di area Ruang Kerja, luaskan Proyek Lokal>Functions. Klik kanan (Windows) atau Ctrl - klik (macOS) fungsi baru dan pilih Jalankan Fungsi Sekarang....

   

3. Di Masukkan isi permintaan Anda melihat nilai isi pesan permintaan { "name": "Azure" }. Tekan Masukkan untuk mengirim pesan permintaan ini ke fungsi Anda.

4. Saat fungsi dijalankan secara lokal dan mengembalikan respons, pemberitahuan akan dimunculkan dalam Visual Studio Code. Informasi tentang eksekusi fungsi ditampilkan di panel Terminal.

5. Dengan panel Terminal terfokus, tekan Ctrl + C untuk menghentikan Core Tools dan memutuskan sambungan debugger.

Setelah memverifikasi bahwa fungsinya berjalan dengan benar di komputer lokal Anda, saatnya menggunakan Visual Studio Code untuk menerbitkan proyek langsung ke Azure.

Masuk ke Azure

Sebelum dapat membuat sumber daya Azure atau menerbitkan aplikasi, Anda harus masuk ke Azure.

1. Jika Anda belum masuk, di bilah Aktivitas, pilih ikon Azure. Lalu di bawah Sumber Daya, pilih Masuk ke Azure.

   

   Jika sudah masuk dan dapat melihat langganan Anda yang ada, buka bagian berikutnya. Jika Anda belum memiliki akun Azure, pilih Buat Akun Azure. Siswa dapat memilih Buat Akun Azure for Students.

2. Saat Diminta di browser, pilih akun Azure Anda dan masuk dengan menggunakan kredensial akun Azure Anda. Jika membuat akun baru, Anda dapat masuk setelah akun berhasil dibuat.

3. Setelah berhasil masuk, Anda dapat menutup jendela browser baru. Langganan milik akun Azure Anda ditampilkan di bilah samping.

Membuat aplikasi fungsi di Azure

Di bagian ini, Anda membuat aplikasi fungsi dan sumber daya terkait di langganan Azure Anda. Banyak keputusan pembuatan sumber daya dibuat untuk Anda berdasarkan perilaku default. Untuk kontrol lebih lanjut atas sumber daya yang dibuat, Anda harus membuat aplikasi fungsi dengan opsi tingkat lanjut.

1. Di Visual Studio Code, pilih F1 untuk membuka palet perintah. Pada perintah (>), masukkan lalu pilih Azure Functions: Buat Aplikasi Fungsi di Azure.

2. Pada perintah, berikan informasi berikut:

   Prompt	Perbuatan
   Pilih langganan	Pilih langganan Azure yang akan digunakan. Perintah tidak muncul saat Anda hanya memiliki satu langganan yang terlihat di bawah Sumber Daya.
   Masukkan nama unik global untuk aplikasi fungsi	Masukkan nama yang valid di jalur URL. Nama yang Anda masukkan divalidasi untuk memastikan bahwa nama tersebut unik di Azure Functions.
   Pilih tumpukan runtime	Pilih versi bahasa yang saat ini Anda jalankan secara lokal.
   Pilih lokasi untuk sumber daya baru	Pilih wilayah Azure. Untuk performa yang lebih baik, pilih wilayah di dekat Anda.

   Di panel Azure: Log Aktivitas, ekstensi Azure memperlihatkan status sumber daya individual saat dibuat di Azure.

   

3. Saat aplikasi fungsi dibuat, sumber daya terkait berikut dibuat di langganan Azure Anda. Sumber daya dinamai berdasarkan nama yang Anda masukkan untuk aplikasi fungsi Anda.

   • Grup sumber daya, yang merupakan kontainer logis untuk sumber daya terkait.
   • Akun Azure Storage standar, memelihara status dan informasi lain tentang proyek Anda.
   • Aplikasi fungsi, menyediakan lingkungan untuk menjalankan kode fungsi Anda. Aplikasi fungsi memungkinkan Anda mengelompokkan fungsi sebagai unit logis untuk memudahkan pengelolaan, penerapan, dan berbagi sumber daya dalam paket hosting yang sama.
   • Paket Azure App Service, yang menentukan host yang mendasar untuk aplikasi fungsi Anda.
   • Instans Application Insights yang terhubung ke aplikasi fungsi, dan yang melacak penggunaan fungsi Anda di aplikasi.

   Notifikasi ditampilkan setelah aplikasi fungsi Anda dibuat dan paket penyebaran diterapkan.

   Tip

   Secara default, sumber daya Azure yang diperlukan oleh aplikasi fungsi Anda dibuat berdasarkan nama yang Anda masukkan untuk aplikasi fungsi Anda. Secara default, sumber daya dibuat dengan aplikasi fungsi dalam grup sumber daya baru yang sama. Jika Anda ingin menyesuaikan nama sumber daya terkait atau menggunakan kembali sumber daya yang ada, terbitkan proyek dengan opsi buat tingkat lanjut.

Menyebarkan proyek ke Azure

Penting

Penyebaran ke aplikasi fungsi yang ada selalu menimpa konten aplikasi tersebut di Azure.

1. Di palet perintah, masukkan lalu pilih Azure Functions: Sebarkan ke Aplikasi Fungsi.

2. Pilih aplikasi fungsi yang baru saja Anda buat. Saat diminta untuk menimpa penyebaran sebelumnya, pilih Sebarkan untuk menyebarkan kode fungsi Anda ke sumber daya aplikasi fungsi baru.

3. Saat penyebaran selesai, pilih Tampilkan Output untuk melihat hasil pembuatan dan penyebaran, termasuk sumber daya Azure yang Anda buat. Jika Anda melewatkan pemberitahuan, pilih ikon bel di sudut kanan bawah untuk melihatnya lagi.

   

Menjalankan fungsi di Azure

1. Tekan F1 untuk menampilkan palet perintah, lalu cari dan jalankan perintah Azure Functions:Execute Function Now.... Jika diminta, pilih langganan Anda.

2. Pilih sumber daya aplikasi fungsi baru Anda dan HttpExample sebagai fungsi Anda.

3. Di Masukkan jenis { "name": "Azure" }isi permintaan , lalu tekan Enter untuk mengirim pesan permintaan ini ke fungsi Anda.

4. Saat fungsi dijalankan di Azure, respons ditampilkan di area pemberitahuan. Perluas pemberitahuan untuk meninjau respons penuh.

Mengubah kode dan sebarkan ulang ke Azure

1. Di Visual Studio Code dalam tampilan Explorer, pilih file ./HttpExample/index.js.

2. Ganti file dengan kode berikut untuk membuat objek JSON dan mengembalikannya.

   module.exports = async function (context, req) {
   
       try {
           context.log('JavaScript HTTP trigger function processed a request.');
   
           // Read incoming data
           const name = (req.query.name || (req.body && req.body.name));
           const sport = (req.query.sport || (req.body && req.body.sport));
   
           // fail if incoming data is required
           if (!name || !sport) {
   
               context.res = {
                   status: 400
               };
               return;
           }
   
           // Add or change code here
           const message = `${name} likes ${sport}`;
   
           // Construct response
           const responseJSON = {
               "name": name,
               "sport": sport,
               "message": message,
               "success": true
           }
   
           context.res = {
               // status: 200, /* Defaults to 200 */
               body: responseJSON,
               contentType: 'application/json'
           };
       } catch(err) {
           context.res = {
               status: 500
           };
       }
   }
   

3. Jalankan ulang aplikasi fungsi secara lokal.

4. Di permintaan Masukkan isi permintaan, ubah isi pesan permintaan menjadi { "name": "Tom","sport":"basketball" }. Tekan Masukkan untuk mengirim pesan permintaan ini ke fungsi Anda.

5. Lihat respons di pemberitahuan:

   {
     "name": "Tom",
     "sport": "basketball",
     "message": "Tom likes basketball",
     "success": true
   }
   

6. Menyebarkan ulang fungsi ke Azure.

Pemecahan Masalah

Gunakan tabel berikut untuk mengatasi masalah paling umum yang dihadapi saat menggunakan mulai cepat ini.

Masalah	Solusi
Tidak dapat membuat proyek fungsi?	Pastikan Anda telah memasang ekstensi Azure Functions.
Tidak dapat menjalankan fungsi secara lokal?	Pastikan Anda memiliki versi terbaru Azure Functions Core Tools yang terinstal . Saat menjalankan fungsi di Windows, pastikan bahwa shell terminal default untuk Visual Studio Code tidak diatur ke WSL Bash.
Tidak dapat menyebarkan fungsi ke Azure?	Tinjau Output untuk informasi kesalahan. Ikon bel di sudut kanan bawah adalah cara lain untuk melihat output. Apakah Anda menerbitkan ke aplikasi fungsi yang sudah ada? Tindakan itu menimpa konten aplikasi tersebut di Azure.
Tidak dapat menjalankan aplikasi fungsi berbasis cloud?	Ingatlah untuk menggunakan untai (karakter) kueri untuk mengirim parameter.

Membersihkan sumber daya

Saat melanjutkan ke langkah berikutnya dan menambahkan antrean Azure Storage yang mengikat ke fungsi, Anda harus menyimpan semua sumber daya untuk membangun apa yang telah Anda lakukan.

Jika tidak, Anda dapat menggunakan langkah-langkah berikut untuk menghapus aplikasi fungsi dan sumber daya terkait untuk menghindari timbulnya biaya lebih lanjut.

1. Di Visual Studio Code, pilih ikon Azure untuk membuka Azure explorer.
2. Di bagian Grup Sumber Daya, temukan grup sumber daya Anda.
3. Klik kanan grup sumber daya dan pilih Hapus.

Untuk mempelajari selengkapnya tentang biaya Azure Functions, lihat Memperkirakan biaya rencana Konsumsi.

Langkah berikutnya

Anda telah menggunakan Visual Studio Code untuk membuat aplikasi fungsi dengan fungsi sederhana yang dipicu HTTP. Di artikel berikutnya, perluas fungsi tersebut dengan menyambungkan ke Azure Cosmos DB atau Azure Storage. Untuk mempelajari selengkapnya tentang menyambungkan ke layanan Azure lainnya, lihat Menambahkan pengikatan ke fungsi yang sudah ada di Azure Functions. Jika Anda ingin mempelajari selengkapnya tentang keamanan, lihat Mengamankan Azure Functions.

Menyambungkan ke Azure Cosmos DB

Menyambungkan ke Azure Queue Storage

Anda telah menggunakan Visual Studio Code untuk membuat aplikasi fungsi dengan fungsi sederhana yang dipicu HTTP.

Pelajari selengkapnya tentang fungsi JavaScript