Bagikan melalui

Tutorial: Menyebarkan aplikasi web Node.js + MongoDB ke Azure

  • Artikel

Azure App Service menyediakan layanan hosting web yang sangat dapat diskalakan dan melakukan patch mandiri menggunakan sistem operasi Linux. Tutorial ini menunjukkan cara membuat aplikasi Node.js aman di Azure App Service yang tersambung ke database Azure Cosmos DB for MongoDB . Setelah selesai, Anda akan memiliki aplikasi Express.js yang berjalan di Azure App Service di Linux.

Cuplikan layar aplikasi Node.js menyimpan data di Cosmos DB.

Dalam tutorial ini, Anda akan mempelajari cara:

  • Buat arsitektur aman secara default untuk Azure App Service dan Azure Cosmos DB dengan MongoDB API.
  • Amankan rahasia koneksi menggunakan identitas terkelola dan referensi Key Vault.
  • Sebarkan aplikasi sampel Node.js ke App Service dari repositori GitHub.
  • Mempercepat pengaturan aplikasi App Service dalam kode aplikasi.
  • Buat pembaruan dan sebarkan ulang kode aplikasi.
  • Streaming log diagnostik dari App Service.
  • Kelola aplikasi di portal Azure.
  • Provisikan arsitektur dan penyebaran yang sama dengan menggunakan Azure Developer CLI.
  • Optimalkan alur kerja pengembangan Anda dengan GitHub Codespaces dan GitHub Copilot.

Prasyarat

  • Akun Azure dengan langganan aktif. Jika Anda tidak memiliki akun Azure, Anda dapat membuat akun secara gratis.
  • Azure Developer CLI terinstal. Anda dapat mengikuti langkah-langkah dengan Azure Cloud Shell karena sudah menginstal Azure Developer CLI.
  • Pengetahuan tentang pengembangan Express.js.
  • (Opsional) Untuk mencoba GitHub Copilot, akun GitHub Copilot. Uji coba gratis 30 hari tersedia.

Lewati ke akhir

Anda dapat dengan cepat menyebarkan aplikasi sampel dalam tutorial ini dan melihatnya berjalan di Azure. Cukup jalankan perintah berikut di Azure Cloud Shell, dan ikuti perintahnya:

mkdir msdocs-nodejs-mongodb-azure-sample-app
cd msdocs-nodejs-mongodb-azure-sample-app
azd init --template msdocs-nodejs-mongodb-azure-sample-app
azd up

1. Jalankan sampel

Pertama, Anda menyiapkan contoh aplikasi berbasis data sebagai titik awal. Untuk kenyamanan Anda, repositori sampel, mencakup konfigurasi kontainer pengembangan. Kontainer dev memiliki semua yang Anda butuhkan untuk mengembangkan aplikasi, termasuk database, cache, dan semua variabel lingkungan yang diperlukan oleh aplikasi sampel. Kontainer dev dapat berjalan di codespace GitHub, yang berarti Anda dapat menjalankan sampel di komputer apa pun dengan browser web.

Langkah 1: Di jendela browser baru:

  1. Masuk ke akun GitHub Anda.
  2. Buka https://github.com/Azure-Samples/msdocs-nodejs-mongodb-azure-sample-app/fork.
  3. Batal pilih Salin cabang utama saja. Anda ingin semua cabang.
  4. Pilih Buat fork.

Cuplikan layar yang menampilkan cara membuat fork repositori GitHub sampel.

Langkah 2: Di fork GitHub:

  1. Pilih starter-no-infra utama>untuk cabang starter. Cabang ini hanya berisi proyek sampel dan tidak ada file atau konfigurasi terkait Azure.
  2. Pilih Kode>Buat codespace pada starter-no-infra. Codespace membutuhkan waktu beberapa menit untuk disiapkan.

Cuplikan layar memperlihatkan cara membuat codespace di GitHub.

Langkah 3: Di terminal codespace:

  1. Jalankan npm install && npm start.
  2. Saat Anda melihat pemberitahuan Your application running on port 3000 is available., pilih Buka di Browser. Anda akan melihat aplikasi sampel di tab browser baru. Untuk menghentikan aplikasi Express.js, ketik Ctrl+C.

Cuplikan layar yang menunjukkan cara menjalankan aplikasi sampel di dalam ruang kode GitHub.

Tip

Anda dapat bertanya kepada GitHub Copilot tentang repositori ini. Contohnya:

  • @workspace Apa yang dilakukan proyek ini?
  • @workspace Apa yang dilakukan folder .devcontainer?

Mengalami masalah? Periksa bagian Pemecahan Masalah.

2. Buat App Service dan Azure Cosmos DB

