Azure'da Node.js web uygulaması dağıtma

Bu hızlı başlangıçta ilk Node.js (Express) web uygulamanızı oluşturmayı ve Azure App Service'e dağıtmayı öğreneceksiniz. App Service, hem Linux hem de Windows üzerinde çeşitli Node.js sürümlerini destekler.

Bu hızlı başlangıçtaki Azure CLI adımları ücretli Premium v3 seviyesini kullanır. Visual Studio Code ve Azure portal adımları, Free seviyesinin nasıl kullanılacağını gösterir.

Bu video, Azure'da bir Node.js web uygulamasının nasıl dağıtılacağını gösteriyor.

Videodaki adımlar, aşağıdaki bölümlerde de açıklanmaktadır.

Başlangıç ortamınızı ayarlayın

• Azure hesabınızda aktif bir abonelik bulundurun. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Node.js LTS'yi yükleyin. Komut node --version'u çalıştırarak Node.js'in yüklü olup olmadığını doğrulayın.
• Visual Studio Code’u yükleyin.
• Visual Studio Code için Azure App Service uzantısını kurun.

• Azure hesabınızda aktif bir abonelik bulundurun. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Node.js LTS'yi yükleyin. Komut node --version'u çalıştırarak Node.js'in yüklü olup olmadığını doğrulayın.
• Azure kaynaklarını oluşturmak ve yapılandırmak için bir kabukta komut çalıştırmak için kullanabileceğiniz Azure CLI'yi yükleyin.

• Azure hesabınızda aktif bir abonelik bulundurun. Hesabınız yoksa ücretsiz bir hesap oluşturabilirsiniz.
• Node.js LTS'yi yükleyin. Komut node --version'u çalıştırarak Node.js'in yüklü olup olmadığını doğrulayın.
• Dosyaları App Service'e aktarmak için FileZilla gibi bir FTP istemcisine sahip olun.

Node.js uygulamanızı oluşturma

Bu adımda, temel bir Node.js uygulaması oluşturur ve bilgisayarınızda çalıştığından emin olursunuz.

Tavsiye

Node.js öğreticisini tamamladıysanız Azure'a dağıtma bölümüne atlayabilirsiniz.

1. Node.js ve npm ile varsayılan olarak yüklenen express uygulama oluşturucusunu kullanarak Node.js bir uygulama oluşturun.

   npx express-generator myExpressApp --view ejs
   

   Oluşturucuyu ilk kez yüklüyorsanız npx yüklemeyi kabul etmenizi ister.

2. Uygulamanın dizinine geçin ve npm paketlerini yükleyin.

   cd myExpressApp && npm install
   

3. Bağımlılıkları en güvenli sürüme güncelleştirin.

   npm audit fix --force
   

4. Geliştirme sunucusunu hata ayıklama bilgileriyle başlatın.

   DEBUG=myexpressapp:* npm start
   

5. Bir tarayıcıda http://localhost:3000 adresine gidin. Şuna benzer bir şey görmelisiniz:

   

Bir sorunla karşılaştım

Azure'a Dağıt

Devam etmeden önce, tüm ön koşulların yüklendiğinden ve yapılandırıldığından emin olun.

Uyarı

Node.js uygulamanızın Azure’da çalışması için, PORT ortam değişkeni tarafından sağlanan portta dinlemesi gerekmektedir. Oluşturduğunuz Express uygulamasında, bu ortam değişkeni başlangıç betiği kutusunda/www dosyasında zaten kullanılıyor. (Ara process.env.PORT.)

Azure'a Giriş Yap

1. Terminalde myExpressApp dizininde olduğunuzdan emin olun ve ardından Visual Studio Code'u aşağıdaki komutla başlatın:

   code .
   

2. Visual Studio Code'daki Etkinlik Çubuğu'nda Azure logosunu seçin.

3. Azure hesabınızla oturum açtığınızdan emin olun.

Bir sorunla karşılaştım

