Aracılığıyla paylaş


Azure Pipelines için JavaScript'i özelleştirme

Kendi altyapınızı ayarlamak zorunda kalmadan JavaScript uygulamalarınızı oluşturmak için Azure Pipelines'ı kullanabilirsiniz. npm, Node, Yarn ve Gulp gibi JavaScript uygulamalarını derlemek, test etmek ve çalıştırmak için yaygın olarak kullandığınız araçlar, Azure Pipelines'da Microsoft tarafından barındırılan aracılara önceden yüklenir.

Node.js ve npm'nin önceden yüklenmiş sürümü için Microsoft tarafından barındırılan aracılara bakın. Microsoft tarafından barındırılan aracılara bu araçların belirli bir sürümünü yüklemek için, işleminizin başına Düğüm Aracı Yükleyicisi görevini ekleyin. Şirket içinde barındırılan bir aracı da kullanabilirsiniz.

JavaScript ile ilk işlem hattınızı oluşturmak için bkz . JavaScript hızlı başlangıcı.

Node.js'nin belirli bir sürümünü kullanma

Node.js ve npm'nin Microsoft tarafından barındırılan aracıda henüz yüklü olmayan bir sürümüne ihtiyacınız varsa Node aracı yükleyici görevini kullanın. Aşağıdaki kod parçacığını dosyanıza azure-pipelines.yml ekleyin.

Dekont

Barındırılan aracılar düzenli olarak güncelleştirilir ve bu görevin ayarlanması, işlem hattı her çalıştırıldığında daha yeni bir ikincil sürüme güncelleştirmeyi önemli ölçüde zaman harcamaya neden olur. Bu görevi yalnızca işlem hattınızda belirli bir Node sürümüne ihtiyacınız olduğunda kullanın.

- task: UseNode@1
  inputs:
    version: '16.x' # replace this value with the version that you need for your project

Node.js/npm'nin aracıda yüklü olmayan bir sürümüne ihtiyacınız varsa:

  1. İşlem hattında Görevler'i seçin, derleme görevlerinizi çalıştıran aşamayı seçin ve ardından bu aşamaya yeni bir görev eklemek için seçin+.

  2. Görev kataloğunda Düğüm Aracı Yükleyicisi görevini bulun ve ekleyin.

  3. Görevi seçin ve yüklemek istediğiniz Node.js çalışma zamanının sürümünü belirtin.

Yalnızca npm aracını güncelleştirmek için derleme işleminizde komutunu çalıştırın npm i -g npm@version-number .

Birden çok düğüm sürümü kullanma

Node aracı yükleyici göreviyle uygulamanızı node'un birden çok sürümünde derleyebilir ve test edebilirsiniz.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_16_x:
      node_version: 16.x
    node_13_x:
      node_version: 18.x

steps:
- task: UseNode@1
  inputs:
    version: $(node_version)

- script: npm install

Derleme aracınıza araçları yükleme

Projenizde package.json veya package-lock.json dosyanızda geliştirme bağımlılıkları olan araçlarınız varsa npm aracılığıyla araçlarınızı ve bağımlılıklarınızı yükleyin. Araçların tam sürümü projede tanımlanır ve derleme aracısında bulunan diğer sürümlerden yalıtılır.

Bir betik veya npm görevi kullanın.

package.json ile yüklemek için betik kullanma

- script: npm install --only=dev

package.json ile yüklemek için npm görevini kullanma

- task: Npm@1
  inputs:
     command: 'install'

Yol çözünürlüğünde bu şekilde yüklenen araçları algılayan npm npx paket çalıştırıcısını kullanarak bu şekilde yüklenen araçları çalıştırın. Aşağıdaki örnek, test çalıştırıcısını mocha çağırır, ancak genel olarak yüklenmiş (aracılığıyla npm install -g) bir sürüm kullanmadan önce geliştirme bağımlılığı olarak yüklenen sürümü arar.

