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

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

Bu hızlı başlangıç, Ücretsiz katmanda bir Uygulama Hizmeti uygulaması yapılandırır ve Azure aboneliğiniz için herhangi bir maliyete neden olmaz.

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. Ücretsiz hesap oluşturun.
• 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. Ücretsiz hesap oluşturun.
• 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 kabukta komut çalıştırdığınız Azure CLI'yi yükleyin.

• Azure hesabınızda aktif bir abonelik bulundurun. Ücretsiz hesap oluşturun.
• Node.js LTS'yi yükleyin. Komut node --version'u çalıştırarak Node.js'in yüklü olup olmadığını doğrulayı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.

Tavsiye

Eğer Node.js eğitimini zaten tamamladıysanız, Azure'a Dağıtım bölümüne geçebilirsiniz.

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
   

   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. App Service gezgininde, Azure'da oturum aç'yi seçin ve yönergeleri izleyin.

   Visual Studio Code'da, Durum Çubuğu'nda Azure e-posta adresinizi ve App Service gezgininde aboneliğinizi görmelisiniz.

   

Bir sorunla karşılaştım

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

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. Varsayılan olarak bir Linux konteyneri kullanılır.

3. Web uygulamanız için küresel olarak benzersiz bir ad yazın ve Enter'e basın. Ad, Azure genelinde benzersiz olmalıdır ve yalnızca alfanumerik karakterler ('A-Z', 'a-z', '0-9') ve tire ('-') içermelidir.

4. Çalışma zamanı yığını seç seçeneğinde, istediğiniz Node.js sürümünü seçin. Bir 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çı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.

7. Dağıtım tamamlandığında, bildirim açılır penceresinde Web Sitesine Göz At öğesini seçin. Tarayıcı, Express varsayılan sayfasını görüntülemelidir.

Windows'a dağıt

2. App Services'e sağ tıklayın ve Create new Web App... Advanced'ı seçin.

3. Web uygulamanız için küresel olarak benzersiz bir ad yazın ve Enter'e basın. Ad, Azure genelinde benzersiz olmalıdır ve yalnızca alfanumerik karakterler ('A-Z', 'a-z', '0-9') ve tire ('-') içermelidir.

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. İstediğiniz Node.js sürümünü seçin. Bir LTS sürümü önerilir.

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

7. Uygulamanızı hangi konumdan sunmak istediğinizi seçin. Örneğin, Batı Avrupa.

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, şimdilik atlasın ve Azure'da kaynakların 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ığında, Azure uygulamanız henüz çalışmaz çünkü proje dizininizde bir `web.config` bulunmamaktadır. Otomatik olarak oluşturulması 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 App Service gezgininde, yeni uygulamanın düğümünü genişletin, Uygulama Ayarları üzerine 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 zamanında kurulum otomasyonunu etkinleştirir, bu da başlangıç script'ini otomatik olarak algılar ve onunla birlikte web.config dosyasını 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ğunuzdan emin olun ve kodu yerel klasörünüzdeki (myExpressApp) az webapp up komutunu kullanarak dağıtın.

Linux'a dağıtma

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

Windows'a dağıt

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

• 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.
• Azure genelinde benzersiz olan bir adla <app_name>'i değiştirin. (Geçerli karakterler a-z, 0-9ve -.) İyi bir desen, şirketinizin adıyla uygulama tanımlayıcısının bir birleşimini kullanmaktır.
• --sku F1 argümanı, ücretsiz fiyatlandırma katmanında maliyetsiz olarak web uygulaması oluşturur.
• İsteğe bağlı olarak --location <location-name> argümanını, <location_name> geçerli bir Azure bölgesi olduğunda ekleyebilirsiniz. Azure hesabınız için izin verilen bölgelerin listesini az account list-locations komutunu çalıştırarak alabilirsiniz.
• Komut, varsayılan olarak Node.js için bir Linux uygulaması oluşturur. Bunun yerine bir Windows uygulaması oluşturmak için --os-type argümanını kullanın.
• Eğer "Uygulamanızın çalışma zamanı yığını otomatik olarak algılanamadı" hatasını görüyorsanız, komutu myExpressApp dizininde çalıştırdığınızdan emin olun (bkz. az webapp up ile otomatik algılama sorunlarını giderme).

