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ıç, Ü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. 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. Ad, tüm Azure'da benzersiz olmalı ve yalnızca alfasayısal karakterlerle (A-Z, a-z ve 0-9) ve kısa çizgilerle (-) oluşturulmalı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ğ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|24",
  "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 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, 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. Welcome to Express mesajının Welcome to Azure olarak değiştirildiğini görebilmelisiniz.

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 mesajının Welcome to Azure olarak değiştirildiğ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. 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.

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

   

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