- script: npx mocha

Projenizin ihtiyacı olan ancak içinde package.jsongeliştirme bağımlılıkları olarak ayarlanmamış araçları yüklemek için işlem hattınızdaki bir betik aşamasından çağrı npm install -g yapın.

Aşağıdaki örnek, kullanarak npmAngular CLI'nin en son sürümünü yükler. İşlem hattının geri kalanı aracı diğer script aşamalardan kullanabilirng.

Dekont

Microsoft tarafından barındırılan Linux aracılarında komutunun sudobaşına gibi sudo npm install -gyazın.

- script: npm install -g @angular/cli

Bahşiş

İşlem hattınız her çalıştırıldığında bu görevler çalıştırılır, dolayısıyla yükleme araçlarının derleme zamanları üzerindeki etkisine dikkat edin. Ek yük derleme performansınızı ciddi bir şekilde etkilerse ihtiyacınız olan araçların sürümüyle şirket içinde barındırılan aracıları yapılandırmayı göz önünde bulundurun.

Bağımlılıkları yönetme

Derlemenizde, paketleri genel npm kayıt defterinden indirmek için Yarn veya Azure Artifacts'i kullanın. Bu kayıt defteri, dosyada .npmrc belirttiğiniz bir özel npm kayıt defteri türüdür.

npm kullanma

Npm'yi derlemenize yönelik paketleri indirmek için aşağıdaki yollarla kullanabilirsiniz:

  • Kimlik doğrulaması olmadan bir kayıt defterinden paketleri indirmenin en kolay yolu olduğundan işlem hattınızda doğrudan çalıştırın npm install . Derlemenizin çalıştırılacak aracı üzerinde geliştirme bağımlılıklarına ihtiyacı yoksa, seçeneğiyle --only=prodnpm installderleme sürelerini hızlandırabilirsiniz.
  • Npm görevi kullanın. Bu görev, kimliği doğrulanmış bir kayıt defteri kullanırken kullanışlıdır.
  • Npm Kimlik Doğrulaması görevi kullanın. Bu görev, görev çalıştırıcılarınızın içinden (Gulp, Grunt veya Maven) çalıştırdığınızda npm install kullanışlıdır.

Npm kayıt defteri belirtmek istiyorsanız, URL'leri deponuzdaki bir .npmrc dosyaya yerleştirin. Akışınızın kimliği doğrulanırsa, kimlik bilgilerini yönetmek için Project ayarlarındaki Hizmetler sekmesinde bir npm hizmet bağlantısı oluşturun.

İşlem hattınızda bir betik içeren npm paketlerini yüklemek için aşağıdaki kod parçacığını öğesine azure-pipelines.ymlekleyin.

- script: npm install

Dosyanızda .npmrc belirtilen özel bir kayıt defterini kullanmak için aşağıdaki kod parçacığını öğesine azure-pipelines.ymlekleyin.

- task: Npm@1
  inputs:
    customEndpoint: <Name of npm service connection>

Gulp gibi görev çalıştırıcıları aracılığıyla npm komutlarına kayıt defteri kimlik bilgilerini geçirmek için, görev çalıştırıcısını azure-pipelines.yml çağırmadan önce öğesine aşağıdaki görevi ekleyin.

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

Npm kayıt defterinden paketleri geri yüklerken bağlantı sorunları nedeniyle derlemeleriniz zaman zaman başarısız olursa, yukarı akış kaynaklarıyla Azure Artifacts'i kullanabilir ve paketleri önbelleğe alabilirsiniz. Azure Artifacts'e bağlandığınızda işlem hattının kimlik bilgileri otomatik olarak kullanılır. Bu kimlik bilgileri genellikle Proje Koleksiyonu Derleme Hizmeti hesabından türetilir.