Uygulama Hizmeti uygulamasını yapılandırın ve kodu dağıtın

Linux'a dağıtma

1. App Services'e sağ tıklayın ve Yeni Web Uygulaması Oluştur'u seçin. Varsayılan olarak bir Linux konteyneri kullanılır.

2. Web uygulamanız için küresel olarak benzersiz bir ad yazın ve Enter'e basın. İsim, tüm Azure'da benzersiz olmalı ve yalnızca alfasayısal karakterler (A-Z, a-z ve 0-9) ve kısa çizgi (-) kullanmalıdır.

3. Çalışma zamanı yığını seç seçeneğinde, istediğiniz Node.js sürümünü seçin. Node 24 LTS önerilir.

4. Fiyatlandırma katmanı seçin bölümünde Ücretsiz (F1) öğesini seçin ve kaynakların Azure'da oluşturulmasını bekleyin.

5. Açılır pencerede "myExpressApp" çalışma alanını her zaman <app-name>" üzerine dağıtın seçeneğini işaretleyin ve Evet seçeneğini seçin. Bunu yapmak, aynı çalışma alanında olduğunuz sürece, Visual Studio Code her seferinde aynı App Service uygulamasına dağıtım yapmasını sağlar.

   Visual Studio Code, Azure kaynaklarını oluşturup kodu dağıtırken, ilerleme bildirimlerini gösterir.

6. Dağıtım tamamlandıktan sonra bildirim açılır penceresinde Web Sitesine Gözat'ı seçin. Tarayıcı, Express varsayılan sayfasını görüntülemelidir.

Windows'a dağıt

1. Kaynaklar'ın altında, kullanmak istediğiniz abonelikte Uygulama Hizmetleri'ne sağ tıklayın ve ardından Yeni Web Uygulaması Oluştur... öğesini seçin. (Gelişmiş).

2. Uygulamanızı sunmak istediğiniz konumu seçin. Örneğin, Batı Avrupa.

3. Güvenli benzersiz varsayılan ana makine adını seçin.

4. Yeni bir kaynak grubu oluştur seçeneğini belirleyin ve ardından kaynak grubu için AppServiceQS-rg gibi bir ad yazın.

5. Web uygulamanız için genel olarak benzersiz bir ad yazın ve enter tuşuna basın. İsim, tüm Azure'da benzersiz olmalı ve yalnızca alfasayısal karakterler (A-Z, a-z ve 0-9) ve kısa çizgi (-) kullanmalıdır.

6. İstediğiniz Node.js sürümünü seçin. Node 24 LTS önerilir.

7. İşletim sistemi için Windows'u seçin.

8. Seç Yeni Uygulama Hizmet planı oluştur, plan için bir ad girin (örneğin, AppServiceQS-plan), ve ardından fiyatlandırma katmanı için F1 Free'i seçin.

9. Uygulamanız için bir Application Insights kaynağı seçin kısmında Şimdi atla'yı seçin. Kaynakların Azure'da oluşturulmasını bekleyin.

10. Açılır pencerede "myExpressApp" çalışma alanını her zaman <app-name>" üzerine dağıtın seçeneğini işaretleyin ve Evet seçeneğini seçin. Bunu yapmak, aynı çalışma alanında olduğunuz sürece, Visual Studio Code her seferinde aynı App Service uygulamasına dağıtım yapmasını sağlar.

    Visual Studio Code, Azure kaynaklarını oluşturup kodu dağıtırken, ilerleme bildirimlerini gösterir.

    Uyarı

    Dağıtım tamamlandıktan sonra proje kökünüzün web.config dosyası olmadığından Azure uygulamanız henüz çalışmaz. Otomatik olarak oluşturmak için kalan adımları izleyin. Daha fazla bilgi için, Bu dizini veya sayfayı görüntüleme izniniz yok kısmına Bir Node.js Yapılandırma Kılavuzu bölümünden bakın.