Dalam langkah ini, Anda membuat sumber daya Azure. Langkah-langkah yang digunakan dalam tutorial ini membuat sekumpulan sumber daya aman secara default yang mencakup App Service dan Azure Cosmos DB untuk MongoDB. Untuk proses pembuatan, Anda akan menentukan:

  • Nama untuk aplikasi web. Ini digunakan sebagai bagian dari nama DNS untuk aplikasi Anda dalam bentuk https://<app-name>-<hash>.<region>.azurewebsites.net.
  • Wilayah tempat menjalankan aplikasi secara fisik di dunia. Ini juga digunakan sebagai bagian dari nama DNS untuk aplikasi Anda.
  • Tumpukan runtime untuk aplikasi. Di situlah Anda memilih versi Node yang digunakan untuk aplikasi Anda.
  • Paket hosting untuk aplikasi. Ini adalah tingkat harga yang mencakup serangkaian fitur dan kapasitas penskalaan untuk aplikasi Anda.
  • Resource Group untuk aplikasi. Grup sumber daya memungkinkan Anda mengelompokkan (dalam kontainer logika) semua sumber daya Azure yang diperlukan untuk aplikasi.

Masuk ke portal Microsoft Azure dan ikuti langkah-langkah ini untuk membuat sumber daya Azure App Service Anda.

Langkah 1: Di portal Azure:

  1. Masukkan "database apl web" di bilah pencarian di bagian atas portal Azure.
  2. Pilih item berlabel Apl Web + Database di bawah judul Marketplace. Anda juga dapat menavigasi ke wizard pembuatan secara langsung.

Cuplikan layar yang menunjukkan cara menggunakan kotak pencarian di bilah alat atas untuk menemukan wizard pembuatan Apl Web + Database.

Langkah 2: Di halaman Buat Aplikasi Web + Database , isi formulir sebagai berikut.

  1. Grup Sumber Daya: Pilih Buat baru dan gunakan nama msdocs-expressjs-mongodb-tutorial.
  2. Wilayah: Wilayah Azure apa pun di dekat Anda.
  3. Nama: msdocs-expressjs-mongodb-XYZ, di mana XYZ adalah tiga karakter acak.
  4. Tumpukan runtime: Node 20 LTS.
  5. Mesin: Cosmos DB API untuk MongoDB. Azure Cosmos DB adalah database cloud native yang menawarkan API yang 100% kompatibel dengan MongoDB. Perhatikan nama database yang dihasilkan untuk Anda (<app-name>-database). Anda akan membutuhkannya nanti.
  6. Paket hosting: Dasar. Setelah siap, Anda dapat meningkatkan skala ke tingkat harga produksi.
  7. Pilih Tinjau + buat.
  8. Setelah validasi selesai, pilih Buat.

Cuplikan layar yang menampilkan cara mengonfigurasi apl dan database baru di wizard Apl Web + Database.

Langkah 3: Penyebaran membutuhkan waktu beberapa menit untuk diselesaikan. Setelah penyebaran selesai, pilih tombol Buka sumber daya. Anda diarahkan ke aplikasi App Service, tetapi sumber daya berikut dibuat:

  • Grup sumber daya → Kontainer untuk semua sumber daya yang dibuat.
  • App Service → Menentukan sumber daya komputasi untuk App Service. Paket Linux di tingkat Dasar dibuat.
  • App Service → Mewakili aplikasi Anda dan berjalan dalam paket App Service.
  • Jaringan virtual → Terintegrasi dengan aplikasi App Service dan mengisolasi lalu lintas jaringan back-end.
  • Titik akhir privat → Titik akhir akses untuk sumber daya database di jaringan virtual.
  • Antarmuka jaringan → Mewakili alamat IP privat untuk titik akhir privat.
  • Azure Cosmos DB for MongoDB → Hanya dapat diakses dari belakang titik akhir privat. Database dan pengguna dibuat untuk Anda di server.
  • Zona DNS privat → Memungkinkan resolusi DNS server Azure Cosmos DB di jaringan virtual.

Cuplikan layar menunjukkan proses penyebaran selesai.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

3. Amankan rahasia koneksi

Wizard pembuatan menghasilkan string konektivitas untuk Anda sebagai pengaturan aplikasi. Namun, praktik terbaik keamanan adalah menjaga rahasia dari App Service sepenuhnya. Anda akan memindahkan rahasia ke brankas kunci dan mengubah pengaturan aplikasi ke referensi Key Vault dengan bantuan Konektor Layanan.

Langkah 1: Di halaman App Service:

  1. Di menu sebelah kiri, pilih Pengaturan > Variabel lingkungan.
  2. Di samping AZURE_COSMOS_CONNECTIONSTRING, pilih Perlihatkan nilai. String koneksi ini memungkinkan Anda terhubung ke database Cosmos DB yang diamankan di belakang titik akhir privat. Namun, rahasia disimpan langsung di aplikasi App Service, yang bukan yang terbaik. Anda akan mengubah ini.

