Visual Studio Code'u kullanarak Azure App Service'e dağıtma

Bu öğreticide, Azure uzantısına dağıtın'ı kullanarak Node.js bir CI/CD Azure App Service işlem hattı ayarlama adımlarını adım adım adım bulabilirsiniz.

Önkoşullar

• Azure hesabı. Yoksa, ücretsiz oluşturabilirsiniz.

• Visual Studio Code paketi yöneticisiNode.js npm ve Node.js uzantılarıyla birlikte yüklemeniz gerekir:

• Azure Hesabı uzantısına ve Azureuzantısına dağıtmaya ihtiyacınız vardır

• Depo GitHub bir hesaptır. Microsoft hesabınız yoksa ücretsiz olarak oluşturabilirsiniz.

Uygulama Node.js oluşturma

Buluta Node.js bir uygulama oluşturun. Bu öğreticide, uygulamayı terminalden hızlıca iskeleye atıf yapmak için bir uygulama oluşturucu 2.

Express Generator'i yükleme

Express, uygulama uygulamalarının yenilerini ve çalıştırmayı Node.js çerçevedir. Express Generator aracını kullanarak yeni bir Express uygulamasının iskelesini oluşturabilirsiniz. Express Generator bir npm modülü olarak gönderilir ve npm komut satırı aracı kullanılarak npm yüklenir.

Terminalden aşağıdakini çalıştırarak Express Generator'ı yükleyin:

npm install -g express-generator

anahtar, -g Express Generator'ın makinenize genel olarak yüklerini, böylece herhangi bir yerden çalıştırabilirsiniz.

Yeni bir uygulamanın iskelesi

Artık şu çalıştırarak adlı yeni bir Express uygulamasının myExpressApp iskelesini ayazabilirsiniz:

express myExpressApp --view pug --git

Bu işlem, uygulama içeriğini içeren myExpressApp adlı yeni bir klasör oluşturur. Parametreler --view pug oluşturucuya pug şablon altyapısını --view pug adı Jade) kullanmalarını söyler.

Uygulamanın tüm bağımlılıklarını (yine npm modülleri olarak gönderilir) yüklemek için yeni klasöre gidin ve npm install yürütün:

cd myExpressApp
npm install

Bu noktada uygulamamızın çalışır durumda olduğunu test etmek gerekir. Oluşturulan Express uygulamasının çalıştıracak package.json başlangıç betiği içeren bir dosyası node ./bin/www vardır. Bu, uygulamanın Node.js başlar.

Uygulamayı çalıştırma

1. Express uygulaması klasöründeki bir terminalden şu çalıştırın:

   npm start

   Web Node.js sunucusu başlar ve çalışan uygulamayı görmek http://localhost:3000 için göz atabilirsiniz.

2. Bu projeyi komut satırı kullanarak GitHub bu bağlantıyı izleyin.

3. Uygulama klasörlerinizi azure'VS Code açın ve Azure'a dağıtmaya hazır olun.

Uzantıyı yükleme

1. Uzantılar görünümünü, uzantının yan tarafındaki Etkinlik Çubuğu'na veya Görünüm: Uzantılar VS Code tıklayarak getirin.

2. Azure uzantısına dağıt ve yükle için arama yapabilirsiniz.

   

3. Yükleme tamamlandıktan sonra uzantı etkin uzantı alanı içinde bulunur.

   

CI/CD İşlem Hattını Ayarlama

Artık Azure App Services, Azure İşlev Uygulaması ve AKS'ye dağıtım VS Code. Bu VS Code uzantısı, Azure App Services için sürekli derleme ve dağıtım ayarlamanıza yardımcı olur ve VS Code.

Bu hizmeti kullanmak için uzantıyı VS Code. Uzantılara göz atabilir ve uzantılar yüklemek için VS Code.

İş akışlarının birleşimi

Bu tür GitHub eylemleri ve Azure Pipelines GitHub & Azure Repos destekliyoruz. Ayrıca kodu Azure Pipelines yönetmeye devam ediyorsanız yeni bir GitHub.

GitHub + GitHub Actions

1. İşlem hattı ayarlamak için komut Deploy to Azure: Configure CI/CD Pipeline paleti (Ctrl/Cmd + Shift + P) seçeneğini kullanın veya dosya gezginine sağ tıklayın.

   

   Not

   Kod çalışma alanında açık yoksa klasör konumunu sorar. Benzer şekilde, çalışma alanında kod birden fazla klasöre sahipse, klasör sorar.

2. Listeden oluşturmak istediğiniz işlem hattı şablonunu seçin. öğesini hedefleyelirken Node.js öğesini seçin Node.js with npm to App Service.

   

3. Uygulamanızı dağıtmak için hedef Azure Aboneliğini seçin.

   

4. Uygulamanızı dağıtmak için hedef Azure kaynağını seçin.

   

5. İş GitHub kullanılan gizli dizileri doldurmak için gereken kişisel erişim belirteci (PAT) GitHub girin. Kapsamı ve olarak repoadmin:repo_hook ayarlayın.

   

   İpucu

   Kod farklı Azure Repos izinlere ihtiyacınız vardır.

