JavaScript uygulamasını Azure'a dağıtmaya genel bakış

JavaScript tabanlı uygulamanızı Azure'a dağıtmak için, bir dosya veya dosya kümesini HTTP uç noktası aracılığıyla sunulmak üzere Azure'a taşırsınız. Dosyaları taşıma işlemi dağıtım olarak adlandırılır.

Önkoşullar

• Azure aboneliği - ücretsiz bir tane oluşturun.
• Node.js LTS
• GitHub deposundan dağıtım yapmayı planlıyorsanız bir GitHub hesabı.

Dağıtım araçları

Azure, farklı gereksinimlere uygun çeşitli dağıtım araçları sunar. Bazı yaygın yöntemler şunlardır:

Yöntem	Detaylar
Azure Geliştirici CLI	Komut satırı araçlarını tercih eden ve kaynakların sağlanmasını ve dağıtımını otomatikleştirmesi gereken geliştiriciler için idealdir.
Visual Studio Code Uzantıları	El ile, test veya seyrek dağıtımlar için uygundur. İlgili Azure uzantılarının yerel olarak yüklenmesini gerektirir.
Azure CLI	El ile veya ara sıra dağıtımlar için kullanışlıdır. Azure CLI'nın yerel olarak yüklenmesini gerektirir.
GitHub Eylemleri	GitHub deponuzdaki değişiklikler tarafından tetiklenen otomatik veya sürekli dağıtımlar için en iyi yöntemdir.

Belirli bir hizmete bağlı olarak başka dağıtım araçları da mevcuttur. Örneğin, Azure app service çok çeşitli dağıtım araçlarını destekler:

• ZIP dosyasından
• FTP ile
• Dropbox veya OneDrive
• Yerel Git
• cURL
• SSH

Başlangıçta dağıtmak için bu yöntemi kullanmamış olsanız bile sağlanan yöntemlerden herhangi birini kullanarak App Service'inize yeniden dağıtabilirsiniz. Yöntemleri değiştiriyorsanız yeniden dağıtmadan önce bazı yapılandırmalarınız olabilir.

JavaScript uygulamaları için Azure barındırma hizmetleri

Uygulamanızla en iyi eşleşen barındırma hizmetini seçerek başlayın. Bir hizmet seçtikten sonra, doğru öğreticiye daha hızlı ulaşmak için önerilen dağıtım yolunu kullanın.

Hizmet	En iyi kullanım alanları	Temel özellikler	Önerilen yol
Azure Static Web Apps	React, Vue veya Angular gibi statik ön uçlara sahip modern web uygulamaları ve isteğe bağlı sunucusuz API'ler.	Ücretsiz SSL, küresel CDN, pull request’ler için hazırlık ortamları ve entegre kimlik doğrulama.	Azure Static Web Apps’e Dağıtın ile başlayın.
Azure App Service	Tam özellikli web uygulamaları ve REST API'leri.	Yerleşik otomatik ölçeklendirme, dağıtım yuvaları ve Azure hizmetleriyle kolay tümleştirme.	Azure Geliştirici CLI ile dağıtma veya Visual Studio Code ile dağıtma ile başlayın.
Azure İşlevleri	Olay odaklı sunucusuz uygulamalar ve mikro hizmetler.	Yürütme başına ödeme fiyatlandırması, otomatik ölçeklendirme ve birden çok tetikleyici ve bağlama.	Visual Studio Code ile dağıt ile başlayın ve Azure İşlevleri'a dağıtmaya devam edin.
Azure Container Apps	Kapsayıcılı uygulamalar ve mikro hizmetler.	Kubernetes destekli sunucusuz kapsayıcılar, Dapr tümleştirmesi ve olay odaklı ölçeklendirme.	Azure Container Apps’e Dağıt ile başlayın.

Doğru barındırma hizmetini seçme hakkında daha fazla bilgi için bkz. Azure'da uygulamaları barındırma.

Araçlarla dağıtım yöntemleri

Bir barındırma hizmeti seçtikten sonra, çalışma şeklinize uygun dağıtım yöntemini seçin.

• Dağıtımdan önce derleme: Karmaşık veya uzun derlemeler için uygulamanızı bir zip dosyasına paketleyin ve dağıtın. Dağıtım paketi, dağıtımdan önce derlemeyi denetlemenize ve test etmenizi sağlar.
• Dağıtım sırasında derleme: Daha basit derlemeler için azure tarafından sağlanan ortam değişkenini SCM_DO_BUILD_DURING_DEPLOYMENT=true kullanarak uygulamanızı dağıtım sırasında derleyin.