Cuplikan layar memperlihatkan cara melihat nilai pengaturan aplikasi.

Langkah 2: Buat brankas kunci untuk manajemen rahasia yang aman.

  1. Di bilah pencarian atas, ketik "brankas kunci", lalu pilih Marketplace>Key Vault.
  2. Di Grup Sumber Daya, pilih msdocs-expressjs-mongodb-tutorial.
  3. Di Nama brankas kunci, ketik nama yang hanya terdiri dari huruf dan angka.
  4. Di Wilayah, atur ke lokasi sampel sebagai grup sumber daya.

Cuplikan layar yang menunjukkan cara membuat brankas kunci.

Langkah 3:

  1. Pilih tab Jaringan.
  2. Batal pilih Aktifkan akses publik.
  3. Pilih Buat titik akhir privat.
  4. Di Grup Sumber Daya, pilih msdocs-expressjs-mongodb-tutorial.
  5. Di Nama brankas kunci, ketik nama yang hanya terdiri dari huruf dan angka.
  6. Di Wilayah, atur ke lokasi sampel sebagai grup sumber daya.
  7. Dalam dialog, di Lokasi, pilih lokasi yang sama dengan aplikasi App Service Anda.
  8. Di Grup Sumber Daya, pilih msdocs-expressjs-mongodb-tutorial.
  9. Di Nama, ketik msdocs-expressjs-mongodb-XYZVaultEndpoint.
  10. Di Jaringan virtual, pilih msdocs-expressjs-mongodb-XYZVnet.
  11. Di Subnet, msdocs-expressjs-mongodb-XYZSubnet.
  12. Pilih OK.
  13. Pilih Tinjau + buat, lalu pilih Buat. Tunggu hingga penyebaran brankas kunci selesai. Anda akan melihat "Penyebaran Anda selesai."

Cuplikan layar memperlihatkan cara mengamankan brankas kunci dengan titik akhir privat.

Langkah 4:

  1. Di bilah pencarian atas, ketik msdocs-expressjs-mongodb, lalu sumber daya App Service yang disebut msdocs-expressjs-mongodb-XYZ.
  2. Di halaman App Service, di menu sebelah kiri, pilih Pengaturan > Konektor Layanan. Sudah ada konektor, yang dibuat wizard pembuatan aplikasi untuk Anda.
  3. Pilih kotak centang di samping konektor, lalu pilih Edit.
  4. Di tab Dasar , atur Jenis klien ke Node.js.
  5. Pilih tab Autentikasi .
  6. Pilih Simpan Rahasia di Key Vault.
  7. Di bawah Koneksi Key Vault, pilih Buat baru. Dialog Buat koneksi dibuka di atas dialog edit.

Cuplikan layar memperlihatkan cara mengedit konektor layanan dengan koneksi brankas kunci.

Langkah 5: Dalam dialog Buat koneksi untuk koneksi Key Vault:

  1. Di Key Vault, pilih brankas kunci yang Anda buat sebelumnya.
  2. Pilih Tinjau + Buat. Anda akan melihat bahwa Identitas terkelola yang ditetapkan sistem diatur ke Dipilih.
  3. Saat validasi selesai, pilih Buat.

Cuplikan layar yang menunjukkan cara mengonfigurasi konektor layanan brankas kunci.

Langkah 6: Anda kembali ke dialog edit untuk defaultConnector.

  1. Di tab Autentikasi , tunggu konektor brankas kunci dibuat. Setelah selesai, dropdown Koneksi Key Vault secara otomatis memilihnya.
  2. Pilih Next: Networking.
  3. Pilih Konfigurasikan aturan firewall untuk mengaktifkan akses ke layanan target. Jika Anda melihat pesan, "Tidak Ada Titik Akhir Privat pada layanan target," abaikan. Wizard pembuatan aplikasi sudah mengamankan database Cosmos DB dengan titik akhir privat.
  4. Pilih Simpan. Tunggu hingga pemberitahuan Pembaruan berhasil muncul.

Cuplikan layar memperlihatkan koneksi brankas kunci yang dipilih di defaultConnector.

Langkah 7: Untuk memverifikasi perubahan Anda:

  1. Dari menu sebelah kiri, pilih Variabel lingkungan lagi.
  2. Di samping pengaturan aplikasi AZURE_COSMOS_CONNECTIONSTRING, pilih Perlihatkan nilai. Nilainya harus @Microsoft.KeyVault(...), yang berarti bahwa itu adalah referensi brankas kunci karena rahasia sekarang dikelola dalam brankas kunci.

Cuplikan layar memperlihatkan cara melihat nilai variabel lingkungan App Service di Azure.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

4. Menyebarkan kode sampel