Microsoft tarafından barındırılan aracılar kullanıyorsanız, her derlemeyi çalıştırdığınızda yeni bir makine alırsınız; bu da bağımlılıkları her seferinde geri yüklemek anlamına gelir ve bu da önemli ölçüde zaman alabilir. Azaltmak için Azure Artifacts'i veya şirket içinde barındırılan bir aracıyı kullanabilirsiniz; ardından paket önbelleğini kullanmanın avantajını elde edersiniz.

Yarn kullanma

Bağımlılıkları geri yüklemek için Yarn'ı çağırmak için bir betik aşaması kullanın. Yarn, Microsoft tarafından barındırılan bazı aracılara önceden yüklenir. Diğer araçlar gibi şirket içinde barındırılan aracılara yükleyebilir ve yapılandırabilirsiniz.

- script: yarn install

Yarn'ı çağırmak için işlem hattınızda CLI veya Bash görevini kullanın.

JavaScript derleyicilerini çalıştırma

Kaynak kodunuzu Node.js çalışma zamanı veya web tarayıcılarında kullanılabilir sürümlere dönüştürmek için Babel ve TypeScripttsc derleyicisi gibi derleyicileri kullanın.

Proje package.json dosyanızda derleyicinizi çalıştıran bir betik nesnesi ayarladıysanız, bir betik görevi kullanarak bunu işlem hattınızda çağırabilirsiniz.

- script: npm run compile

Betik görevini kullanarak derleyicileri doğrudan işlem hattından çağırabilirsiniz. Bu komutlar kopyalanan kaynak kodu deposunun kökünden çalıştırılır.

- script: tsc --target ES6 --strict true --project tsconfigs/production.json

Birim testlerini çalıştırma

İşlem hatlarınızı JavaScript testlerinizi çalıştıracak şekilde yapılandırarak JUnit XML biçiminde biçimlendirilmiş sonuçlar üretmelerini sağlayın. Ardından yerleşik test sonuçlarını yayımlama görevini kullanarak sonuçları yayımlayabilirsiniz.

Test çerçeveniz JUnit çıkışını desteklemiyorsa, mocha-junit-reporter gibi bir iş ortağı raporlama modülü aracılığıyla destek ekleyin. Test betiğinizi JUnit muhabirini kullanacak şekilde güncelleştirebilir veya muhabir komut satırı seçeneklerini destekliyorsa bu seçenekleri görev tanımına geçirebilirsiniz.

Aşağıdaki tabloda en yaygın kullanılan test çalıştırıcıları ve XML sonuçları üretmek için kullanılabilecek muhabirler listelenir:

Test çalıştırıcısı XML raporları oluşturmak için muhabirler
Mocha mocha-junit-reporter
cypress-multi-reporters
yasemin yasemin-muhabirler
jest jest-junit
jest-junit-reporter
karma karma-junit-reporter
Ava tap-xunit

Aşağıdaki örnekte mocha-junit-reporter kullanılır ve doğrudan bir betik kullanılarak çağrılırmocha test. Bu betik JUnit XML çıkışını varsayılan konumunda ./test-results.xmlüretir.

- script: mocha test --reporter mocha-junit-reporter

project package.json dosyanızda bir test betik tanımladıysanız kullanarak betiği npm testçağırabilirsiniz.

- script: npm test

Test sonuçlarını yayımlama

Sonuçları yayımlamak için Test Sonuçlarını Yayımla görevini kullanın.

- task: PublishTestResults@2
  condition: succeededOrFailed()
  inputs:
    testRunner: JUnit
    testResultsFiles: '**/test-results.xml'

Kod kapsamı sonuçlarını yayımlama

Test betikleriniz İstanbul gibi bir kod kapsamı aracı çalıştırıyorsa Kod Kapsamı Sonuçlarını Yayımla görevini ekleyin. Bunu yaptığınızda, kapsam ölçümlerini derleme özetinde bulabilir ve daha fazla analiz için HTML raporlarını indirebilirsiniz. Görev Cobertura veya JaCoCo raporlama çıkışı bekler, bu nedenle kod kapsamı aracınızın doğru çıkışı oluşturmak için gerekli seçeneklerle çalıştığından emin olun. Örneğin, --report cobertura.

