Aracılığıyla paylaş


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

Not

1 Haziran 2024'den itibaren, yeni oluşturulan tüm App Service uygulamaları adlandırma kuralını <app-name>-<random-hash>.<region>.azurewebsites.netkullanarak benzersiz bir varsayılan ana bilgisayar adı oluşturma seçeneğine sahip olacaktır. Mevcut uygulama adları değişmeden kalır.

Örnek: myapp-ds27dh7271aah175.westus-01.azurewebsites.net

Diğer ayrıntılar için App Service Kaynağı için Benzersiz Varsayılan Ana Bilgisayar Adı'na bakın.

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

Bu hızlı başlangıçta Ücretsiz katmanında bir App Service uygulaması yapılandırılır ve Azure aboneliğiniz için ücret alınmaz.

Bu videoda Azure'da bir Node.js web uygulamasının nasıl dağıtılacağı gösterilmektedir.

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

İlk ortamınızı ayarlama

  • Etkin bir aboneliği olan bir Azure hesabınız olmalıdır. Ücretsiz hesap oluşturun.
  • Node.js LTS ve npm'yi yükleyin. Node.js yüklendiğini doğrulamak için komutunu node --version çalıştırın.
  • Azure kaynaklarını oluşturmak ve yapılandırmak için herhangi bir kabukta komut çalıştırdığınız Azure CLI'yi yükleyin.
  • Etkin bir aboneliği olan bir Azure hesabınız olmalıdır. Ücretsiz hesap oluşturun.
  • Node.js LTS ve npm'yi yükleyin. Node.js yüklendiğini doğrulamak için komutunu node --version çalıştırın.
  • Uygulamanıza bağlanmak için bir FTP istemcisine (örneğin, FileZilla) 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.

İpucu

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 Generator'ı kullanarak bir Node.js uygulaması oluşturun.

    npx express-generator myExpressApp --view ejs
    
  2. Uygulamanın dizinine geçin ve NPM paketlerini yükleyin.

    cd myExpressApp && npm install
    
  3. Hata ayıklama bilgileriyle geliştirme sunucusunu başlatın.

    DEBUG=myexpressapp:* npm start
    
  4. Tarayıcıda adresine http://localhost:3000gidin. Şuna benzer bir şey görmeniz gerekir:

    Express Uygulamasını Çalıştırma

Azure’a dağıtın

Devam etmeden önce tüm önkoşulların yüklü ve yapılandırılmış olduğundan emin olun.

Not

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

Azure'da oturum açma

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

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

  3. App Service gezgininde Azure'da oturum aç... öğesini seçin ve yönergeleri izleyin.

    Visual Studio Code'da Durum Çubuğu'nda Azure e-posta adresinizi ve AZURE APP SERVICE gezgininde aboneliğinizi görmeniz gerekir.

    Azure'da oturum açma

App Service uygulamasını yapılandırma ve kodu dağıtma

  1. myExpressApp klasörünü seçin.
  1. App Services'e sağ tıklayın ve Yeni Web Uygulaması oluştur'u seçin. Linux kapsayıcısı varsayılan olarak kullanılır.

  2. Web uygulamanız için genel olarak benzersiz bir ad yazın ve Enter tuşuna basın. Ad tüm Azure'da benzersiz olmalı ve yalnızca alfasayısal karakterler ('A-Z', 'a-z' ve '0-9') ve kısa çizgi ('-') kullanılmalıdır. Üstteki nota bakın.

  3. Çalışma zamanı yığını seçin bölümünde istediğiniz Node.js sürümünü seçin. LTS sürümü ö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çılan pencerede Her zaman "myExpressApp" <çalışma alanını uygulama adına> dağıt" seçeneğini belirleyin, Evet'i seçin. Bu şekilde, aynı çalışma alanında olduğunuz sürece Visual Studio Code her seferinde aynı App Service uygulamasına dağıtılır.

    Visual Studio Code Azure kaynaklarını oluşturur ve kodu dağıtırken ilerleme durumu 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.