Dalam langkah ini, Anda mengonfigurasi penyebaran GitHub menggunakan GitHub Actions. Ini hanya salah satu dari banyak cara untuk menyebarkan ke App Service, tetapi juga cara yang bagus untuk memiliki integrasi berkelanjutan dalam proses penyebaran Anda. Secara default, setiap git push repositori GitHub Anda memulai tindakan build dan deploy.

Langkah 1: Di menu sebelah kiri, pilih Pusat Penyebaran>.

Cuplikan layar yang menampilkan cara membuka pusat penyebaran di App Service.

Langkah 2: Di halaman Pusat Penyebaran:

  1. Di Sumber, pilih GitHub. Secara default, GitHub Actions dipilih sebagai penyedia build.
  2. Masuk ke akun GitHub Anda dan ikuti perintah untuk mengotorisasi Azure.
  3. Di Organisasi, pilih akun Anda.
  4. Di Repositori, pilih msdocs-nodejs-mongodb-azure-sample-app.
  5. Di Cabang, pilih starter-no-infra. Ini adalah cabang yang sama dengan tempat Anda bekerja dengan aplikasi sampel Anda, tanpa file atau konfigurasi terkait Azure.
  6. Untuk Jenis autentikasi, pilih Identitas yang ditetapkan pengguna.
  7. Di menu atas, pilih Simpan. App Service menerapkan file alur kerja ke dalam repositori GitHub yang dipilih, di direktori .github/workflows. Secara default, pusat penyebaran membuat identitas yang ditetapkan pengguna untuk alur kerja guna mengautentikasi menggunakan Microsoft Entra (autentikasi OIDC). Untuk opsi autentikasi alternatif, lihat Menyebarkan ke App Service menggunakan GitHub Actions.

Cuplikan layar menampilkan cara mengonfigurasi CI/CD menggunakan GitHub Actions.

Langkah 3: Kembali ke ruang kode GitHub dari fork sampel Anda, jalankan git pull origin starter-no-infra. Ini menarik file alur kerja yang baru diterapkan ke ruang kode Anda.

Cuplikan layar memperlihatkan git pull di dalam codespace GitHub.

Langkah 4 (Opsi 1: dengan GitHub Copilot):

  1. Mulai sesi obrolan baru dengan memilih tampilan Obrolan , lalu pilih +.
  2. Tanyakan, "@workspace Bagaimana aplikasi tersambung ke database?" Copilot mungkin mengarahkan Anda ke file app.js dan mongoose.connect panggilan.
  3. Katakanlah, "*Saya memiliki variabel string koneksi di Azure yang disebut AZURE_COSMOS_CONNECTIONSTRING.". Copilot mungkin memberi Anda saran kode yang mirip dengan yang ada di langkah-langkah Opsi 2: tanpa GitHub Copilot di bawah ini dan bahkan memberi tahu Anda untuk membuat perubahan dalam app.js.
  4. Buka app.js di penjelajah dan tambahkan saran kode dalam getApp metode . GitHub Copilot tidak memberi Anda respons yang sama setiap kali, Anda mungkin perlu mengajukan lebih banyak pertanyaan untuk menyempurnakan responsnya. Untuk tips, lihat Apa yang bisa saya lakukan dengan GitHub Copilot di codespace saya?.

Cuplikan layar yang menunjukkan cara mengajukan pertanyaan dalam sesi obrolan GitHub Copilot baru.

Langkah 4 (Opsi 2: tanpa GitHub Copilot):

  1. Dari penjelajah, buka app.js.
  2. Temukan baris tempat mongoose.connect dipanggil (Baris 16) dan ubah process.env.MONGODB_URI ke process.env.AZURE_COSMOS_CONNECTIONSTRING || process.env.MONGODB_URI.

Cuplikan layar memperlihatkan ruang kode GitHub dan app.js dibuka.

Langkah 5:

  1. Pilih ekstensi Kontrol Sumber.
  2. Di kotak teks, ketik pesan penerapan seperti Update environment variable. Atau, pilih dan biarkan GitHub Copilot menghasilkan pesan penerapan untuk Anda.
  3. Pilih Terapkan, lalu konfirmasi dengan Ya.
  4. Pilih Sinkronkan perubahan 1, lalu konfirmasi dengan OK.

Cuplikan layar memperlihatkan perubahan yang diterapkan dan didorong ke GitHub.

Langkah 6: Kembali ke halaman Pusat Penyebaran di portal Azure:

  1. Di bawah tab Log , pilih Refresh. Eksekusi penyebaran baru sudah dimulai dari perubahan yang Anda lakukan.
  2. Di item log untuk eksekusi penyebaran, pilih entri Bangun/Sebarkan Log dengan tanda waktu terbaru.

Cuplikan layar memperlihatkan penyebaran yang berhasil di halaman Log pusat penyebaran.

Langkah 7: Anda dibawa ke repositori GitHub Anda dan melihat bahwa tindakan GitHub sedang berjalan. File alur kerja menentukan dua tahap terpisah, mem-build dan menyebarkan. Tunggu hingga eksekusi GitHub menampilkan status Selesai.