Aşağıdaki örnek, mocha-junit-reporter ile birlikte İstanbul komut satırı arabirimi nyc'yi kullanır ve komutu çağırırnpm test.

- script: |
    nyc --reporter=cobertura --reporter=html \
    npm test -- --reporter mocha-junit-reporter --reporter-options mochaFile=./test-results.xml
  displayName: 'Build code coverage report'

- task: PublishCodeCoverageResults@2
  inputs: 
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'

İstanbul'u kullanarak test sonuçlarını ve kod kapsamı sonuçlarını yayımlamak için işlem hattınızda Test Sonuçlarını Yayımla ve Kod Kapsamı Sonuçlarını Yayımla görevlerini kullanın.

Test Sonuçlarını Yayımla görevinin Denetim Seçenekleri'ni, dağıtım iptal edilmediği sürece, önceki bir görev başarısız olsa bile görevi çalıştıracak şekilde ayarlayın.

Tarayıcıyı uçtan uca test etme

Protractor veya Karma gibi araçlarla işlem hattınızın bir parçası olarak başsız tarayıcılarda testler çalıştırın. Ardından aşağıdaki adımlarla derlemenin sonuçlarını Azure DevOps'ta yayımlayın:

  1. Derleme aracısı üzerine başsız Chrome veya Firefox gibi başsız bir tarayıcı test sürücüsü veya PhantomJS gibi bir tarayıcı sahte aracı yükleyin.
  2. Test çerçevenizi, aracın belgelerine göre tercih ettiğiniz başsız tarayıcı/sürücü seçeneğini kullanacak şekilde yapılandırın.
  3. JUnit biçimli test sonuçlarının çıktısını almak için test çerçevenizi (genellikle bir muhabir eklentisi veya yapılandırmasıyla) yapılandırın.
  4. Başsız tarayıcı örneklerini başlatmak için gereken CLI komutlarını çalıştırmak için bir betik görevi ayarlayın.
  5. Birim testlerinizle birlikte işlem hattı aşamalarında uçtan uca testleri çalıştırın.
  6. Birim testlerinizle birlikte aynı Test Sonuçlarını Yayımla görevini kullanarak sonuçları yayımlayın.

Web uygulamalarını paketleme

Tüm uygulama modüllerinizi ara çıkışlarla ve bağımlılıklarla birlikte dağıtıma hazır statik varlıklara paketlemek için uygulamaları paketleyin. Angular CLI kullanarak webpack veya ng derlemesi gibi bir araç çalıştırmak için derlemenizin ve testlerinizin ardından bir işlem hattı aşaması ekleyin.

İlk örnek öğesini çağırır webpack. Bu işi yapmak için package.json proje dosyanızda geliştirme bağımlılığı olarak yapılandırıldığından emin olun webpack . Projenizin kök klasöründe bir webpack.config.js dosya yoksa, bu varsayılan yapılandırmayla çalışırwebpack.

- script: webpack

Sonraki örnek, project package.json dosyasında tanımlanan betik nesnesini çağırmak build için npm görevini npm run build kullanır. Projenizde betik nesnelerinin kullanılması, derlemenin mantığını kaynak koduna ve işlem hattı dışına taşır.

- script: npm run build

JavaScript çerçeveleri uygulama

Angular

Angular uygulamaları için ng testi, ng derlemesi ve ng e2e gibi Angular'a özgü komutları ekleyebilirsiniz. İşlem hattınızda Angular CLI komutlarını kullanmak için derleme aracısına angular/cli npm paketini yükleyin.

Dekont

Microsoft tarafından barındırılan Linux aracılarında komutunun sudobaşına gibi sudo npm install -gyazın.

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod

İşlem hattınıza aşağıdaki görevleri ekleyin:

  • npm

    • Komut:custom
    • Komut ve bağımsız değişkenler:install -g @angular/cli
  • npm

    • Komut:install
  • bash

    • Türinline:
    • Komut dosyası:ng build --prod

İşlem hattınızda, karma çalıştıran başlangıç uygulamasındaki ng test komutu gibi bir tarayıcının çalıştırılmasını gerektiren testler için standart tarayıcı yerine başsız bir tarayıcı kullanın. Angular başlangıç uygulamasında:

  1. browsers karma.conf.js proje dosyanızdaki girdiyi browsers: ['ChromeHeadless']olarak browsers: ['Chrome'] değiştirin.

  2. singleRun karma.conf.js proje dosyanızdaki girdiyi değerini falsetrueolarak değiştirin. Bu değişiklik Karma işleminin çalıştıktan sonra durdurulmasını sağlar.

React ve Vue

React ve Vue uygulamalarınıza yönelik tüm bağımlılıklar package.json dosyanızda yakalanır. azure-pipelines.yml dosyanız standart Node.js betiğini içerir:

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

Derleme dosyaları yeni bir klasörde dist (Vue için) veya build (React için) bulunur. Bu kod parçacığı yayına hazır bir yapıt www oluşturur. Düğüm Yükleyicisi, DosyaKopyalama ve Derleme Yapıtlarını Yayımlama görevlerini kullanır.

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm run build
  displayName: 'npm build'

- task: CopyFiles@2
  inputs:
    Contents: 'build/**' # Pull the build directory (React)
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1
  inputs: 
    PathtoPublish: $(Build.ArtifactStagingDirectory) # dist or build files
    ArtifactName: 'www' # output artifact named www

Yayınlamak için, yayın görevinizi veya yapıtına dist işaret edin ve Azure Web App Dağıtma görevini kullanın.build

Webpack

JSX veya TypeScript'i düz JavaScript'e çevirmek ve uygulamanızı paketlemek için Babel veya TypeScript gibi bir derleyici belirtmek için bir webpack yapılandırma dosyası kullanabilirsiniz.

- script: |
    npm install webpack webpack-cli --save-dev
    npx webpack --config webpack.config.js

İşlem hattınıza aşağıdaki görevleri ekleyin:

  • npm

    • Komut:custom
    • Komut ve bağımsız değişkenler:install -g webpack webpack-cli --save-dev
  • bash

    • Türinline:
    • Komut dosyası:npx webpack --config webpack.config.js

Görev çalıştırıcıları oluşturma

JavaScript uygulaması derlemek ve test etmek için Gulp veya Grunt'ı görev çalıştırıcısı olarak kullanmak yaygın bir durumdur.

Gulp

Gulp, Microsoft tarafından barındırılan aracılara önceden yüklenir. gulp YAML dosyasında komutunu çalıştırın:

- script: gulp                       # include any additional options that are needed

gulpfile.js dosyanızdaki adımlar npm kayıt defteriyle kimlik doğrulaması gerektiriyorsa:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: gulp                       # include any additional options that are needed

JUnit veya xUnit test sonuçlarını sunucuda yayımlamak için Test Sonuçlarını Yayımla görevini ekleyin.

- task: PublishTestResults@2
  inputs:
    testResultsFiles: '**/TEST-RESULTS.xml'
    testRunTitle: 'Test results for JavaScript using gulp'

Kod kapsamı sonuçlarını sunucuda yayımlamak için Kod Kapsamı Sonuçlarını Yayımla görevini ekleyin. Kapsam ölçümlerini derleme özetinde bulabilir ve daha fazla analiz için HTML raporlarını indirebilirsiniz.

- task: PublishCodeCoverageResults@1
  inputs: 
    codeCoverageTool: Cobertura
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

