Menyebarkan aplikasi web Node.js di Azure

Dalam panduan cepat ini, Anda mempelajari cara membuat dan mendistribusikan aplikasi web Node.js (Express) pertama Anda ke Azure App Service. App Service mendukung berbagai versi Node.js di Linux dan Windows.

Langkah Azure CLI dalam quickstart ini menggunakan Premium v3 tier berbayar. Langkah-langkah di Visual Studio Code dan portal Azure menunjukkan cara menggunakan Free tier.

Video ini memperlihatkan kepada Anda cara menyebarkan aplikasi web Node.js di Azure.

Langkah-langkah dalam video juga dijelaskan di bagian berikut.

Menyiapkan lingkungan awal Anda

• Memiliki akun Azure dengan langganan aktif. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
• Instal Node.js LTS. Jalankan perintah node --version untuk memverifikasi bahwa Node.js dipasang.
• Instal Visual Studio Code.
• Instal ekstensi Azure App Service untuk Visual Studio Code.

• Memiliki akun Azure dengan langganan aktif. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
• Instal Node.js LTS. Jalankan perintah node --version untuk memverifikasi bahwa Node.js dipasang.
• Instal Azure CLI, yang dapat Anda gunakan untuk menjalankan perintah di shell untuk membuat dan mengonfigurasi sumber daya Azure.

• Memiliki akun Azure dengan langganan aktif. Jika Anda tidak memilikinya, Anda dapat membuatnya secara gratis.
• Instal Node.js LTS. Jalankan perintah node --version untuk memverifikasi bahwa Node.js dipasang.
• Memiliki klien FTP, seperti FileZilla, untuk mentransfer file ke App Service.

Membuat aplikasi Node.js Anda

Pada langkah ini, Anda membuat aplikasi Node.js dasar dan memastikannya berjalan di komputer Anda.

Tips

Jika Anda sudah menyelesaikan tutorialNode.js, Anda dapat melompat ke Sebarkan ke Azure.

1. Buat aplikasi Node.js dengan menggunakan generator aplikasi ekspres, yang diinstal secara default dengan Node.js dan npm.

   npx express-generator myExpressApp --view ejs
   

   Jika ini pertama kalinya Anda menginstal generator, npx meminta Anda untuk menyetujui penginstalan.

2. Ubah ke direktori aplikasi dan instal paket npm.

   cd myExpressApp && npm install
   

3. Perbarui dependensi ke versi yang paling aman.

   npm audit fix --force
   

4. Mulai server pengembangan dengan informasi debug.

   DEBUG=myexpressapp:* npm start
   

5. Di browser, navigasikan ke http://localhost:3000. Anda seharusnya melihat sesuatu seperti berikut:

   

Saya mengalami masalah

Sebarkan ke Azure

Sebelum melanjutkan, pastikan Anda telah memasang dan mengonfigurasi semua prasyarat.

Catatan

Agar aplikasi Node.js Anda berjalan di Azure, aplikasi perlu mendengarkan port yang disediakan oleh variabel lingkungan PORT. Dalam aplikasi Express yang Anda buat, variabel lingkungan ini sudah digunakan dalam skrip startup bin/www. (Cari process.env.PORT.)

Masuk ke Azure

1. Di terminal, pastikan Anda berada di direktori myExpressApp , lalu mulai Visual Studio Code dengan perintah berikut:

   code .
   

2. Di Visual Studio Code, di Bilah Aktivitas, pilih logo Azure.

3. Pastikan Anda masuk dengan akun Azure Anda.

Saya mengalami masalah

Mengonfigurasi aplikasi App Service dan menyebarkan kode

Menyebarkan ke Linux

1. Klik kanan App Services dan pilih Buat Aplikasi Web baru. Sebuah kontainer Linux digunakan secara default.

2. Ketik nama unik global untuk aplikasi web Anda dan pilih Enter. Nama harus unik di semua Azure dan hanya menggunakan karakter alfanumerik (A-Z, , a-zdan 0-9) dan tanda hubung (-).