Cuplikan layar memperlihatkan eksekusi GitHub yang berhasil.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

5. Telusuri aplikasi

Langkah 1: Di halaman App Service:

  1. Dari menu kiri, pilih Ringkasan.
  2. Pilih URL aplikasi Anda. Anda juga dapat menavigasi langsung ke https://<app-name>.azurewebsites.net.

Cuplikan layar yang menampilkan cara meluncurkan App Service dari portal Azure.

Langkah 2: Tambahkan beberapa tugas ke daftar. Selamat, Anda menjalankan aplikasi Node.js berbasis data di Azure App Service.

Cuplikan layar aplikasi Express.js yang berjalan di App Service.

6. Mengalirkan log diagnostik

Azure App Service menangkap semua pesan yang masuk ke konsol untuk membantu Anda mendiagnosis masalah dengan aplikasi Anda. Aplikasi sampel mengeluarkan pesan log konsol dalam setiap titik akhirnya untuk menunjukkan kemampuan ini. Misalnya, get titik akhir mengeluarkan pesan tentang jumlah tugas yang diambil dari database dan pesan kesalahan muncul jika terjadi kesalahan.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Langkah 1: Di halaman App Service:

  1. Dari menu kiri, pilih Log App Service.
  2. Di Pengelogan aplikasi, pilih Sistem File.
  3. Di menu atas, pilih Simpan.

Cuplikan layar yang menampilkan cara mengaktifkan log asli di App Service di portal Azure.

Langkah 2: Dari menu sebelah kiri, pilih Aliran log. Anda melihat log untuk aplikasi Anda, termasuk log platform dan log dari dalam kontainer.

Cuplikan layar yang menampilkan cara melihat aliran log di porta Azure.

7. Periksa file yang disebarkan menggunakan Kudu

Azure App Service menyediakan konsol diagnostik berbasis web bernama Kudu yang memungkinkan Anda memeriksa lingkungan hosting server untuk aplikasi web Anda. Menggunakan Kudu, Anda dapat melihat file yang disebarkan ke Azure, meninjau riwayat penyebaran aplikasi, dan bahkan membuka sesi SSH ke lingkungan hosting.

Langkah 1: Di halaman App Service:

  1. Dari menu kiri, pilih Alat Tingkat Lanjut.
  2. Pilih Buka. Anda juga dapat menavigasi langsung ke https://<app-name>.scm.azurewebsites.net.

Cuplikan layar menunjukkan cara membuka halaman App Service Kudu.

Langkah 2: Di halaman Kudu, pilih Penyebaran.

Cuplikan layar halaman utama di aplikasi Kudu SCM yang menunjukkan beragam informasi tentang lingkungan hosting.

Jika Anda menyebarkan kode ke App Service menggunakan Git atau penyebaran zip, Anda akan melihat riwayat penyebaran aplikasi web Anda.

Cuplikan layar menunjukkan riwayat penyebaran aplikasi App Service dalam format JSON.

Langkah 3: Kembali ke beranda Kudu dan pilih Situs wwwroot.

Cuplikan layar menunjukkan situs wwwroot dipilih.

Anda dapat melihat struktur folder yang disebarkan dan memilih untuk menelusuri dan melihat file.

Cuplikan layar file yang disebarkan di direktori wwwroot.

8. Membersihkan sumber daya

Setelah selesai, Anda dapat menghapus semua sumber daya dari langganan Azure dengan menghapus grup sumber daya.

Langkah 1: Di bilah pencarian di bagian atas portal Azure:

  1. Masukkan nama grup sumber daya.
  2. Pilih grup sumber daya.

Cuplikan layar yang menunjukkan cara mencari dan menavigasi ke grup sumber daya di portal Azure.

Langkah 2: Di halaman grup sumber daya, pilih Hapus grup sumber daya.

Cuplikan layar yang menunjukkan letak tombol Hapus Grup Sumber Daya di portal Azure.

Langkah 3:

  1. Masukkan nama grup sumber daya untuk mengonfirmasi penghapusan Anda.
  2. Pilih Hapus.

Cuplikan layar dialog konfirmasi untuk menghapus grup sumber daya di portal Azure. :

2. Buat sumber daya Azure dan sebarkan aplikasi sampel

Dalam langkah ini, Anda membuat sumber daya Azure dan menyebarkan aplikasi sampel ke App Service di Linux. Langkah-langkah yang digunakan dalam tutorial ini membuat sekumpulan sumber daya aman secara default yang mencakup App Service dan Azure Cosmos DB.