Komutun tamamlanması birkaç dakika sürebilir. Çalışma sırasında, kaynak grubunun, App Service planının ve uygulama kaynağının oluşturulması, günlük kaydının yapılandırılması ve Zip dağıtımı hakkında mesajlar sağlar. Ardından uygulamanın Azure'da URL'si olan URL'sini içeren bir ileti döndürür.

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 <URL>
{
  "URL": "<URL>",
  "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"
}

Uyarı

az webapp up komutu aşağıdaki eylemleri yapar:

• Varsayılan bir kaynak grubu oluşturun.

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

• Bir uygulama oluşturun belirtilen adla.

• Zip dağıtım işlemini, yapı otomasyonu etkinleştirilmiş olarak, şu anki çalışma dizinindeki tüm dosyalar için yapın.

• Parametreleri yerel olarak .azure/config dosyasında önbelleğe alın, böylece proje klasöründen az webapp up veya diğer az webapp komutlarıyla daha sonra dağıtırken bunları tekrar belirtmenize gerek kalmaz. Önbelleğe alınmış değerler varsayılan olarak otomatik kullanılır.

Azure portal'a giriş yap

Azure portalınaoturum açın.

Azure kaynakları oluşturun

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

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

   

3. Ö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ında Node 18 LTS, bir İşletim Sistemi ve uygulamanıza hizmet vermek istediğiniz bir Bölge seçin.

   

4. App Service Plan altında, bir App Service planı oluşturmak için Yeni oluştur'u seçin. Ad olarak myAppServicePlan yazın. Ücretsiz katmana geçmek için Boyutu değiştir'i seçin, Geliştirme/Test sekmesini seçin, F1'i seçin ve ardından sayfanın altındaki Uygula butonuna tıklayın.

   

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

   

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

7. 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, FileZilla ile kullanmak üzere uygulama kapsamı kimlik bilgilerini alırsınız.

1. Uygulama Servisi uygulama sayfasından, sol menüdeki Deployment Center'ı seçin ve ardından FTPS kimlik bilgileri sekmesini seçin.

   

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

3. FTPS kimlik bilgileri sekmesinden, FTPS endpoint, Kullanıcı Adı ve Parola'yı FileZilla'ya kopyalayın.

   

4. FileZilla'da 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. Mesajın Welcome to Express'den Welcome to Azure'e değiştiğini görmelisiniz.

2. Değişikliklerinizi kaydedin, ardından uygulamayı Linux için argümansız olarak tekrar az webapp up komutunu kullanarak yeniden dağıtın. Windows için --os-type Windows ekle:

   az webapp up
   

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

3. Dağıtım tamamlandıktan sonra web sayfasını yenileyin. Mesajın Welcome to Express'den Welcome to Azure'e değiştiğini görmelisiniz.

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. Mesajın Welcome to Express'den Welcome to Azure'e değiştiğini görmelisiniz.

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. App Service gezgininde, uygulama düğümüne sağ tıklayın ve Günlük Akışını 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.

az webapp log tail

Komut, .azure/config dosyasında önbelleğe alınmış kaynak grup adını kullanır.

Dağıtım sırasında günlük akışını otomatik olarak açmak için --logs komutu ile birlikte parametresini de ekleyebilirsiniz.

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. Aynı App Service sayfasında, uygulamanız için sol menüyü 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'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 seçeneğini 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 işlem 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 ihtiyacınız olmayacağını düşünüyorsanız, aşağıdaki komutu çalıştırarak kaynak grubunu silin:

az group delete --no-wait

Komut, .azure/config dosyasında önbelleğe alınmış kaynak grup adını kullanır.

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

   

Sonraki adımlar

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

  Azure App Service uygulamanızı özel bir alan adı ve yönetilen bir sertifika ile güvence altına alın

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

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

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