11. Visual Studio Code'daki Kaynaklar'da yeni uygulamanın düğümünü genişletin, Uygulama Ayarları'na sağ tıklayın ve Yeni Ayar Ekle'yi seçin:

    

12. Ayar anahtarı için SCM_DO_BUILD_DURING_DEPLOYMENT girin.

13. Ayar değeri için true girin.

    Bu uygulama ayarı, dağıtım sırasında derleme otomasyonunu etkinleştirerek başlangıç betiğini otomatik olarak tespit eder ve web.config dosyasını bu betikle oluşturur.

14. App Service gezgininde, Web Uygulamasına Yükle simgesini tekrar seçin ve Yükle'yi yeniden seçerek onaylayın.

15. Dağıtımın tamamlanmasını bekleyin ve ardından bildirim açılır penceresinde Web Sitesini Gez öğesini seçin. Tarayıcı, Express varsayılan sayfasını görüntülemelidir.

Bir sorunla karşılaştım

Terminalde, myExpressApp dizininde olduğundan emin olun. Küresel benzersiz bir isimle değiştirin <app-name> , ardından kaynak grubunu, App Service planını ve uygulamayı oluşturun. SCM_DO_BUILD_DURING_DEPLOYMENT değerini ayarlayın, böylece kaynak arşivini dağıttığınızda App Service bağımlılıkları yükler ve uygulamayı oluşturur.

Linux'a dağıtma

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

Windows'a dağıt

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

• az komutu tanınmadıysa, Başlangıç ortamınızı ayarlayın bölümünde açıklandığı gibi Azure CLI'nin yüklü olduğundan emin olun.
• <app-name> öğesini Azure'un tamamında benzersiz bir adla değiştirin (geçerli karakterler a-z, 0-9 ve -).
• Argüman --sku P0v3 , ücretli Premium v3 fiyatlandırma katmanını seçer. eastus ifadesini tercih ettiğiniz bölgeyle değiştirin; mevcut bölgeleri az account list-locations ile listeleyin.
• --is-linux bir Linux planı seçin. Windows sekmesinde gösterildiği gibi Windows planı için bunu çıkar.

myExpressApp içindeki dosyaların ZIP arşivini, üst dizini değil, oluşturun. Linux veya macOS'ta, zip -r ../app.zip . -x '*/node_modules/*' '*/.git/*' '*/.env*''ten çalıştırın. Windows'ta, Compress-Archive -Path (Get-ChildItem -Force -Name | Where-Object { $_ -notin @('node_modules', '.git') -and $_ -notlike '.env*' }) -DestinationPath ..\app.zip klasöründen PowerShell'de çalıştırın. Sonra arşivi devreye alın:

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

Uygulamayı görmek için https://<app-name>.azurewebsites.net konumuna gidin.

Azure kaynakları oluşturun

1. Azure portalınaoturum açın.

2. Node.js uygulaması oluşturmaya başlamak için https://portal.azure.com/#create/Microsoft.WebSite adresine gidin.

3. Temel Bilgiler sekmesinde, Proje Detayları altında, doğru aboneliğin seçili olduğundan emin olun ve ardından bir kaynak grubu oluşturmak için Yeni oluştur'u seçin. Ad olarak myResourceGroup yazın.

   

4. Örnek ayrıntıları altında, web uygulamanız için küresel olarak benzersiz bir ad yazın ve Kodu seçin. Çalışma Zamanı yığınındaNode 24 LTS, bir İşletim Sistemi ve uygulamanıza hizmet vermek istediğiniz bir Bölge'yi seçin.

   

5. Fiyatlandırma planları'nın altında Yeni oluştur'u seçerek App Service planı oluşturun. Ad olarak myAppServicePlan yazın. Ücretsiz katmanına geçmek için Fiyatlandırma planı listesinde Ücretsiz F1'i seçin.

   

6. Sayfanın altındaki İncele + oluştur düğmesini seçin.

   

7. Sayfa doğrulama çalışmaları tamamlandıktan sonra, sayfanın altındaki Oluştur düğmesine tıklayın.