Kontainer pengembangan sudah memiliki Azure Developer CLI (AZD).

  1. Dari akar repositori, jalankan azd init.

    azd init --template nodejs-app-service-cosmos-redis-infra

  2. Saat diminta, berikan jawaban berikut:

    Pertanyaan Jawaban
    Direktori saat ini tidak kosong. Apakah Anda ingin menginisialisasi proyek di sini di '<your-directory>'? Y
    Apa yang ingin Anda lakukan dengan file-file ini? Jaga agar file saya yang ada tidak berubah
    Masukkan nama lingkungan baru Ketik nama unik. Templat AZD menggunakan nama ini sebagai bagian dari nama DNS aplikasi web Anda di Azure (<app-name>-<hash>.azurewebsites.net). Karakter alfanumerik dan tanda hubung diperbolehkan.

  3. Masuk ke Azure dengan menjalankan azd auth login perintah dan ikuti perintah:

    azd auth login

  4. Buat sumber daya Azure yang diperlukan dan sebarkan kode aplikasi dengan azd up perintah . Ikuti perintah untuk memilih langganan dan lokasi yang diinginkan untuk sumber daya Azure.

    azd up

    Perintah azd up membutuhkan waktu sekitar 15 menit untuk diselesaikan (cache Redis membutuhkan waktu paling lama). Ini juga mengkompilasi dan menyebarkan kode aplikasi Anda, tetapi Anda akan memodifikasi kode nanti untuk bekerja dengan App Service. Saat sedang berjalan, perintah menyediakan pesan tentang proses provisi dan penyebaran, termasuk tautan ke penyebaran di Azure. Setelah selesai, perintah juga menampilkan tautan ke aplikasi penyebaran.

    Templat AZD ini berisi file (azure.yaml dan direktori infra ) yang menghasilkan arsitektur aman secara default dengan sumber daya Azure berikut:

    • Grup sumber daya: Kontainer untuk semua sumber daya yang dibuat.
    • Paket App Service: Menentukan sumber daya komputasi untuk App Service. Paket Linux di tingkat B1 dibuat.
    • App Service: Mewakili aplikasi Anda dan berjalan dalam paket App Service.
    • Jaringan virtual: Terintegrasi dengan aplikasi App Service dan mengisolasi lalu lintas jaringan back-end.
    • Akun Azure Cosmos DB dengan MongoDB API: Hanya dapat diakses dari belakang titik akhir privatnya. Database dibuat untuk Anda di server.
    • Azure Cache for Redis: Hanya dapat diakses dari dalam jaringan virtual.
    • Brankas kunci: Hanya dapat diakses dari belakang titik akhir privatnya. Digunakan untuk mengelola rahasia untuk aplikasi App Service.
    • Titik akhir privat: Titik akhir akses untuk brankas kunci, server database, dan cache Redis di jaringan virtual.
    • Zona DNS privat: Aktifkan resolusi DNS database Cosmos DB, cache Redis, dan brankas kunci di jaringan virtual.
    • Ruang kerja Analitik Log: Bertindak sebagai kontainer target untuk aplikasi Anda untuk mengirimkan lognya, di mana Anda juga dapat mengkueri log.

    Setelah perintah selesai membuat sumber daya dan menyebarkan kode aplikasi untuk pertama kalinya, aplikasi sampel yang disebarkan belum berfungsi karena Anda harus membuat perubahan kecil untuk membuatnya terhubung ke database di Azure.

3. Verifikasi string koneksi

Templat AZD yang Anda gunakan menghasilkan variabel konektivitas untuk Anda sudah sebagai pengaturan aplikasi dan mengeluarkannya ke terminal untuk kenyamanan Anda. Pengaturan aplikasi adalah salah satu cara untuk menjaga rahasia koneksi keluar dari repositori kode Anda.

  1. Dalam output AZD, temukan pengaturan AZURE_COSMOS_CONNECTIONSTRINGaplikasi . Hanya nama pengaturan yang ditampilkan. Mereka terlihat seperti ini dalam output AZD:

     App Service app has the following app settings:
         - AZURE_COSMOS_CONNECTIONSTRING
         - AZURE_REDIS_CONNECTIONSTRING
         - AZURE_KEYVAULT_RESOURCEENDPOINT
         - AZURE_KEYVAULT_SCOPE

    AZURE_COSMOS_CONNECTIONSTRINGberisi string koneksi ke database Cosmos DB di Azure. Anda perlu menggunakannya dalam kode Anda nanti.

  2. Demi kenyamanan Anda, templat AZD menunjukkan tautan langsung ke halaman pengaturan aplikasi aplikasi. Temukan tautan dan buka di tab browser baru.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