App Service'e dağıtıyorsanız, diğer dağıtım yöntemleri de kullanılabilir:

Azure App Service'te Dağıtım yuvaları, hazırlama ve üretim için ayrı ortamlar oluşturmanıza olanak tanır. Slotların kullanımı, uygulamanızı üretim slotu ile değiştirmeden önce hazırlık ortamında test etmenizi sağlayarak sorunsuz ve hatasız bir dağıtım sağlar. Dağıtım yuvaları hakkında daha fazla bilgi edinin.

Dağıtım amaçlarını karıştırmak için dağıtım yuvalarını kullanmayın. Tüm dağıtım yuvaları app service'i paylaşır, bu nedenle trafik desenlerinin ve tüm yuvaların kullanım amacının aynı olduğundan emin olmanız gerekir. Ayrı bir uygulama hizmeti olarak barındırılması gereken bir test veya aşama ortamına ihtiyacınız varsa.

Azure Geliştirici CLI ile dağıtma

Azure kaynakları sağlama ve uygulamanızı dağıtmaya yönelik en hızlı uçtan uca yol için Azure Geliştirici CLI'sı (azd) ile başlayın.

Azure Geliştirici CLI'sı, uygulamanızı Azure dağıtma sürecini basitleştirir. Şu adımları izleyin:

1. Azure Geliştirici CLI'yi yükleyin.

2. Projenizin kullandığı kaynakların birçoğunun kullanıldığı mevcut bir projeyi bulun.

3. Kendi projeniz için altyapı şablonu olarak kullanmak üzere projenin yerel bir sürümünü başlatın.

4. Kaynakları oluşturun ve kodu Azure'a dağıtın.

   azd auth login
   azd init --template <template-name>
   azd up
   

Altyapı, dağıtım ve yinelenebilir ortamlar için bir iş akışı istediğinizde bu yolu kullanın.

Visual Studio Code ile dağıtma

Düzenleyicinizde destekli dağıtım akışı istiyorsanız Visual Studio Code için Azure uzantılarını kullanın.

Visual Studio Code kullanarak App Service uygulamanızı dağıtmak veya yeniden dağıtmak için aşağıdaki adımları tamamlayın:

1. Azure App Service veya Azure İşlevleri gibi ilgili Azure uzantılarını yükleyin.

2. Azure gezginini açın. Birincil yan çubukta Azure simgesini seçin veya klavye kısayolunu kullanın (Shift + Alt + A).

3. Kaynak grubunda aboneliğinizi ve hizmetinizi seçin.

4. Hizmetinize sağ tıklayın ve Web Uygulamasına Dağıt... öğesini seçin..

   

Hizmete özgü sonraki adımlar

Bir barındırma hizmeti ve dağıtım yöntemi seçtikten sonra, uygulamanızla eşleşen hizmete özgü yola devam edin.

Azure Static Web Apps'e dağıtın

Azure Static Web Apps, JavaScript çerçeveleriyle oluşturulmuş modern web uygulamaları için idealdir. Dağıtım için:

1. Visual Studio Code için Azure Static Web Apps uzantısını yükleyin.
2. Uygulamanızın beklendiği gibi çalıştığından emin olmak için yerel olarak oluşturun.
3. Visual Studio Code'da Azure gezginini açın ve Azure Static Web Apps bulun.
4. Aboneliğinize sağ tıklayın ve ardından Statik Web Uygulaması Oluştur'u seçin.
5. GitHub deponuzu bağlamak için istemleri izleyin. Azure otomatik olarak bir GitHub Actions iş akışı oluşturur.
6. Otomatik dağıtımları tetikleyebilmek için deponuza değişiklikleri gönderin.

Diğer ayrıntılar için bkz. Web uygulamanızı Azure Static Web Apps'e dağıtma.

Azure App Service’e Dağıt

Azure App Service, bir web uygulaması veya API için yönetilen barındırmaya ihtiyacınız olduğunda iyi bir uyum sağlar. , Visual Studio Code, Azure CLI veya GitHub Actions kullanarak azddağıtabilirsiniz.