8. Dağıtım tamamlandıktan sonra, Kaynağa git seçeneğini seçin.

   

FTPS kimlik bilgilerini al

Azure App Service, FTP/S dağıtımı için iki tür kimlik doğrulama bilgisi destekler. Bu kimlik bilgileri, Azure abonelik kimlik bilgilerinizle aynı değil. Bu bölümde, FTP istemcinizle kullanılacak uygulama kapsamı kimlik bilgilerini alırsınız.

1. App Service uygulaması sayfasında, kenar çubuğu menüsünde Dağıtım'ın altında Dağıtım Merkezi'ni seçin ve ardından FTPS Kimlik Bilgileri sekmesini seçin.

   

2. FTP istemcinizi açın ve myExpressApp klasörünüze gidin.

3. FTPS kimlik bilgileri sekmesinde FTPS uç noktasını, Kullanıcı Adını ve Parola'yı FTP istemcinize kopyalayın.

   

4. FTP istemcinizde Bağlan'ı seçin.

FTPS ile dosyaları dağıtın

1. Azure'da /site/wwwroot directory dizinine tüm dosyaları ve dizinleri kopyalayın.

   

2. Uygulamanızın URL'sini ziyaret ederek uygulamanın düzgün çalıştığını doğrulayın.

Güncellemeleri yeniden dağıt

Bu uygulama için değişiklikleri, Visual Studio Code'da düzenlemeler yaparak, dosyalarınızı kaydederek ve ardından Azure uygulamanıza yeniden dağıtarak yapabilirsiniz. Örneğin:

1. Örnek projeden views/index.ejs dosyasını açın ve değiştirin

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

   için

   <p>Welcome to Azure</p>
   

2. App Service gezgininde, Web Uygulamasına Yükle simgesini tekrar seçin ve Yükle'yi yeniden seçerek onaylayın.

3. Dağıtımın tamamlanmasını bekleyin, ardından bildirim açılır penceresinde Web Sitesine Gözat'ı seçin. Welcome to Express iletisinin Welcome to Azure olarak değiştirildiğini görmeniz gerekir.

2. Değişikliklerinizi kaydedin, uygulama dosyalarından ../app.zip dosyasını Deploy to Azure bölümünde açıklandığı şekilde yeniden oluşturun ve yeniden dağıtın:

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

   <app-name> öğesini web uygulamasını oluştururken kullandığınız adla değiştirin.

3. Dağıtım tamamlandıktan sonra web sayfasını yenileyin. Welcome to Express iletisinin Welcome to Azure olarak değiştirildiğini görmeniz gerekir.

2. Yaptığınız değişiklikleri kaydedin ve ardından uygulamayı FTP istemcinizi kullanarak yeniden dağıtın.

3. Dağıtım tamamlandıktan sonra web sayfasını yenileyin. Welcome to Express iletisinin Welcome to Azure olarak değiştirildiğini görmeniz gerekir.

Akış günlükleri

Azure uygulamasından gelen günlük çıkışını (c0 /> çağrıları) doğrudan Visual Studio Code çıktı penceresinde yayınlayabilirsiniz.

1. Visual Studio Code'daki Kaynaklar'da uygulama düğümüne sağ tıklayın ve ardından Akış Günlüklerini Başlat'ı seçin.

   

2. Uygulamayı yeniden başlatmanız istenirse, Evet'i seçin. Uygulama yeniden başlatıldığında, Visual Studio Code çıktı penceresi günlük akışına bağlanarak açılır.

3. Birkaç saniye sonra, çıktı penceresi size günlük akışı hizmetine bağlı olduğunuzu belirten bir mesaj gösterir. Tarayıcıda sayfayı yenileyerek daha fazla çıktı etkinliği üretebilirsiniz.

   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).
   

Bir sorunla karşılaştım

Uygulama içinden ve uygulamanın çalıştığı konteynerden üretilen konsol günlüklerine erişebilirsiniz. Çağrılar tarafından oluşturulan çıktıları içeren günlükler console.log() içerir.