3. Di Pilih stack runtime, pilih versi Node.js yang Anda inginkan. Node 24 LTS disarankan.

4. Di Pilih tingkat harga, pilih Gratis (F1) dan tunggu hingga sumber daya dibuat di Azure.

5. Di popup Selalu sebarkan ruang kerja "myExpressApp" ke <app-name>", pilih Ya. Dengan melakukannya, Anda memastikan bahwa selama Anda berada di ruang kerja yang sama, Visual Studio Code terus menerus dideploy ke aplikasi App Service yang sama.

   Saat Visual Studio Code membuat sumber daya Azure dan menyebarkan kode, visual Studio Code menampilkan pemberitahuan kemajuan.

6. Setelah penyebaran selesai, pilih Telusuri Situs Web di popup pemberitahuan. Browser harus menampilkan halaman default Ekspres.

Menyebarkan ke Windows

1. Di bawah Sumber Daya, dalam langganan yang ingin Anda gunakan, klik kanan App Services, lalu pilih Buat Aplikasi Web Baru... (Tingkat Lanjut).

2. Pilih lokasi tempat Anda ingin melayani aplikasi. Misalnya, Eropa Barat.

3. Pilih Amankan nama host default unik.

4. Pilih Buat grup sumber daya baru, lalu masukkan nama untuk grup sumber daya, seperti AppServiceQS-rg.

5. Ketik nama unik global untuk aplikasi web Anda lalu pilih Enter. Nama harus unik di semua Azure dan hanya menggunakan karakter alfanumerik (A-Z, , a-zdan 0-9) dan tanda hubung (-).

6. Pilih versi Node.js yang Anda inginkan. Node 24 LTS disarankan.

7. Pilih Windows untuk sistem operasi.

8. Pilih Buat Paket Layanan Aplikasi baru, masukkan nama untuk paket (seperti AppServiceQS-plan), lalu pilih F1 Gratis untuk Tingkat Harga.

9. Untuk Pilih sumber daya Application Insights untuk aplikasi Anda, pilih Lewati untuk saat ini. Tunggu hingga sumber daya dibuat di Azure.

10. Di popup Selalu sebarkan ruang kerja "myExpressApp" ke <app-name>", pilih Ya. Dengan melakukannya, Anda memastikan bahwa selama Anda berada di ruang kerja yang sama, Visual Studio Code terus menerus dideploy ke aplikasi App Service yang sama.

    Saat Visual Studio Code membuat sumber daya Azure dan menyebarkan kode, visual Studio Code menampilkan pemberitahuan kemajuan.

    Catatan

    Setelah penyebaran selesai, aplikasi Azure Anda belum berjalan karena akar proyek Anda tidak memiliki file web.config . Ikuti langkah-langkah yang tersisa untuk membuatnya secara otomatis. Untuk informasi selengkapnya, lihat Anda tidak memiliki izin untuk melihat direktori atau halaman ini di Mengonfigurasi Node.js.

11. Di Sumber Daya di Visual Studio Code, perluas simpul untuk aplikasi baru, klik kanan Pengaturan Aplikasi, dan pilih Tambahkan Pengaturan Baru:

    

12. Masukkan SCM_DO_BUILD_DURING_DEPLOYMENT untuk kunci pengaturan.

13. Masukkan true untuk nilai pengaturan.

    Pengaturan aplikasi ini mengaktifkan otomatisasi build saat waktu penyebaran, yang secara otomatis mendeteksi skrip awal dan menghasilkan file web.config bersamanya.

14. Di penjelajah App Service, pilih ikon Sebarkan ke Aplikasi Web lagi, dan konfirmasi dengan memilih Sebarkan lagi.

15. Tunggu hingga penyebaran selesai, lalu pilih Telusuri Situs Web di popup pemberitahuan. Browser harus menampilkan halaman default Ekspres.

Saya mengalami masalah