Uygulamanız Gulp kullanıyorsa işlem hattı oluşturmanın en kolay yolu, işlem hattını oluştururken Node.js dosyasını gulp derleme şablonuyla kullanmaktır. Bu şablon, Gulp komutlarını çağırmak ve yapıtları yayımlamak için otomatik olarak çeşitli görevler ekler. Görevde, İstanbul'u kullanarak kod kapsamını etkinleştirmek için Kod Kapsamını Etkinleştir'i seçin.

Grunt

Grunt, Microsoft tarafından barındırılan aracılara önceden yüklenmiş olarak gelir. YAML dosyasında grunt komutunu çalıştırmak için:

- script: grunt                      # include any additional options that are needed

Dosyanızdaki Gruntfile.js adımlar npm kayıt defteriyle kimlik doğrulaması gerektiriyorsa:

- task: npmAuthenticate@0
  inputs:
    customEndpoint: <Name of npm service connection>

- script: grunt                      # include any additional options that are needed

Uygulamanız Grunt kullanıyorsa işlem hattı oluşturmanın en basit yolu, işlem hattını oluştururken Node.js ile Grunt derleme şablonunu kullanmaktır. Bu, Gulp komutlarını çağırmak ve yapıtları yayımlamak için otomatik olarak çeşitli görevler ekler. Görevde, test sonuçlarını yayımlamak için TFS/Team Services'da Yayımla seçeneğini belirleyin ve İstanbul'u kullanarak kod kapsamını etkinleştirmek için Kod Kapsamını Etkinleştir'i seçin.

Kodunuzu paketleyip teslim edin

Uygulamanızı derleyip test ettikten sonra derleme çıkışını Azure Pipelines'a yükleyebilir, npm veya Maven paketi oluşturup yayımlayabilir veya derleme çıkışını bir web uygulamasına dağıtım için bir .zip dosyasına paketleyebilirsiniz.

Azure Pipelines'da dosya yayımlama

Dosyaların çalışma dizininin tamamını karşıya yüklemek için Derleme Yapıtlarını Yayımla görevini kullanın ve aşağıdakini dosyanıza azure-pipelines.yml ekleyin.

- task: PublishBuildArtifacts@1
  inputs:
    PathtoPublish: '$(System.DefaultWorkingDirectory)'

Dosyaların bir alt kümesini karşıya yüklemek için, önce çalışma dizinindeki gerekli dosyaları Dosyaları Kopyala göreviyle bir hazırlama dizinine kopyalayın ve ardından Derleme Yapıtlarını Yayımla görevini kullanın.

- task: CopyFiles@2
  inputs:
    SourceFolder: '$(System.DefaultWorkingDirectory)'
    Contents: |
      **\*.js
      package.json
    TargetFolder: '$(Build.ArtifactStagingDirectory)'

- task: PublishBuildArtifacts@1

Npm kayıt defterinde modül yayımlama

Projenizin çıktısı bir web uygulaması değil de diğer projeler tarafından kullanılan bir npm modülse, modülü yerel bir kayıt defterinde veya genel npm kayıt defterinde yayımlamak için npm görevini kullanın. Her yayımladığınızda benzersiz bir ad/sürüm bileşimi sağlayın.

Örnekler

İlk örnekte, sürüm denetimindeki dosyanızdaki değişiklikler aracılığıyla sürüm bilgilerini (npm sürümü gibi) yönettiğiniz package.json varsayılır. Aşağıdaki örnek, genel kayıt defterinde yayımlamak için betik görevini kullanır.

- script: npm publish

Sonraki örnek, deponuzun .npmrc dosyasında tanımlanan özel bir kayıt defterinde yayımlar. Derleme çalıştırılırken bağlantıya kimlik doğrulaması kimlik bilgilerini eklemek için bir npm hizmet bağlantısı ayarlayın.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useExternalRegistry
     publishEndpoint: https://my.npmregistry.com

Son örnek, modülü bir Azure DevOps Services paket yönetim akışında yayımlar.