4. Ubah kode sampel dan sebarkan ulang

  1. Di ruang kode GitHub, mulai sesi obrolan baru dengan mengklik tampilan Obrolan , lalu klik +.

  2. Tanyakan, "@workspace Bagaimana aplikasi tersambung ke database?" Copilot mungkin mengarahkan Anda ke file app.js dan mongoose.connect panggilan.

  3. Katakanlah, "Saya memiliki variabel string koneksi di Azure yang disebut AZURE_COSMOS_CONNECTIONSTRING.". Copilot mungkin memberi Anda saran kode yang mirip dengan yang ada di langkah-langkah Opsi 2: tanpa GitHub Copilot di bawah ini dan bahkan memberi tahu Anda untuk membuat perubahan dalam app.js.

  4. Buka app.js di penjelajah dan tambahkan saran kode dalam getApp metode .

    GitHub Copilot tidak memberi Anda respons yang sama setiap kali, Anda mungkin perlu mengajukan lebih banyak pertanyaan untuk menyempurnakan responsnya. Untuk tips, lihat Apa yang bisa saya lakukan dengan GitHub Copilot di codespace saya?.

  5. Kembali ke terminal codespace, jalankan azd deploy.

    azd deploy

Tip

Anda juga dapat menggunakan azd up selalu, yang melakukan semua azd package, azd provision, dan azd deploy.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

5. Telusuri aplikasi

  1. Di output AZD, temukan URL aplikasi Anda dan navigasikan ke url tersebut di browser. URL terlihat seperti ini dalam output AZD:

     Deploying services (azd deploy)

   (✓) Done: Deploying service web
   - Endpoint: https://<app-name>-<hash>.azurewebsites.net/

  2. Tambahkan beberapa tugas ke dalam daftar.

    Cuplikan layar aplikasi web Express.js dengan Cosmos DB yang berjalan di Azure memperlihatkan tugas.

    Selamat, Anda menjalankan aplikasi web di Azure App Service, dengan konektivitas yang aman ke Azure Cosmos DB.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

6. Mengalirkan log diagnostik

Azure App Service menangkap semua pesan yang masuk ke konsol untuk membantu Anda mendiagnosis masalah dengan aplikasi Anda. Aplikasi sampel mengeluarkan pesan log konsol dalam setiap titik akhirnya untuk menunjukkan kemampuan ini. Misalnya, get titik akhir mengeluarkan pesan tentang jumlah tugas yang diambil dari database dan pesan kesalahan muncul jika terjadi kesalahan.

router.get('/', function(req, res, next) {
  Task.find()
    .then((tasks) => {      
      const currentTasks = tasks.filter(task => !task.completed);
      const completedTasks = tasks.filter(task => task.completed === true);

      console.log(`Total tasks: ${tasks.length}   Current tasks: ${currentTasks.length}    Completed tasks:  ${completedTasks.length}`)
      res.render('index', { currentTasks: currentTasks, completedTasks: completedTasks });
    })
    .catch((err) => {
      console.log(err);
      res.send('Sorry! Something went wrong.');
    });
});

Dalam output AZD, temukan tautan untuk mengalirkan log App Service dan navigasikan ke log tersebut di browser. Tautan terlihat seperti ini dalam output AZD:

Stream App Service logs at: https://portal.azure.com/#@/resource/subscriptions/<subscription-guid>/resourceGroups/<group-name>/providers/Microsoft.Web/sites/<app-name>/logStream

Pelajari selengkapnya tentang pengelogan di aplikasi Java dalam seri di Mengaktifkan Azure Monitor OpenTelemetry untuk aplikasi .NET, Node.js, Python, dan Java.

Mengalami masalah? Periksa bagian Pemecahan Masalah.

7. Membersihkan sumber daya

Untuk menghapus semua sumber daya Azure di lingkungan penyebaran saat ini, jalankan azd down dan ikuti perintahnya.

azd down

Pemecahan Masalah

Tampilan penyebaran portal untuk Azure Cosmos DB menunjukkan status Konflik

Bergantung pada langganan dan wilayah yang Anda pilih, Anda mungkin melihat status penyebaran untuk Azure Cosmos DB menjadi Conflict, dengan pesan berikut dalam detail Operasi:

Sorry, we are currently experiencing high demand in <region> region, and cannot fulfill your request at this time.

Kesalahan kemungkinan besar disebabkan oleh batas langganan Anda untuk wilayah yang Anda pilih. Coba pilih wilayah yang berbeda untuk penyebaran Anda.

Halaman browser aplikasi yang disebarkan mengatakan "Terjadi kesalahan."

Anda mungkin masih perlu membuat perubahan string koneksi dalam kode aplikasi Anda. Lihat 4. Menyebarkan kode sampel.

Tanya jawab umum

Berapa biaya untuk penyiapan ini?

Harga untuk sumber daya yang dibuat adalah sebagai berikut:

  • Paket App Service dibuat di tingkat Dasar dan dapat ditingkatkan atau diturunkan. Lihat Harga App Service.
  • Server Azure Cosmos DB dibuat dalam satu wilayah dan dapat didistribusikan ke wilayah lain. Lihat Harga Azure Cosmos DB.
  • Jaringan virtual tidak dikenakan biaya kecuali Anda mengonfigurasi fungsionalitas tambahan, seperti peering. Lihat Harga Azure Virtual Network.
  • Zona DNS privat dikenakan biaya kecil. Lihat Harga Azure DNS.