Di terminal, pastikan Anda berada di direktori myExpressApp . Ganti <app-name> dengan nama yang unik secara global, lalu buat grup sumber daya, rencana App Service, dan aplikasi. Atur SCM_DO_BUILD_DURING_DEPLOYMENT agar App Service menginstal dependensi dan membangun aplikasi saat Anda menerapkan arsip sumber.

Menyebarkan ke Linux

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3 --is-linux
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24-lts"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

Menyebarkan ke Windows

az group create --name myResourceGroup --location eastus
az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku P0v3
az webapp create --name <app-name> --resource-group myResourceGroup --plan myAppServicePlan --runtime "NODE:24LTS"
az webapp config appsettings set --name <app-name> --resource-group myResourceGroup --settings SCM_DO_BUILD_DURING_DEPLOYMENT=true

• Jika perintah az tidak dikenali, pastikan Anda telah menginstal Azure CLI seperti yang dijelaskan dalam Menyiapkan lingkungan awal Anda.
• Ganti <app-name> dengan nama yang unik di seluruh Azure (karakter yang valid adalah a-z, 0-9, dan -).
• Argumen --sku P0v3 ini memilih tingkat harga Premium v3 berbayar. Ganti eastus dengan wilayah pilihan Anda; lihat daftar wilayah yang tersedia dengan az account list-locations.
• Pilih paket Linux. Abaikan untuk paket Windows, seperti yang ditunjukkan di tab Windows.

Buat arsip ZIP dari file di myExpressApp, bukan direktori induknya. Di Linux atau macOS, jalankan zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*' dari myExpressApp. Di Windows, jalankan Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip di PowerShell dari myExpressApp. Kemudian deploy arsip:

az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip

Buka https://<app-name>.azurewebsites.net untuk melihat aplikasinya.

Membuat sumber daya Azure

1. Masuk ke portal Azure.

2. Untuk mulai membuat aplikasi Node.js, telusuri ke https://portal.azure.com/#create/Microsoft.WebSite.

3. Di tab Dasar , di bawah Detail Proyek, pastikan langganan yang benar dipilih lalu pilih Buat baru untuk membuat grup sumber daya. Ketik myResourceGroup untuk namanya.

   

4. Di bagian Detail Instans, ketik nama unik global untuk aplikasi web Anda dan pilih Kode. Pilih Node 24 LTS di Tumpukan Runtime, Sistem Operasi, dan Wilayah tempat Anda ingin melayani aplikasi.

   

5. Di bawah Paket harga, pilih Buat baru untuk membuat paket App Service. Ketik myAppServicePlan untuk nama. Untuk mengubah ke tingkat Gratis, pilih F1 Gratis di daftar Paket harga .

   

6. Pilih tombol Tinjau + buat di bagian bawah halaman.

   

7. Setelah validasi berjalan, pilih tombol Create di bagian bawah halaman.

8. Setelah penyebaran selesai, pilih Pergi ke sumber daya.

   

Mendapatkan kredensial FTPS

Azure App Service mendukung dua jenis kredensial untuk penerapan FTP/S. Kredensial ini tidak sama dengan kredensial langganan Azure Anda. Di bagian ini, Anda mendapatkan kredensial cakupan aplikasi untuk digunakan dengan klien FTP Anda.

1. Dari halaman aplikasi App Service, pilih Pusat Penyebaran di bawah Penyebaran di menu bilah samping, lalu pilih tab Kredensial FTPS .

   

2. Buka klien FTP Anda dan navigasikan ke folder myExpressApp Anda.

3. Dari tab kredensial FTPS , salin titik akhir FTPS, Nama Pengguna, dan Kata Sandi ke klien FTP Anda.

   

4. Pilih Sambungkan di klien FTP Anda.

Menyebarkan file dengan FTPS

1. Salin semua file dan file direktori ke direktori /site/wwwroot di Azure.

   

2. Telusuri URL aplikasi Anda untuk memverifikasi bahwa aplikasi berjalan dengan benar.