Logları yayına almak için, az webapp log tail komutunu çalıştırın.

• Önce logu etkinleştirin: Linux'ta çalıştırınaz webapp log config --resource-group myResourceGroup --name <app-name> --docker-container-logging filesystem; Windows'ta çalıştırınaz webapp log config --resource-group myResourceGroup --name <app-name> --application-logging filesystem.

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

<app-name> öğesini, web uygulamasını oluştururken kullandığınız adla değiştirin.

Tarayıcıda uygulamayı yenileyin (refresh) ve uygulamaya yapılan HTTP isteklerini açıklayan mesajları içeren konsol günlüklerini (console logs) oluşturun. Hemen bir çıktı görünmezse, 30 saniye sonra tekrar deneyin.

Günlük akışını herhangi bir zamanda durdurmak için terminalde Ctrl+C'ye basın.

Uygulama içinden ve uygulamanın çalıştığı konteynerden üretilen konsol günlüklerine erişebilirsiniz. Node.js uygulamasından log çıktısını (console.log() ile yapılan çağrılar) doğrudan Azure portalında yayınlayabilirsiniz.

1. Uygulamanızın aynı App Service sayfasında, kenar çubuğu menüsünü kullanarak İzleme bölümüne gidin ve Günlük akışı'nı seçin.

   

2. Birkaç saniye sonra, çıktı penceresi size günlük akışı hizmetine bağlı olduğunuzu belirten bir mesaj gösterir. Tarayıcıda sayfayı yenileyerek daha fazla çıktı etkinliği üretebilirsiniz.

   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 ---
   

Kaynakları temizle

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Bu ön başlangıçtaki adımlar, tüm kaynakları bu kaynak grubuna yerleştirir. Temizlik yapmak için, kaynak grubunu kaldırmanız yeterli.

1. Visual Studio Code'un Azure uzantısında, Gruplandır listesinde Kaynak Grubuna Göre Gruplandır'ı seçin.

2. Kaynaklar listesinde aboneliği genişletin, daha önce oluşturduğunuz kaynak grubuna sağ tıklayın ve ardından Kaynak Grubunu Sil'i seçin.

   

3. İstendiğinde, silmekte olduğunuz kaynak grubunun adını girerek silme işleminizi onaylayın. Onayladıktan sonra kaynak grubu silinir ve tamamlandığında bir bildirim görürsünüz.

Bir sorunla karşılaştım

Önceki CLI adımlarında, Azure kaynaklarını myResourceGroup içinde oluşturdunuz.

Gelecekte bu kaynaklara ihtiyacınız olmayacağını düşünüyorsanız, aşağıdaki komutu çalıştırarak kaynak grubunu silin:

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

--no-wait argümanı, işlemin tamamlanmasından önce komutun geri dönmesine olanak tanır.

Kaynak grubu, uygulama hizmeti ve ilgili tüm kaynaklar artık gerekli olmadığında silinebilir.

1. Uygulama Hizmeti genel bakış sayfanızdan Azure kaynakları oluştur adımında oluşturduğunuz kaynak grubunu seçin.

   

2. Kaynak grubu sayfasından Kaynak grubunu sil öğesini seçin. Kaynakları silmeyi tamamlamak için kaynak grubunun adını doğrulayın.

   

İlgili içerik

Tebrikler, hızlı başlangıcı başarıyla tamamladınız!

Azure'a Node.js + MongoDB web uygulaması dağıtma

Node.js uygulaması yapılandırma

  Uygulamanızın güvenliğini sağlamak için özel etki alanı ve yönetilen sertifika kullanma

Diğer Azure uzantılarına göz atın.

• Azure Cosmos DB
• Azure İşlevleri
• Docker Uzantı Paketi
• Azure CLI Araçları
• Azure Resource Manager Araçları

Tümünü Azure için Node Paketi uzantı paketini yükleyerek edinin.