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.
Önceden yüklenmiş Node.js ve npm sürümü için Bkz . Microsoft tarafından barındırılan aracılar. 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ı.
belirli bir Node.js sürümünü kullanma
Microsoft tarafından barındırılan aracıda henüz yüklü olmayan bir Node.js ve npm sürümüne ihtiyacınız varsa Düğüm aracı yükleyici görevini kullanın. Aşağıdaki kod parçacığını dosyanıza azure-pipelines.yml
ekleyin.
Not
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
Aracıda yüklü olmayan bir Node.js/npm sürümüne ihtiyacınız varsa:
İş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+.
Görev kataloğunda Düğüm Aracı Yükleyicisi görevini bulun ve ekleyin.
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.json
geliş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 npm
Angular CLI'nin en son sürümünü yükler. İşlem hattının geri kalanı aracı diğer script
aşamalardan kullanabilirng
.
Not
Microsoft tarafından barındırılan Linux aracılarında komutunun sudo
başına gibi sudo npm install -g
yazın.
- script: npm install -g @angular/cli
İpucu
İş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.
Derleme aracınıza araçları yüklemek için işlem hattınızdaki npm veya komut satırı görevlerini kullanın.
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=prod
npm install
derleme 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.yml
ekleyin.
- 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.yml
ekleyin.
- 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>
Paketleri indirip yüklemek için işlem hattınızda npm veya npm kimlik doğrulama görevini kullanın.
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 TypeScript tsc
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
Kodu oluşturmak için proje package.json tanımlanmış bir derleme betiğiniz varsa işlem hattınızda npm görevini kullanın. Proje yapılandırmanızda tanımlanmış ayrı bir betik yoksa kodunuzu derlemek için Bash görevini kullanın.
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
Proje 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:
- 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.
- 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.
- 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.
- 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.
- Birim testlerinizle birlikte işlem hattı aşamalarında uçtan uca testleri çalıştırın.
- 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 webpack
proje dosyanızda geliştirme bağımlılığı olarak yapılandırıldığından emin olun. Projenizin kök klasöründe bir webpack.config.js
dosya yoksa, bu varsayılan yapılandırmayla çalışırwebpack
.
- script: webpack
Sonraki örnek, proje package.json tanımlanan betik nesnesini çağırmak npm run build
build
için npm görevini kullanır. Projenizde betik nesnelerinin kullanılması, derlemenin mantığını kaynak koduna ve işlem hattı dışına taşır.
- script: npm run build
veya Angular ng build
gibi webpack
paketleme aracınızı çağırmak için işlem hattınızda CLI veya Bash görevini kullanın.
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.
Not
Microsoft tarafından barındırılan Linux aracılarında komutunun sudo
başına gibi sudo npm install -g
yazı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
- Komut:
npm
- Komut:
install
- Komut:
bash
- Tür:
inline
- Betik:
ng build --prod
- Tür:
İş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:
browsers
karma.conf.js proje dosyanızdaki girdiyibrowsers: ['ChromeHeadless']
olarakbrowsers: ['Chrome']
değiştirin.singleRun
karma.conf.js proje dosyanızdaki girdiyi değerinefalse
değiştirintrue
. 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
- Komut:
bash
- Tür:
inline
- Betik:
npx webpack --config webpack.config.js
- Tür:
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 gulp derleme şablonuyla Node.js 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 grunt derleme şablonuyla Node.js 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 ya da derleme çıkışını bir web uygulamasına dağıtım için .zip bir dosyaya 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 dosya 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 dosya 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ü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ınnpm 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ştirerekPATH
birden ç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
nvm
kullanı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ıznvm
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: bu hata türü, Node.js paketi bellek kullanım sınırını aştığında 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