6. İş akışı GitHub Azure Pipeline'ın yapılandırması uzantı ayarına göre gerçekleşir. Kılavuzlu iş akışı, derleme ve dağıtma işlemini tanımlayan bir başlangıç YAML dosyası oluşturacak. Dağıtıma devam etmek için YAML dosyasını işleme.

   

   İpucu

   Azure Pipelines ve GitHub Actions tarafından sunulan tüm özellikleri kullanarak işlem GitHub özelleştirebilirsiniz.

7. Devam eden GitHub görmek için GitHub sitenize gidin.

   

8. Web Uygulaması URL'sini kullanarak Azure'da çalışan sitenize gidin http://{web_app_name}.azurewebsites.net ve içeriğini doğrulayın.

GitHub + Azure Pipelines

Kullanıcı ve çalışma alanı ayarlarınızı açmak için aşağıdaki VS Code kullanın:

• Windows/Linux'ta - Dosya > Tercihleri Ayarlar
• macOS'ta - Kod > Tercihleri Ayarlar

Tercihler: Ayarlar kısayolunu () kullanarak Komut Paleti' Ayarlar Ctrl+Shift+P düzenleyiciyi de Ctrl+, açabilirsiniz.

Ayarlar düzenleyicisini açıkken, aramak istediğiniz ayarları arayabilir ve keşfedebilirsiniz. Aşağıda gösterildiği gibi adı deployToAzure.UseAzurePipelinesForGithub arayın ve etkinleştirin.

1. İşlem hattı ayarlamak için komut Deploy to Azure: Configure CI/CD Pipeline paleti (Ctrl/Cmd + Shift + P) seçeneğini kullanın veya dosya gezginine sağ tıklayın.

   

   Not

   Kod çalışma alanında açık yoksa klasör konumunu sorar. Benzer şekilde, çalışma alanında kod birden fazla klasöre sahipse, klasör sorar.

2. Listeden oluşturmak istediğiniz işlem hattı şablonunu seçin. öğesini hedefleyelirken Node.js öğesini seçin Node.js with npm to App Service.

   

3. Uygulamanızı dağıtmak için hedef Azure Aboneliğini seçin.

   

4. Uygulamanızı dağıtmak için hedef Azure kaynağını seçin.

   

5. GitHub iş akışlarında kullanılan gizli dizileri doldurmak için gereken GitHub kişisel erişim belirteci (PAT) girin. Kapsamını ve olarak ayarlayın repoadmin:repo_hook .

   

   

6. Azure DevOps kuruluş seçin.

   

7. bir Azure DevOps projesi seçin.

   

8. GitHub iş akışı veya Azure işlem hattı yapılandırması, uzantı ayarına göre yapılır. Kılavuzlu iş akışı, derleme ve dağıtma işlemini tanımlayan bir başlatıcı YAML dosyası oluşturur. Dağıtıma devam etmek için YAML dosyasını yürütün .

   

   İpucu

   Azure Pipelines ve GitHub eylemleritarafından sunulan tüm özellikleri kullanarak işlem hattını özelleştirebilirsiniz.

9. işlem hattının devam ettiğini görmek için Azure DevOps projenize gidin.

   

10. Web uygulaması URL 'sini kullanarak Azure 'da çalışan sitenize gidin http://{web_app_name}.azurewebsites.net ve içeriğini doğrulayın.

Azure Repos + Azure Pipelines

1. Bir işlem hattı ayarlamak için, Deploy to Azure: Configure CI/CD Pipeline komut paletinden (Ctrl/Cmd + SHIFT + P) seçin veya dosya Gezgini 'ne sağ tıklayın.

   

   Not

   Kod çalışma alanında açılmadıysa, klasör konumunu sorar. Benzer şekilde, çalışma alanındaki kodun birden fazla klasörü varsa, klasörü sorar.

2. Listeden oluşturmak istediğiniz bir işlem hattı şablonu seçin. Hedefliyoruz Node.js , şunları seçin Node.js with npm to App Service.

   

3. Uygulamanızı dağıtmak için hedef Azure aboneliğini seçin.

   

4. Uygulamanızı dağıtmak için hedef Azure kaynağını seçin.

   

5. GitHub iş akışı veya Azure işlem hattı yapılandırması, uzantı ayarına göre yapılır. Kılavuzlu iş akışı, derleme ve dağıtma işlemini tanımlayan bir başlatıcı YAML dosyası oluşturur. Dağıtıma devam etmek için YAML dosyasını yürütün .

   

   İpucu

   Azure Pipelines ve GitHub eylemleritarafından sunulan tüm özellikleri kullanarak işlem hattını özelleştirebilirsiniz.

6. işlem hattının devam ettiğini görmek için Azure DevOps projenize gidin.

   

7. Web uygulaması URL 'sini kullanarak Azure 'da çalışan sitenize gidin http://{web_app_name}.azurewebsites.net ve içeriğini doğrulayın.

Sorun giderme

Sık karşılaşılan sorunları nasıl giderebileceğinizi öğrenin.

Sorun: web paketi App Service dağıtılamadı. Çakışma (kod: 409)

Çözüm: App Service yeniden başlatın ve sonra yeniden App Service için paketi dağıtın.

Sonraki adımlar

Depodaki bir Docker dosyası ile iş akışını deneyin.

Yardım ve destek

• Sorun giderme sayfamıza bakın
• Stack Overflowöneriler alın, sorularınızı gönderin, yanıtları arayın veya Azure DevOps geliştirici Communitybir özelliği önerin. Destek sayfası.