- task: Npm@1
  inputs:
     command: publish
     publishRegistry: useFeed
     publishFeed: https://my.npmregistry.com

Npm paketlerini sürüm oluşturma ve yayımlama hakkında daha fazla bilgi için bkz. Npm paketlerini yayımlama ve Npm paketlerimi derleme işleminin bir parçası olarak nasıl sürümleyebilirim?.

Bir web uygulaması dağıtma

Web uygulamasında yayımlanmaya hazır bir .zip dosyası arşivi oluşturmak için Dosyaları Arşivle görevini kullanın:

- task: ArchiveFiles@2
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)'
    includeRootFolder: false

Bu arşivi bir web uygulamasında yayımlamak için bkz . Azure web uygulaması dağıtımı.

Yapıtları Azure Pipelines'da yayımlama

Derlemenizden Azure Pipelines'a dosya yayımlamak için Derleme Yapıtlarını Yayımla görevini kullanın.

npm kayıt defterinde yayımlama

Npm paketi oluşturmak ve yayımlamak için npm görevini kullanın. Npm paketlerini sürüm oluşturma ve yayımlama hakkında daha fazla bilgi için bkz . Npm paketlerini yayımlama.

Bir web uygulaması dağıtma

Web uygulamasında yayımlanmaya hazır bir .zip dosyası arşivi oluşturmak için Dosyaları Arşivle görevini kullanın. Bu arşivi bir web uygulamasında yayımlamak için bkz . Azure Web App dağıtımı.

Kapsayıcı kayıt defterine görüntü oluşturma ve gönderme

Kaynak kodunuz başarıyla derlenip birim testleriniz uygulandıktan ve başarılı olduktan sonra bir görüntü oluşturup kapsayıcı kayıt defterine gönderebilirsiniz.

Sorun giderme

Projenizi geliştirme makinenizde derleyebilir ancak Azure Pipelines'da derleme konusunda sorun yaşıyorsanız aşağıdaki olası nedenleri ve düzeltici eylemleri keşfedin:

  • Geliştirme makinenizdeki Node.js ve görev çalıştırıcısının sürümlerinin aracıdakilerle eşleşip eşleşmediğini denetleyin. Aracıda nelerin yüklü olduğunu denetlemek için işlem hattınıza gibi node --version komut satırı betikleri ekleyebilirsiniz. Aracıda aynı sürümü dağıtmak için Düğüm Aracı Yükleyicisi'ni (bu kılavuzda açıklandığı gibi) kullanın veya araçları istenen sürümlere güncelleştirmek için komutları çalıştırın npm install .

  • Paketleri geri yüklerken derlemeleriniz zaman zaman başarısız olursa npm kayıt defterinde sorunlar vardır veya Azure veri merkezi ile kayıt defteri arasında ağ sorunları vardır. Bu faktörleri denetleyemiyoruz. Azure Artifacts'i npm kayıt defteriyle yukarı akış kaynağı olarak kullanmanın derlemelerinizin güvenilirliğini artırıp artırmadığını keşfedin.

  • Farklı Node.js sürümlerini yönetmek için kullanıyorsanız nvm bunun yerine Düğüm Aracı Yükleyicisi görevine geçmeyi göz önünde bulundurun. (nvm macOS görüntüsünde geçmiş nedenlerle yüklenir.) nvm kabuk diğer adları ekleyerek ve değiştirerek PATHbirden çok Node.js sürümünü yönetir. Bu sürüm, Azure Pipelines'ın her görevi yeni bir işlemde çalıştırma şekliyle kötü etkileşim kurar.

    Düğüm Aracı Yükleyicisi görevi bu modeli doğru işler. Ancak, çalışmanız uygulamasının nvmkullanılmasını gerektiriyorsa, her işlem hattının başına aşağıdaki betiği ekleyebilirsiniz:

    steps:
    - bash: |
        NODE_VERSION=16  # or whatever your preferred version is
        npm config delete prefix  # avoid a warning
        . ${NVM_DIR}/nvm.sh
        nvm use ${NODE_VERSION}
        nvm alias default ${NODE_VERSION}
        VERSION_PATH="$(nvm_version_path ${NODE_VERSION})"
        echo "##vso[task.prependPath]$VERSION_PATH"
    

    Ardından ve diğer komut satırı araçları işlem node hattı işinin geri kalanında çalışır. komutunu kullandığınız nvm her adımda betiği aşağıdaki kodla başlatın:

    - bash: |
        . ${NVM_DIR}/nvm.sh
        nvm <command>
    