Terminalde myExpressApp dizininde olduğunuzdan emin olun ve az webapp up komutunu kullanarak kodu yerel klasörünüzde (myExpressApp) dağıtın:

az webapp up --sku F1 --name <app-name>
  • Komut tanınmıyorsaaz, Azure CLI'nin ilk ortamınızı ayarlama bölümünde açıklandığı gibi yüklü olduğundan emin olun.
  • değerini tüm Azure'da benzersiz bir adla değiştirin <app_name> (geçerli karakterler a-z: , 0-9ve -). Üstteki nota bakın. İyi bir desen, şirketinizin adıyla uygulama tanımlayıcısının bir birleşimini kullanmaktır.
  • bağımsız --sku F1 değişkeni, ücretsiz fiyatlandırma katmanında web uygulamasını oluşturur ve bu da ücret ödemez.
  • İsteğe bağlı olarak bağımsız değişkeni --location <location-name> kullanılabilir bir Azure bölgesi olan yere <location_name> ekleyebilirsiniz. komutunu çalıştırarak Azure hesabınız için izin verilebilen bölgelerin az account list-locations listesini alabilirsiniz.
  • komutu varsayılan olarak Node.js için bir Linux uygulaması oluşturur. Bunun yerine bir Windows uygulaması oluşturmak için bağımsız değişkenini --os-type kullanın.
  • "Uygulamanızın çalışma zamanı yığını otomatik olarak algılanamadı" hatasını görürseniz myExpressApp dizininde komutunu çalıştırdığınızdan emin olun (bkz. az webapp up ile ilgili otomatik algılama sorunlarını giderme).

Komutun tamamlanması birkaç dakika sürebilir. Çalıştırılırken kaynak grubunu, App Service planını ve uygulama kaynağını oluşturma, günlüğe kaydetmeyi yapılandırma ve ZIP dağıtımı yapma hakkında iletiler sağlar. Ardından uygulamanın Azure'daki URL'si olan "Uygulamayı http://< app-name.azurewebsites.net> adresinde başlatabilirsiniz" iletisini verir (en üstteki nota bakın).

The webapp '<app-name>' doesn't exist
Creating Resource group '<group-name>' ...
Resource group creation complete
Creating AppServicePlan '<app-service-plan-name>' ...
Creating webapp '<app-name>' ...
Configuring default logging for the app, if not already enabled
Creating zip with contents of dir /home/cephas/myExpressApp ...
Getting scm site credentials for zip deployment
Starting zip deployment. This operation can take a while to complete ...
Deployment endpoint responded with status code 202
You can launch the app at http://<app-name>.azurewebsites.net
{
  "URL": "http://<app-name>.azurewebsites.net",
  "appserviceplan": "<app-service-plan-name>",
  "location": "centralus",
  "name": "<app-name>",
  "os": "<os-type>",
  "resourcegroup": "<group-name>",
  "runtime_version": "node|10.14",
  "runtime_version_detected": "0.0",
  "sku": "FREE",
  "src_path": "//home//cephas//myExpressApp"
}

Not

az webapp up komutu şu eylemleri gerçekleştirir:

Azure Portal'da oturum açın

Azure Portal’ında oturum açın.

Azure kaynakları oluşturma

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

  2. Temel Bilgiler sekmesindeki Proje ayrıntıları'nın altında doğru aboneliğin seçili olduğundan emin olun ve ardından Yeni kaynak grubu oluştur'u seçin. Ad olarak myResourceGroup yazın.

    Web uygulaması için Azure aboneliğini ve kaynak grubunu seçtiğiniz yeri gösteren Proje ayrıntıları bölümünün ekran görüntüsü

  3. Örnek ayrıntıları'nın altında, web uygulamanız için genel olarak benzersiz bir ad yazın ve Kod'a tıklayın (en üstteki nota bakın). Node 18 LTS Çalışma Zamanı yığınını, bir İşletim Sistemi'ni ve uygulamanıza hizmet vermek istediğiniz bölgeyi seçin.

    Sanal makine için bir ad sağladığınız ve bu makinenin bölgesini, görüntüsünü ve boyutunu seçtiğiniz Örnek ayrıntıları bölümünün ekran görüntüsü

  4. App Service Planı'nın altında Yeni App Service Planı oluştur'u seçin. Ad olarak myAppServicePlan yazın. Ücretsiz katmanına geçmek için Boyutu değiştir'i, Geliştirme/Test sekmesini, F1'i ve sayfanın en altındaki Uygula düğmesini seçin.

    Yönetici kullanıcı adı ve parolasını girdiğiniz Yönetici hesabı bölümünün ekran görüntüsü

  5. Sayfanın alt kısmındaki Gözden Geçir + oluştur düğmesini seçin.

    Sayfanın en altındaki Gözden geçir ve oluştur düğmesini gösteren ekran görüntüsü

  6. Doğrulama çalıştırıldıktan sonra sayfanın en altındaki Oluştur düğmesini seçin.

  7. Dağıtım tamamlandıktan sonra Kaynağa git'i seçin.

    Kaynağa gitme işleminin sonraki adımını gösteren ekran görüntüsü