Mendistribusikan ulang pembaruan

Anda dapat menyebarkan perubahan ke aplikasi ini dengan melakukan pengeditan di Visual Studio Code, menyimpan file Anda, lalu menyebarkan ulang ke aplikasi Azure Anda. Contohnya:

1. Dari proyek contoh, buka views/index.ejs dan ubah

   <p>Welcome to <%= title %></p>
   

   ke

   <p>Welcome to Azure</p>
   

2. Di penjelajah App Service, pilih ikon Sebarkan ke Aplikasi Web lagi, dan konfirmasi dengan memilih Sebarkan lagi.

3. Tunggu hingga penyebaran selesai, kemudian pilih Telusuri Situs Web di popup pemberitahuan. Anda akan melihat bahwa Welcome to Express pesan diubah menjadi Welcome to Azure.

2. Simpan perubahan Anda, buat kembali ../app.zip dari file aplikasi seperti yang dijelaskan di Deploy to Azure, dan redeploy:

   az webapp deploy --resource-group myResourceGroup --name <app-name> --src-path ../app.zip --type zip
   

   Ganti <app-name> dengan nama yang Anda gunakan saat membuat aplikasi web.

3. Setelah penyebaran selesai, refresh halaman web. Anda akan melihat bahwa Welcome to Express pesan diubah menjadi Welcome to Azure.

2. Simpan perubahan Anda, lalu sebarkan ulang aplikasi menggunakan klien FTP Anda.

3. Setelah penyebaran selesai, refresh halaman web. Anda akan melihat bahwa Welcome to Express pesan diubah menjadi Welcome to Azure.

Catatan Aliran

Anda dapat menampilkan output log (panggilan ke console.log()) dari aplikasi Azure langsung di jendela output Visual Studio Code.

1. Di Sumber Daya di Visual Studio Code, klik kanan simpul aplikasi lalu pilih Mulai Log Streaming.

   

2. Jika diminta untuk menghidupkan ulang aplikasi, pilih Ya. Setelah aplikasi dihidupkan ulang, jendela output Visual Studio Code terbuka dengan koneksi ke aliran log.

3. Setelah beberapa detik, jendela output menunjukkan pesan yang menunjukkan bahwa Anda tersambung ke layanan streaming log. Anda dapat menghasilkan lebih banyak aktivitas output dengan me-refresh halaman di browser.

   Connecting to log stream...
   2020-03-04T19:29:44  Welcome, you are now connected to log-streaming service. The default timeout is 2 hours.
   Change the timeout with the App Setting SCM_LOGSTREAM_TIMEOUT (in seconds).
   

Saya mengalami masalah

Anda dapat mengakses log konsol yang dihasilkan dari dalam aplikasi dan kontainer tempat konsol dijalankan. Log memuat output yang dihasilkan oleh panggilan ke console.log().

Untuk mengalirkan log, jalankan perintah az webapp log tail:

• Aktifkan logging terlebih dahulu: di Linux, jalankan az webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; di Windows, jalankan az webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

az webapp log tail --resource-group myResourceGroup --name <app-name>

Ganti <app-name> dengan nama yang Anda gunakan saat membuat aplikasi web.

Perbarui aplikasi di browser untuk menciptakan log konsol yang berisi pesan tentang permintaan HTTP ke aplikasi. Jika tidak ada output yang muncul segera, coba lagi dalam 30 detik.

Untuk menghentikan streaming log kapan saja, pilih Ctrl+C di terminal.

Anda dapat mengakses log konsol yang dihasilkan dari dalam aplikasi dan kontainer tempat konsol dijalankan. Anda dapat melakukan streaming output log (panggilan ke console.log()) dari aplikasi Node.js langsung di portal Microsoft Azure.

1. Di halaman App Service yang sama untuk aplikasi Anda, gunakan menu bilah samping untuk menggulir ke bagian Pemantauan dan pilih Aliran log.

   