Başlangıçta dağıtmak için bu yöntemi kullanmamış olsanız bile kullanılabilir yöntemlerden herhangi birini kullanarak App Service'inize yeniden dağıtabilirsiniz. Yöntemleri değiştiriyorsanız yeniden dağıtmadan önce yapılandırma yapmanız gerekebilir.

Hizmete özgü bir dağıtım yolu için şu öğreticilerden biriyle başlayın:

• Azure App Service'a bir Node.js ve MongoDB web uygulaması dağıtma
• GitHub Actions kullanarak App Service'e dağıtma
• ZIP paketlerinden App Service'e dağıtma

Azure CLI ile dağıtma

JavaScript uygulamanızı Azure CLI kullanarak dağıtmak için şu adımları izleyin:

1. Henüz sahip değilseniz Azure CLI yükleyin.

2. Azure hesabınızda oturum açın.

   az login
   

3. Mevcut bir App Service planı ve App Service uygulaması oluşturun veya kullanın.

   az appservice plan create --name <plan-name> --resource-group <resource-group> --sku B1 --is-linux
   az webapp create --resource-group <resource-group> --plan <plan-name> --name <app-name> --runtime "NODE|20-lts"
   

4. Uygulama kodunuzu ZIP dosyası olarak veya yerel git deposundan dağıtın.

   ZIP dağıtımı için:

   az webapp deployment source config-zip --resource-group <resource-group> --name <app-name> --src <path-to-zip>
   

   Yerel Git dağıtımı için:

   az webapp deployment source config-local-git --resource-group <resource-group> --name <app-name>
   az webapp config appsettings set --resource-group <resource-group> --name <app-name> --settings DEPLOYMENT_BRANCH='main'
   git remote add azure <git-url>
   git push azure main
   

GitHub Eylemleriyle dağıtma

GitHub Actions, GitHub deponuza her değişiklik gönderdiğinizde dağıtım işleminizi otomatikleştirir. Azure dağıtımı için GitHub Actions ayarlamak için:

1. GitHub deponuzda yoksa bir .github/workflows/ dizin oluşturun.

2. Dağıtım adımlarınızı tanımlayan bir iş akışı dosyası (örneğin, azure-deploy.yml) oluşturun.