FTPS kimlik bilgilerini alma

Azure Uygulaması Hizmeti destekler FTP/S dağıtımı için iki tür kimlik bilgisi. Bu kimlik bilgileri, Azure aboneliği kimlik bilgilerinizle aynı değildir. Bu bölümde, FileZilla ile kullanılacak uygulama kapsamı kimlik bilgilerini alırsınız.

  1. App Service uygulaması sayfasından sol taraftaki menüden Dağıtım Merkezi'ni seçin ve FTPS kimlik bilgileri sekmesini seçin.

    FTPS dağıtım kimlik bilgileri

  2. FileZilla'ı açın ve yeni bir site oluşturun.

  3. FTPS kimlik bilgileri sekmesindeki Uygulama kapsamı'nın altında FTPS uç noktasını, FTPS Kullanıcı Adı ve Parola'yı FileZilla'ya kopyalayın.

    FTPS bağlantı ayrıntıları

  4. FileZilla'da Bağlan'ı seçin.

FTPS ile dosya dağıtma

  1. Tüm dosya ve dizin dosyalarını Azure'daki /site/wwwroot dizinine kopyalayın.

    FileZilla dosyaları dağıtma

  2. Uygulamanın düzgün çalıştığını doğrulamak için uygulamanızın URL'sine göz atın.

Güncelleştirmeleri yeniden dağıtma

Visual Studio Code'da düzenlemeler yaparak, dosyalarınızı kaydederek ve ardından Azure uygulamanıza yeniden dağıtarak bu uygulamada değişiklik dağıtabilirsiniz. Örneğin:

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

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

    kullanıcısı

    <p>Welcome to Azure</p>
    
  1. App Service gezgininde Web Uygulamasına Dağıt simgesini yeniden seçin ve yeniden Dağıt'a tıklayarak onaylayın.

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

  1. Değişikliklerinizi kaydedin, ardından az webapp up komutunu kullanarak Linux için bağımsız değişken olmadan uygulamayı yeniden dağıtın. Windows için ekle --os-type Windows :

    az webapp up
    

    Bu komut uygulama adı, kaynak grubu ve App Service planı gibi .azure/config dosyasında yerel olarak önbelleğe alınan değerleri kullanır.

  2. Dağıtım tamamlandıktan sonra web sayfasını http://<app-name>.azurewebsites.net yenileyin (üstteki nota bakın). İletinin Welcome to Express olarak değiştirildiğini Welcome to Azure!görmeniz gerekir.

  1. Değişikliklerinizi kaydedin, ardından FTP istemcinizi kullanarak uygulamayı yeniden dağıtın.

  2. Dağıtım tamamlandıktan sonra web sayfasını http://<app-name>.azurewebsites.net yenileyin (üstteki nota bakın). İletinin Welcome to Express olarak değiştirildiğini Welcome to Azure!görmeniz gerekir.

Akış Günlükleri