2. Setelah beberapa detik, jendela output menunjukkan pesan yang menunjukkan bahwa Anda tersambung ke layanan streaming log. Anda dapat menghasilkan lebih banyak aktivitas output dengan me-refresh halaman di browser.

   Connecting...
   2021-10-26T21:04:14  Welcome, you are now connected to log-streaming service.
   Starting Log Tail -n 10 of existing logs ----
   /appsvctmp/volatile/logs/runtime/81b1b83b27ea1c3d598a1cdec28c71c4074ce66c735d0be57f15a8d07cb3178e.log
   2021-10-26T21:04:08.614384810Z: [INFO]
   2021-10-26T21:04:08.614393710Z: [INFO]  # Enter the source directory to make sure the script runs where the user expects
   2021-10-26T21:04:08.614399010Z: [INFO]  cd "/home/site/wwwroot"
   2021-10-26T21:04:08.614403210Z: [INFO]
   2021-10-26T21:04:08.614407110Z: [INFO]  export NODE_PATH=/usr/local/lib/node_modules:$NODE_PATH
   2021-10-26T21:04:08.614411210Z: [INFO]  if [ -z "$PORT" ]; then
   2021-10-26T21:04:08.614415310Z: [INFO]          export PORT=8080
   2021-10-26T21:04:08.614419610Z: [INFO]  fi
   2021-10-26T21:04:08.614423411Z: [INFO]
   2021-10-26T21:04:08.614427211Z: [INFO]  node /opt/startup/default-static-site.js
   Ending Log Tail of existing logs ---
   

Membersihkan sumber daya

Di langkah-langkah sebelumnya, Anda membuat sumber daya Azure dalam grup sumber daya. Langkah-langkah dalam mulai cepat ini menempatkan semua sumber daya ke dalam grup sumber daya ini. Untuk membersihkannya, Anda hanya perlu menghapus grup sumber daya.

1. Di ekstensi Azure Visual Studio Code, di daftar Kelompokkan Menurut , pilih Kelompokkan menurut Grup Sumber Daya.

2. Di daftar Sumber Daya , perluas langganan, klik kanan grup sumber daya yang Anda buat sebelumnya, lalu pilih Hapus Grup Sumber Daya.

   

3. Saat diminta, konfirmasi penghapusan Anda dengan memasukkan nama grup sumber daya yang Anda hapus. Setelah Anda mengonfirmasi, grup sumber daya dihapus, dan Anda akan melihat pemberitahuan saat selesai.

Saya mengalami masalah

Pada langkah CLI sebelumnya, Anda telah membuat sumber daya Azure di myResourceGroup.

Jika Anda tidak membutuhkan sumber daya ini di masa mendatang, hapus grup sumber daya dengan menjalankan perintah berikut:

az group delete --name myResourceGroup --no-wait

Argumen --no-wait memungkinkan perintah untuk kembali sebelum operasi selesai.

Anda dapat menghapus grup sumber daya, Layanan aplikasi, dan semua sumber daya terkait saat tidak lagi diperlukan.

1. Dari halaman gambaran umum Azure App Service, pilih grup sumber daya yang Anda buat di langkah Buat sumber daya Azure.

   

2. Dari halaman grup sumber daya, pilih Hapus grup sumber daya. Konfirmasi nama grup sumber daya untuk menyelesaikan penghapusan sumber daya.

   

Konten terkait

Selamat, Anda telah berhasil menyelesaikan panduan mulai cepat ini!

Menyebarkan aplikasi web Node.js + MongoDB ke Azure

Mengonfigurasi aplikasi Node.json

  Menggunakan domain kustom dan sertifikat terkelola untuk mengamankan aplikasi Anda

Lihat ekstensi Azure lainnya.

• Azure Cosmos DB
• Azure Functions
• Paket Ekstensi Docker
• Alat Azure CLI
• Alat Azure Resource Manager

Atau dapatkan semuanya dengan memasang paket ekstensi Node Pack for Azure.