3. Azure ile kimlik doğrulaması yapmak için Azure oturum açma eylemi kullanın. Önerilen: Kimlik bilgilerini gizli dizi olarak depolamak yerine gelişmiş güvenlik için OpenID Connect (OIDC) kullanın.

   Seçenek A: OpenID Connect (önerilir)

   permissions:
     id-token: write
     contents: read
   
   - name: Azure Login
     uses: azure/login@v2
     with:
       client-id: ${{ secrets.AZURE_CLIENT_ID }}
       tenant-id: ${{ secrets.AZURE_TENANT_ID }}
       subscription-id: ${{ secrets.AZURE_SUBSCRIPTION_ID }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

   Kurulum yönergeleri için bkz. OpenID Connect'i GitHub Actions ile yapılandırma.

   Seçenek B: Kimlik bilgisi tabanlı kimlik doğrulaması (eski)

   - name: Azure Login
     uses: azure/login@v2
     with:
       creds: ${{ secrets.AZURE_CREDENTIALS }}
   
   - name: Deploy to Azure Web App
     uses: azure/webapps-deploy@v3
     with:
       app-name: <app-name>
       package: '.'
   

4. Barındırma hizmetiniz (App Service, Static Web Apps veya Container Apps) için uygun dağıtım adımları ekleyin.

5. Otomatik dağıtımları etkinleştirmek için iş akışı dosyasını commit edin ve deponuza push edin.

Daha ayrıntılı yönergeler için bkz. GitHub Actions ile dağıtma.

Azure İşlevleri'a dağıtım yap

Azure İşlevleri, olay odaklı JavaScript uygulamaları ve sunucusuz API'ler için uygundur.

Visual Studio Code’dan dağıtım yapmak için:

1. Azure İşlevleri uzantısını yükleyin.
2. Azure gezginini açın ve Azure aboneliğinizi seçin.
3. İşlev uygulamanızı oluşturun veya seçin.
4. Yerel projenizi yayımlamak için uzantı komutlarını kullanın.

Hizmet kılavuzu için bkz. Azure İşlevleri belgelere ve İşlevlere genel bakış.

Azure Container Apps'a dağıtım

Azure Container Apps, JavaScript uygulamaları için sunucusuz kapsayıcı barındırma sağlar. Dağıtım için:

1. Docker kullanarak uygulamanızı kapsayıcılı hale getirme. Proje kökünüzde bir Dockerfile oluşturun.
2. Kapsayıcınızı yerel olarak oluşturun ve test edin.
3. Kapsayıcı görüntünüzü Azure Container Registry'ye gönderin.
4. Kapsayıcı uygulamanızı oluşturmak ve dağıtmak için Azure Container Apps uzantısını veya Azure CLI'yi kullanın.

Eksiksiz bir kılavuz için bkz. Azure Container Apps'te JavaScript'e genel bakış.

Yapı adımları

Hizmetinizi ve dağıtım yolunuzu seçtikten sonra derlemenin ne zaman gerçekleşeceğine karar verin.

Uygulamanızın karmaşıklığı ve dağıtım gereksinimlerine bağlı olarak, JavaScript uygulamanızı dağıtımdan önce veya dağıtım sırasında oluşturmayı seçebilirsiniz:

• Dağıtımdan önce derleme: Karmaşık veya uzun derlemeler için uygulamanızı bir zip dosyasına paketleyin ve dağıtın. Dağıtım paketi, derleme işlemi üzerinde denetim sağlar ve dağıtımdan önce test etmenizi sağlar.
• Dağıtım sırasında derleme: Daha basit derlemeler için, dağıtım sırasında uygulamanızı derlemek için Azure sağlanan ortam değişkenini SCM_DO_BUILD_DURING_DEPLOYMENT=true kullanın.

Dağıtım yuvaları

Çalışan bir App Service uygulamasına sahip olduktan ve daha güvenli bir sürüm sürecine ihtiyaç duyduğunuzda dağıtım yuvalarını kullanın.

Azure App Service'te Dağıtım yuvaları, hazırlama ve üretim için ayrı ortamlar oluşturmanıza olanak tanır. Dağıtım yuvalarını kullanarak, uygulamanızı üretim yuvasıyla yer değiştirmeden önce hazırlama ortamında test edebilir, böylece sorunsuz ve hatasız bir dağıtım gerçekleştirmenizi sağlayabilirsiniz.

Dağıtım amaçlarını karıştırmak için dağıtım yuvalarını kullanmayın. Tüm dağıtım yuvaları App Service'i paylaştığından, trafik desenlerinin ve tüm yuvaların kullanım amacının aynı olduğundan emin olmanız gerekir. Barındırılan bir test veya aşama ortamına ihtiyacınız varsa ayrı bir App Service kullanın.

Azure barındırılan ortamınıza bağlanma

• Barındırılan ortamlarınıza manuel veya ara sıra erişim için, Azure barındırılan ortamınızdaki dosyaları nasıl görüntüleyebileceğiniziinceleyin.
• otomatik veya tutarlı erişim için dağıtım yöntemlerinden birini ayarlama adımlarını atmayı göz önünde bulundurun.

Azure'da barındırılan ortamda dosyaları görüntüleme

Barındırılan Azure Web uygulamanızda veya İşlev uygulamanızda dosyaları hemen görmenin birkaç yolu vardır. Barındırılan kaynağınızda yuvalar kullanıyorsanız, dosyaları görüntülemeden önce doğru yuvada olduğunuzdan emin olmanız gerekir.

• Azure portalında dosyaları görüntüleyin - Barındırma kaynağınız için Geliştirme araçları altından Konsol'u seçin.

• VS Code uzantısında dosyaları görüntüleme - Etkinlik çubuğundaki Azure simgesini seçin. Kaynaklar bölümünde aboneliğinizi ve hizmetinizi seçin. Dosyalar düğümü uzak dosyalarınızın bir görünümünü sağlar.

  • Azure App Service ve Azure İşlevleri uzantılarının her ikisi de uzak dosyaların görünümünü sağlar.

  

Azure portalında HTTP uç noktasını görüntüleme

Hizmetin Azure portalındaki Genel Bakış sayfasından HTTP uç noktanızı görüntüleyin.

İlgili içerik

• Visual Studio Code kullanarak dağıtım kılavuzları
• Azure'da uygulama barındırma
• Azure Static Web Apps belgeleri
• Azure Container Apps belgeleri
• Azure App Service belgeleri
• Azure İşlevleri belgeleri