Azure uygulamasından günlük çıkışını (çağrısı) console.log()doğrudan Visual Studio Code çıkış penceresinden akışla aktarabilirsiniz.

  1. App Service gezgininde uygulama düğümüne sağ tıklayın ve Akış Günlüklerini Başlat'ı seçin.

    Günlüklerin Akışını Başlat

  2. Uygulamayı yeniden başlatmanız istenirse Evet'i seçin. Uygulama yeniden başlatıldıktan sonra Visual Studio Code çıkış penceresi açılır ve günlük akışına bağlantı sağlanır.

  3. Birkaç saniye sonra çıkış penceresinde, günlük akışı hizmetine bağlı olduğunuzu belirten bir ileti gösterilir. Tarayıcıdaki sayfayı yenileyerek daha fazla çıkış etkinliği oluşturabilirsiniz.

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

Uygulamanın içinden ve içinde çalıştığı kapsayıcıdan oluşturulan konsol günlüklerine erişebilirsiniz. Günlükler, çağrısı tarafından oluşturulan tüm çıkışları console.log()içerir.

Günlükleri akışla aktarmak için az webapp log tail komutunu çalıştırın:

az webapp log tail

komut, .azure/config dosyasında önbelleğe alınan kaynak grubu adını kullanır.

Ayrıca, dağıtımda --logs günlük akışını otomatik olarak açmak için parametresini az webapp up komutuyla da ekleyebilirsiniz.

Uygulamaya yönelik HTTP isteklerini açıklayan iletileri içeren konsol günlükleri oluşturmak için tarayıcıdaki uygulamayı yenileyin. Hemen bir çıkış görüntülenmezse 30 saniye içinde yeniden deneyin.

Günlük akışını istediğiniz zaman durdurmak için terminalde Ctrl+C tuşuna basın.

Uygulamanın içinden ve içinde çalıştığı kapsayıcıdan oluşturulan konsol günlüklerine erişebilirsiniz. Günlük çıkışını (çağrısı) console.log()doğrudan Azure portalında Node.js uygulamasından akışla aktarabilirsiniz.

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

    Azure Uygulaması hizmetinde günlük akışının ekran görüntüsü.

  2. Birkaç saniye sonra çıkış penceresinde, günlük akışı hizmetine bağlı olduğunuzu belirten bir ileti gösterilir. Tarayıcıdaki sayfayı yenileyerek daha fazla çıkış etkinliği oluşturabilirsiniz.

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

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Bu hızlı başlangıçtaki oluşturma adımları, tüm kaynakları bu kaynak grubuna ekler. Temizlemek için kaynak grubunu kaldırmanız yeterlidir.

  1. Visual Studio'nun Azure uzantısında Kaynak Grupları gezginini genişletin.

  2. Aboneliği genişletin, daha önce oluşturduğunuz kaynak grubuna sağ tıklayın ve Sil'i seçin.

    App Service kaynaklarını içeren bir kaynağı silmek için Visual Studio Code gezintisinin ekran görüntüsü.

  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.

Önceki adımlarda, bir kaynak grubunda Azure kaynakları oluşturdunuz. Kaynak grubunun konumunuza bağlı olarak "appsvc_rg_Linux_CentralUS" gibi bir adı vardır.

Gelecekte bu kaynaklara ihtiyaç duymayı beklemiyorsanız aşağıdaki komutu çalıştırarak kaynak grubunu silin:

az group delete --no-wait

komut, .azure/config dosyasında önbelleğe alınan kaynak grubu adını kullanır.

--no-wait bağımsız değişkeni, işlemin tamamlanmasından önce komutun döndürülmesini sağlar.

Artık gerekli olmadığında kaynak grubunu, App service'i ve tüm ilgili kaynakları silebilirsiniz.

  1. App Service'e genel bakış sayfanızdan Azure kaynakları oluşturma adımında oluşturduğunuz kaynak grubunu seçin.

    App Service'te kaynak grubuna genel bakış sayfası

  2. Kaynak grubu sayfasında Kaynak grubunu sil'i seçin. Kaynakları silme işlemini tamamlamak için kaynak grubunun adını onaylayın.

    Kaynak grubunu sil

Sonraki adımlar

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

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

İsterseniz, Azure için Node Pack uzantı paketini yükleyerek tümünü alabilirsiniz.