Bagaimana cara menyambungkan ke server Azure Cosmos DB yang diamankan di belakang jaringan virtual dengan alat lain?

  • Untuk akses dasar dari alat baris perintah, Anda dapat menjalankan mongosh dari terminal SSH aplikasi. Kontainer aplikasi tidak disertakan dengan mongosh, jadi Anda harus menginstalnya secara manual. Ingat bahwa klien yang diinstal tidak bertahan di seluruh mulai ulang aplikasi.
  • Untuk terhubung dari klien GUI MongoDB, komputer Anda harus berada dalam jaringan virtual. Misalnya, itu bisa berupa Azure VM yang terhubung ke salah satu subnet, atau komputer di jaringan lokal yang memiliki koneksi VPN situs-ke-situs dengan jaringan virtual Azure.
  • Untuk menyambungkan dari shell MongoDB dari halaman manajemen Azure Cosmos DB di portal, komputer Anda juga harus berada dalam jaringan virtual. Anda dapat membuka firewall server Azure Cosmos DB untuk alamat IP komputer lokal Anda, tetapi meningkatkan permukaan serangan untuk konfigurasi Anda.

Bagaimana cara kerja pengembangan aplikasi lokal dengan GitHub Actions?

Ambil file alur kerja yang dibuat secara otomatis dari App Service sebagai contoh, masing-masing git push memulai eksekusi build dan penyebaran baru. Dari klon lokal repositori GitHub, Anda membuat pembaruan yang diinginkan mendorongnya ke GitHub. Contohnya:

git add .
git commit -m "<some-message>"
git push origin main

Mengapa penyebaran GitHub Actions begitu lambat?

File alur kerja yang dibuat secara otomatis dari App Service mendefinisikan eksekusi dua pekerjaan, build-then-deploy. Karena setiap pekerjaan berjalan di lingkungannya sendiri yang bersih, file alur kerja memastikan bahwa pekerjaan deploy memiliki akses ke file dari pekerjaan build:

Sebagian besar waktu yang dibutuhkan oleh proses dua pekerjaan dihabiskan untuk mengunggah dan mengunduh artefak. Jika mau, Anda dapat menyederhanakan file alur kerja dengan menggabungkan dua pekerjaan menjadi satu, yang menghilangkan kebutuhan untuk langkah-langkah pengunggahan dan pengunduhan.

Saya tidak memiliki izin untuk membuat identitas yang ditetapkan pengguna

Lihat Menyiapkan penyebaran GitHub Actions dari Pusat Penyebaran.

Apa yang dapat saya lakukan dengan GitHub Copilot di codespace saya?

Anda mungkin melihat bahwa tampilan obrolan GitHub Copilot sudah ada untuk Anda saat membuat codespace. Untuk kenyamanan Anda, kami menyertakan ekstensi obrolan GitHub Copilot dalam definisi kontainer (lihat .devcontainer/devcontainer.json). Namun, Anda memerlukan akun GitHub Copilot (uji coba gratis 30 hari tersedia).

Beberapa tips untuk Anda ketika Anda berbicara dengan GitHub Copilot:

  • Dalam satu sesi obrolan, pertanyaan dan jawaban dibangun satu sama lain dan Anda dapat menyesuaikan pertanyaan Anda untuk menyempurnakan jawaban yang Anda dapatkan.
  • Secara default, GitHub Copilot tidak memiliki akses ke file apa pun di repositori Anda. Untuk mengajukan pertanyaan tentang file, buka file di editor terlebih dahulu.
  • Untuk membiarkan GitHub Copilot memiliki akses ke semua file di repositori saat menyiapkan jawabannya, mulai pertanyaan Anda dengan @workspace. Untuk informasi selengkapnya, lihat Use the @workspace agent .
  • Dalam sesi obrolan, GitHub Copilot dapat menyarankan perubahan dan (dengan @workspace) bahkan tempat untuk membuat perubahan, tetapi tidak diizinkan untuk membuat perubahan untuk Anda. Terserah Anda untuk menambahkan perubahan yang disarankan dan mengujinya.

Berikut adalah beberapa hal lain yang dapat Anda katakan untuk menyempurnakan jawaban yang Anda dapatkan:

  • @workspace Di mana MONGODB_URI ditentukan?
  • File mana yang saya buat perubahannya?
  • Apakah perubahan ini akan merusak aplikasi saya saat berjalan secara lokal?

Langkah berikutnya

JavaScript di pusat pengembang Azure

Konfigurasikan aplikasi Node.js di App Service

 Amankan dengan domain dan sertifikat kustom