SSS

S: Azure Artifacts ve Paket Yönetimi hizmeti hakkında nereden daha fazla bilgi edinebilirim?

Y: Azure Artifacts'te Paket Yönetimi

S: Görevler hakkında nereden daha fazla bilgi edinebilirim?

Y: Derleme, sürüm ve test görevleri

S: Nasıl yaparım? 'ÖNEMLİ HATA: CALL_AND_RETRY_LAST Ayırma başarısız oldu - JavaScript bellek yığını yetersiz' iletisiyle işlem hattı hatası düzeltilir mi?

Y: Node.js paketi bellek kullanım sınırını aştığında bu hata türü gerçekleşir. Sorunu çözmek için gibi NODE_OPTIONS bir değişken ekleyin ve buna --max_old_space_size=16384 değerini atayın.

S: Derleme işleminin bir parçası olarak npm paketlerimi nasıl sürüme ekleyebilirim?

Y: Bir seçenek, sürüm denetimi ile npm sürümünün birleşimini kullanmaktır. İşlem hattı çalıştırmasının sonunda deponuzu yeni sürümle güncelleştirebilirsiniz. Bu YAML'de bir GitHub deposu vardır ve paket npmjs'ye dağıtılır. npmjs'de paket sürümünüzle dosyanız arasında bir uyuşmazlık varsa derlemeniz package.json başarısız olur.

variables:
    MAP_NPMTOKEN: $(NPMTOKEN) # Mapping secret var

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps: # Checking out connected repo
- checkout: self
  persistCredentials: true
  clean: true
    
- task: npmAuthenticate@0
  inputs:
    workingFile: .npmrc
    customEndpoint: 'my-npm-connection'
    
- task: UseNode@1
  inputs:
    version: '16.x'
  displayName: 'Install Node.js'

- script: |
    npm install
  displayName: 'npm install'

- script: |
    npm pack
  displayName: 'Package for release'

- bash: | # Grab the package version
    v=`node -p "const p = require('./package.json'); p.version;"`
    echo "##vso[task.setvariable variable=packageVersion]$v"

- task: CopyFiles@2
  inputs:
      contents: '*.tgz'
      targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy archives to artifacts staging directory'

- task: CopyFiles@2
  inputs:
    sourceFolder: '$(Build.SourcesDirectory)'
    contents: 'package.json' 
    targetFolder: $(Build.ArtifactStagingDirectory)/npm
  displayName: 'Copy package.json'

- task: PublishBuildArtifacts@1 
  inputs:
    PathtoPublish: '$(Build.ArtifactStagingDirectory)/npm'
    artifactName: npm
  displayName: 'Publish npm artifact'

- script: |  # Config can be set in .npmrc
    npm config set //registry.npmjs.org/:_authToken=$(MAP_NPMTOKEN) 
    npm config set scope "@myscope"
    # npm config list
    # npm --version
    npm version patch --force
    npm publish --access public

- task: CmdLine@2 # Push changes to GitHub (substitute your repo)
  inputs:
    script: |
      git config --global user.email "username@contoso.com"
      git config --global user.name "Azure Pipeline"
      git add package.json
      git commit -a -m "Test Commit from Azure DevOps"
      git push -u origin HEAD:main