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

Not

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

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

Daha fazla bilgi için bkz. App Service Kaynağı için Benzersiz Varsayılan Ana Bilgisayar Adı.

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 ve npm'yi yükleyin. Node.js yüklendiğini doğrulamak için komutunu node --version çalıştırın.
• Visual Studio Code’u yükleyin.
• Visual Studio Code için Azure Uygulaması Hizmeti uzantısı.

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

   

Bir sorunla karşılaştım

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.

   

Bir sorunla karşılaştım

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

1. myExpressApp klasörünü seçin.

Linux'a dağıtma

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

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

4. Ç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.

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

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

7. 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ğıtma

2. App Services'e sağ tıklayın ve Yeni Web Uygulaması oluştur... öğesini seçin . Gelişmiş.

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

4. Yeni kaynak grubu oluştur'u seçin ve ardından kaynak grubu için AppServiceQS-rg gibi bir ad girin.

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

6. İşletim sistemi için Windows'ı seçin.

7. Uygulamanıza hizmet vermek istediğiniz konumu seçin. Örneğin, Batı Avrupa.

8. Yeni App Service planı oluştur'u seçin, ardından plan için bir ad girin (AppServiceQS planı gibi), ardından fiyatlandırma katmanı için F1 Ücretsiz'i seçin.

9. Uygulamanız için bir Uygulama Analizler kaynağı seçin alanında Şimdilik atla'yı seçin ve Azure'da oluşturulacak kaynakları bekleyin.

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

    Not

    Dağıtım tamamlandığında, proje kökünüzün web.config'i olmadığından Azure uygulamanız henüz çalışmaz. Otomatik olarak oluşturmak için kalan adımları izleyin. Daha fazla bilgi için bkz . Bu dizini veya sayfayı görüntüleme izniniz yok.

11. Visual Studio code'daki App Service gezgininde yeni uygulamanın düğümünü genişletin, Uygulama Ayarlar'ne sağ tıklayın ve Yeni Ayar Ekle'yi seçin:

    

12. Ayar anahtarı için girin SCM_DO_BUILD_DURING_DEPLOYMENT .

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

    Bu uygulama ayarı, dağıtım zamanında derleme otomasyonunu etkinleştirir ve bu ayar başlangıç betiğini otomatik olarak algılar ve onunla web.config oluşturur.

14. App Service gezgininde Web UygulamasınaDağıt simgesini yeniden seçin ve yeniden Dağıt'a tıklayarak onaylayın.

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

Bir sorunla karşılaştım

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

Linux'a dağıtma

az webapp up --sku F1 --name <app-name>

Windows'a dağıtma

az webapp up --sku F1 --name <app-name> --os-type Windows

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

• Varsayılan bir kaynak grubu oluşturun.

• Varsayılan bir App Service planı oluşturun.

• Belirtilen ada sahip bir uygulama oluşturun.

• Zip, derleme otomasyonu etkinleştirilmiş olarak geçerli çalışma dizinindeki tüm dosyaları dağıtın.

• Parametreleri yerel olarak .azure/config dosyasında önbelleğe alın; böylece daha sonra proje klasöründen veya diğer az webapp komutlarla az webapp up dağıtırken bunları yeniden belirtmeniz gerekmez. Önbelleğe alınan değerler varsayılan olarak otomatik olarak kullanılır.

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.

   

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.

   

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.

   

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

   

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.

   

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.

   

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.

   

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.

   

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>
   

2. App Service gezgininde Web UygulamasınaDağıt simgesini yeniden seçin ve yeniden Dağıt'a tıklayarak onaylayın.

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

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

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

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

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

   

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

Bir sorunla karşılaştım

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.

   

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.

   

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

   

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

   

Sonraki adımlar

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

Öğretici: MongoDB ile uygulama Node.js

Node.js uygulamasını yapılandırma

 Özel etki alanı ve sertifika ile güvenli

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

• Azure Cosmos DB
• Azure Functions
• Docker Araçları
• Azure CLI Araçları
• Azure Resource Manager Araçları

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