Dostosowywanie języka JavaScript dla usługi Azure Pipelines

Usługi Azure Pipelines można używać do tworzenia aplikacji JavaScript bez konieczności konfigurowania własnej infrastruktury. Narzędzia, których często używasz do kompilowania, testowania i uruchamiania aplikacji JavaScript — takich jak npm, Node, Yarn i Gulp — są wstępnie instalowane na agentach hostowanych przez firmę Microsoft w usłudze Azure Pipelines.

W przypadku wersji środowiska Node.js i programu npm, która jest wstępnie zainstalowana, zapoznaj się z agentami hostowanymi przez firmę Microsoft. Aby zainstalować określoną wersję tych narzędzi na agentach hostowanych przez firmę Microsoft, dodaj zadanie Instalator narzędzi node do początku procesu. Możesz również użyć własnego agenta.

Aby utworzyć pierwszy potok przy użyciu języka JavaScript, zobacz przewodnik Szybki start dla języka JavaScript.

Używanie określonej wersji środowiska Node.js

Jeśli potrzebujesz wersji biblioteki Node.js i narzędzia npm, która nie jest jeszcze zainstalowana w agencie hostowanym przez firmę Microsoft, użyj zadania instalatora narzędzia Node. Dodaj następujący fragment kodu do azure-pipelines.yml pliku.

Uwaga

Hostowani agenci są regularnie aktualizowani i konfigurowanie tego zadania powoduje poświęcanie znacznego czasu na aktualizację do nowszej wersji pomocniczej przy każdym uruchomieniu potoku. Tego zadania należy używać tylko wtedy, gdy potrzebna jest określona wersja środowiska Node w potoku.

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

Jeśli potrzebujesz wersji środowiska Node.js/npm, która nie jest jeszcze zainstalowana na agencie:

  1. W potoku wybierz pozycję Zadania, wybierz fazę uruchamiającą zadania kompilacji, a następnie wybierz, + aby dodać nowe zadanie do tej fazy.

  2. W katalogu zadań znajdź i dodaj zadanie Instalator narzędzi węzła.

  3. Wybierz zadanie i określ wersję środowiska uruchomieniowego Node.js, które chcesz zainstalować.

Aby zaktualizować tylko narzędzie npm, uruchom npm i -g npm@version-number polecenie w procesie kompilacji.

Korzystanie z wielu wersji węzłów

Aplikację można skompilować i przetestować w wielu wersjach środowiska Node za pomocą zadania instalatora narzędzia Node.

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

Zobacz Wykonywanie wielu konfiguracji.

Instalowanie narzędzi na agencie kompilacji

Jeśli masz narzędzia, które są zależnościami programistycznymi w projekcie package.json lub package-lock.json pliku, zainstaluj narzędzia i zależności za pomocą narzędzia npm. Dokładna wersja narzędzi jest definiowana w projekcie izolowana od innych wersji istniejących na agencie kompilacji.

Użyj skryptu lub zadania npm.

Instalowanie za pomocą skryptu z plikiem package.json

- script: npm install --only=dev

Instalowanie za pomocą zadania npm z plikiem package.json

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

Uruchom narzędzia zainstalowane w ten sposób przy użyciu modułu uruchamiającego pakiety npm npx , który wykrywa narzędzia zainstalowane w ten sposób w jego rozwiązaniu ścieżki. Poniższy przykład wywołuje mocha moduł uruchamiający testy, ale szuka wersji zainstalowanej jako zależność programistycznej przed użyciem zainstalowanej globalnie wersji (za pośrednictwem npm install -gprogramu ).

- script: npx mocha

Aby zainstalować narzędzia, których potrzebuje projekt, ale które nie są ustawione jako zależności programistyczne w programie package.json, wywołaj metodę npm install -g ze etapu skryptu w potoku.

Poniższy przykład instaluje najnowszą wersję interfejsu wiersza polecenia platformy Angular przy użyciu polecenia npm. Pozostała część potoku może następnie używać ng narzędzia z innych script etapów.

Uwaga

W przypadku agentów systemu Linux hostowanych przez firmę Microsoft należy wstępnie poprzeć polecenie , sudona przykład sudo npm install -g.

- script: npm install -g @angular/cli

Napiwek

Te zadania są uruchamiane za każdym razem, gdy potok jest uruchamiany, dlatego należy pamiętać o wpływie, jaki instalowanie narzędzi ma na czas kompilacji. Rozważ skonfigurowanie własnych agentów z wersją potrzebnych narzędzi, jeśli obciążenie staje się poważnym wpływem na wydajność kompilacji.

Użyj zadań npm lub wiersza polecenia w potoku, aby zainstalować narzędzia na agencie kompilacji.

Zarządzanie zależnościami

W kompilacji użyj usługi Yarn lub Azure Artifacts, aby pobrać pakiety z publicznego rejestru npm. Ten rejestr jest typem prywatnego rejestru npm określonego .npmrc w pliku.

Korzystanie z narzędzia npm

Narzędzie npm można użyć w następujący sposób, aby pobrać pakiety dla kompilacji:

  • Bezpośrednie uruchamianie npm install w potoku, ponieważ jest to najprostszy sposób pobierania pakietów z rejestru bez uwierzytelniania. Jeśli kompilacja nie wymaga zależności programowania od agenta do uruchomienia, możesz przyspieszyć czas kompilacji z opcją --only=prod .npm install
  • Użyj zadania npm. To zadanie jest przydatne w przypadku korzystania z uwierzytelnionego rejestru.
  • Użyj zadania uwierzytelniania npm. To zadanie jest przydatne podczas uruchamiania npm install z wewnątrz modułów uruchamianych zadań — Gulp, Grunt lub Maven.

Jeśli chcesz określić rejestr npm, umieść adresy URL w .npmrc pliku w repozytorium. Jeśli źródło danych zostanie uwierzytelnione, utwórz połączenie usługi npm na karcie Usługi w ustawieniach projektu, aby zarządzać jego poświadczeniami.

Aby zainstalować pakiety npm za pomocą skryptu w potoku, dodaj następujący fragment kodu do elementu azure-pipelines.yml.

- script: npm install

Aby użyć rejestru prywatnego określonego w .npmrc pliku, dodaj następujący fragment kodu do azure-pipelines.ymlpliku .

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

Aby przekazać poświadczenia rejestru do poleceń npm za pośrednictwem modułów uruchamiaczy zadań, takich jak Gulp, przed wywołaniem modułu uruchamiającego zadania dodaj następujące zadanie azure-pipelines.yml .

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

Użyj zadania npm lub npm uwierzytelniania w potoku, aby pobrać i zainstalować pakiety.

Jeśli kompilacje czasami kończą się niepowodzeniem z powodu problemów z połączeniem podczas przywracania pakietów z rejestru npm, możesz użyć usługi Azure Artifacts ze źródłami nadrzędnymi i buforować pakiety. Poświadczenia potoku są automatycznie używane podczas nawiązywania połączenia z usługą Azure Artifacts. Te poświadczenia są zwykle pochodzące z konta usługi Project Collection Build Service .

Jeśli używasz agentów hostowanych przez firmę Microsoft, otrzymujesz nową maszynę za każdym razem, gdy uruchamiasz kompilację — co oznacza przywrócenie zależności za każdym razem, co może zająć dużo czasu. Aby rozwiązać ten problem, możesz użyć usługi Azure Artifacts lub własnego agenta — możesz skorzystać z zalet korzystania z pamięci podręcznej pakietów.

Korzystanie z usługi Yarn

Użyj etapu skryptu, aby wywołać usługę Yarn w celu przywrócenia zależności. Usługa Yarn jest wstępnie instalowana na niektórych agentach hostowanych przez firmę Microsoft. Można go zainstalować i skonfigurować na własnych agentach, podobnie jak w przypadku dowolnego innego narzędzia.

- script: yarn install

Użyj interfejsu wiersza polecenia lub zadania powłoki Bash w potoku, aby wywołać usługę Yarn.

Uruchamianie kompilatorów języka JavaScript

Kompilatory, takie jak Babel i kompilator TypeScripttsc, umożliwiają konwertowanie kodu źródłowego na wersje używane przez środowisko uruchomieniowe Node.js lub w przeglądarkach internetowych.

Jeśli masz obiekt skryptu skonfigurowany w pliku projektupackage.json, który uruchamia kompilator, wywołaj go w potoku przy użyciu zadania skryptu.

- script: npm run compile

Kompilatory można wywoływać bezpośrednio z potoku przy użyciu zadania skryptu. Te polecenia są uruchamiane z katalogu głównego sklonowanego repozytorium kodu źródłowego.

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

Użyj zadania npm w potoku, jeśli masz skrypt kompilowania zdefiniowany w pliku package.json projektu, aby skompilować kod. Użyj zadania powłoki Bash , aby skompilować kod, jeśli nie masz oddzielnego skryptu zdefiniowanego w konfiguracji projektu.

Uruchamianie testów jednostkowych

Skonfiguruj potoki tak, aby uruchamiały testy języka JavaScript, aby wygenerowały wyniki sformatowane w formacie XML narzędzia JUnit. Następnie możesz opublikować wyniki przy użyciu wbudowanego zadania publikowania wyników testu.

Jeśli platforma testowa nie obsługuje danych wyjściowych narzędzia JUnit, dodaj obsługę za pośrednictwem modułu raportowania partnerów, takiego jak mocha-junit-reporter. Możesz zaktualizować skrypt testowy, aby użyć reportera JUnit lub jeśli reporter obsługuje opcje wiersza polecenia, przekaż te opcje do definicji zadania.

W poniższej tabeli wymieniono najczęściej używane moduły uruchamiające testy oraz reporterów, których można użyć do generowania wyników XML:

Moduł uruchamiający testy Reporterzy do tworzenia raportów XML
Mocha mocha-junit-reporter
cypress-multi-reporters
Jasmine jasmine-reporterzy
jest jest-junit
jest-junit-reporter
Karma karma-junit-reporter
Ava tap-xunit

W poniższym przykładzie użyto narzędzia mocha-junit-reporter i wywołuje się mocha test bezpośrednio przy użyciu skryptu. Ten skrypt generuje dane wyjściowe XML JUnit w domyślnej ./test-results.xmllokalizacji .

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

Jeśli skrypt został zdefiniowany test w pliku package.json projektu, możesz wywołać go za pomocą polecenia npm test.

- script: npm test

Publikowanie wyników testu

Aby opublikować wyniki, użyj zadania Publikuj wyniki testu.

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

Publikowanie wyników pokrycia kodu

Jeśli skrypty testowe uruchamiają narzędzie pokrycia kodu, takie jak Stambuł, dodaj zadanie Publikuj wyniki pokrycia kodu. W tym celu możesz znaleźć metryki pokrycia w podsumowaniu kompilacji i pobrać raporty HTML w celu dalszej analizy. Zadanie oczekuje danych wyjściowych raportowania Cobertura lub JaCoCo, dlatego upewnij się, że narzędzie pokrycia kodu działa z odpowiednimi opcjami generowania odpowiednich danych wyjściowych. Na przykład --report cobertura.

W poniższym przykładzie użyto nyc, interfejsu wiersza polecenia Stambułu wraz z mocha-junit-reporter i wywołuje npm test polecenie.

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

Użyj zadań Publikowanie wyników testów i Publikowanie wyników pokrycia kodu w potoku, aby opublikować wyniki testów wraz z wynikami pokrycia kodu przy użyciu Stambułu.

Ustaw opcje sterowania zadania Publikuj wyniki testu, aby uruchomić zadanie, nawet jeśli poprzednie zadanie nie powiodło się, chyba że wdrożenie zostało anulowane.

Kompleksowa przeglądarka testowa

Uruchamianie testów w przeglądarkach bezgłowych w ramach potoku za pomocą narzędzi takich jak Protractor lub Karma. Następnie opublikuj wyniki kompilacji w usłudze Azure DevOps, wykonując następujące kroki:

  1. Zainstaluj sterownik testowania przeglądarki bez głowy, taki jak headless Chrome lub Firefox, lub narzędzie do pozorowania przeglądarki, takie jak PhantomJS, na agencie kompilacji.
  2. Skonfiguruj platformę testową tak, aby korzystała z wybranej opcji przeglądarki/sterownika bez głowy zgodnie z dokumentacją narzędzia.
  3. Skonfiguruj strukturę testową (zwykle z wtyczką lub konfiguracją reportera) w celu wyprowadzania wyników testu sformatowanego w formacie JUnit.
  4. Skonfiguruj zadanie skryptu, aby uruchamiać wszystkie polecenia interfejsu wiersza polecenia potrzebne do uruchamiania wystąpień przeglądarki bez głowy.
  5. Uruchom kompleksowe testy na etapach potoku wraz z testami jednostkowymi.
  6. Opublikuj wyniki przy użyciu tego samego zadania Publikuj wyniki testu obok testów jednostkowych.

Tworzenie pakietów aplikacji internetowych

Pakowanie aplikacji w celu dołączenia wszystkich modułów aplikacji z pośrednimi danymi wyjściowymi i zależnościami do zasobów statycznych gotowych do wdrożenia. Dodaj etap potoku po kompilacji i testach, aby uruchomić narzędzie, takie jak webpack lub kompilacja ng , przy użyciu interfejsu wiersza polecenia platformy Angular.

Pierwszy przykład wywołuje metodę webpack. Aby wykonać tę pracę, upewnij się, że webpack jest ona skonfigurowana jako zależność programowa w pliku projektu package.json. Jest to uruchamiane webpack z konfiguracją webpack.config.js domyślną, chyba że masz plik w folderze głównym projektu.

- script: webpack

W następnym przykładzie użyto zadania npm do wywołania npm run build obiektu skryptu build zdefiniowanego w pliku package.json projektu. Użycie obiektów skryptów w projekcie powoduje przeniesienie logiki kompilacji do kodu źródłowego i z potoku.

- script: npm run build

Użyj interfejsu wiersza polecenia lub zadania powłoki Bash w potoku, aby wywołać narzędzie do tworzenia pakietów, takie jak webpack lub angular.ng build

Implementowanie platform JavaScript

Angular

W przypadku aplikacji Angular można uwzględnić polecenia specyficzne dla platformy Angular, takie jak test ng, kompilacja ng i ng e2e. Aby użyć poleceń interfejsu wiersza polecenia platformy Angular w potoku, zainstaluj pakiet npm angular/cli na agencie kompilacji.

Uwaga

W przypadku agentów systemu Linux hostowanych przez firmę Microsoft należy wstępnie poprzeć polecenie , sudona przykład sudo npm install -g.

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

Dodaj następujące zadania do potoku:

  • npm

    • Polecenie:custom
    • Polecenia i argumenty:install -g @angular/cli
  • npm

    • Polecenie:install
  • Bash

    • Typinline:
    • Skrypt:ng build --prod

W przypadku testów w potoku, które wymagają uruchomienia przeglądarki, na przykład polecenia ng test w aplikacji startowej, która uruchamia karmę, użyj przeglądarki bezgłowej zamiast standardowej przeglądarki. W aplikacji startowej Angular:

  1. browsers Zmień wpis w pliku projektu karma.conf.js z browsers: ['Chrome'] na browsers: ['ChromeHeadless'].

  2. singleRun Zmień wpis w pliku projektu karma.conf.js z wartości na falsetrue. Ta zmiana pomaga upewnić się, że proces Karma zatrzymuje się po jego uruchomieniu.

React i Vue

Wszystkie zależności aplikacji React i Vue są przechwytywane w pliku package.json . Plik azure-pipelines.yml zawiera standardowy skrypt Node.js:

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

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

Pliki kompilacji znajdują się w nowym folderze dist (dla programu Vue) lub build (dla platformy React). Ten fragment kodu tworzy artefakt — www który jest gotowy do wydania. Używa on zadań Instalatora węzła, Kopiowania plikówi Publikowania artefaktów kompilacji .

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

Aby go zwolnić, wskaż zadanie wydania do artefaktu dist lub build i użyj zadania Wdrażanie aplikacji internetowej platformy Azure.

Pakiet webpack

Możesz użyć pliku konfiguracji pakietu webpack do określenia kompilatora, takiego jak Babel lub TypeScript, do transpilowania plików JSX lub TypeScript do zwykłego języka JavaScript i tworzenia pakietu aplikacji.

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

Dodaj następujące zadania do potoku:

  • npm

    • Polecenie:custom
    • Polecenia i argumenty:install -g webpack webpack-cli --save-dev
  • Bash

    • Typinline:
    • Skrypt:npx webpack --config webpack.config.js

Moduły uruchamiane zadań kompilacji

Często do kompilowania i testowania aplikacji JavaScript używa się narzędzia Gulp lub Grunt jako modułu uruchamiającego zadania.

Gulp

Gulp jest wstępnie instalowany na agentach hostowanych przez firmę Microsoft. gulp Uruchom polecenie w pliku YAML:

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

Jeśli kroki w pliku gulpfile.js wymagają uwierzytelniania z rejestrem npm:

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

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

Dodaj zadanie Publikuj wyniki testu, aby opublikować wyniki testów JUnit lub xUnit na serwerze.

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

Dodaj zadanie Publikuj wyniki pokrycia kodu, aby opublikować wyniki pokrycia kodu na serwerze. Metryki pokrycia można znaleźć w podsumowaniu kompilacji i pobrać raporty HTML w celu dalszej analizy.

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

Najprostszym sposobem utworzenia potoku, jeśli aplikacja używa narzędzia Gulp, jest użycie szablonu kompilacji Node.js z gulp podczas tworzenia potoku. Ten szablon automatycznie dodaje różne zadania do wywoływania poleceń Gulp i publikowania artefaktów. W zadaniu wybierz pozycję Włącz pokrycie kodu, aby włączyć pokrycie kodu przy użyciu Stambułu.

Grunt

Program Grunt pobiera preinstalację na agentach hostowanych przez firmę Microsoft. Aby uruchomić polecenie grunt w pliku YAML:

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

Jeśli kroki w Gruntfile.js pliku wymagają uwierzytelniania z rejestrem npm:

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

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

Najprostszym sposobem utworzenia potoku, jeśli aplikacja używa narzędzia Grunt, jest użycie szablonu kompilacji Node.js z gruntem podczas tworzenia potoku. Spowoduje to automatyczne dodanie różnych zadań w celu wywoływania poleceń Gulp i publikowania artefaktów. W zadaniu wybierz opcję Publikuj w programie TFS/Team Services , aby opublikować wyniki testów, a następnie wybierz pozycję Włącz pokrycie kodu , aby włączyć pokrycie kodu przy użyciu Stambułu.

Pakowanie i dostarczanie kodu

Po skompilowaniu i przetestowaniu aplikacji możesz przekazać dane wyjściowe kompilacji do usługi Azure Pipelines, utworzyć i opublikować pakiet npm lub Maven albo spakować dane wyjściowe kompilacji w pliku zip na potrzeby wdrożenia w aplikacji internetowej.

Publikowanie plików w usłudze Azure Pipelines

Aby przekazać cały katalog roboczy plików, użyj zadania Publish Build Artifacts (Publikuj artefakty kompilacji ) i dodaj następujące polecenie do pliku azure-pipelines.yml .

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

Aby przekazać podzbiór plików, najpierw skopiuj niezbędne pliki z katalogu roboczego do katalogu przejściowego za pomocą zadania Kopiuj pliki , a następnie użyj zadania Publikowanie artefaktów kompilacji.

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

- task: PublishBuildArtifacts@1

Publikowanie modułu w rejestrze npm

Jeśli dane wyjściowe projektu są modułem używanym npm przez inne projekty, a nie aplikacją internetową, użyj zadania npm , aby opublikować moduł w rejestrze lokalnym lub w publicznym rejestrze npm. Podaj unikatową kombinację nazwy/wersji za każdym razem, gdy publikujesz.

Przykłady

W pierwszym przykładzie przyjęto założenie, że zarządzasz informacjami o wersji (na przykład za pośrednictwem wersji npm) przez zmiany package.json w pliku w kontroli wersji. W poniższym przykładzie użyto zadania skryptu do opublikowania w rejestrze publicznym.

- script: npm publish

Następny przykład jest publikowany w rejestrze niestandardowym zdefiniowanym w pliku repozytorium .npmrc . Skonfiguruj połączenie usługi npm, aby wstrzyknąć poświadczenia uwierzytelniania do połączenia podczas uruchamiania kompilacji.

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

Ostatni przykład publikuje moduł w kanale zarządzania pakietami usługi Azure DevOps Services.

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

Aby uzyskać więcej informacji na temat przechowywania wersji i publikowania pakietów npm, zobacz Publikowanie pakietów npm i Jak mogę wersję pakietów npm w ramach procesu kompilacji?.

Wdrażanie aplikacji internetowej

Aby utworzyć archiwum plików zip, które jest gotowe do publikowania w aplikacji internetowej, użyj zadania Archive Files :

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

Aby opublikować to archiwum w aplikacji internetowej, zobacz Wdrażanie aplikacji internetowej platformy Azure.

Publikowanie artefaktów w usłudze Azure Pipelines

Użyj zadania Publish Build Artifacts (Publikowanie artefaktów kompilacji), aby opublikować pliki z kompilacji w usłudze Azure Pipelines.

Publikowanie w rejestrze npm

Aby utworzyć i opublikować pakiet npm, użyj zadania npm. Aby uzyskać więcej informacji na temat przechowywania wersji i publikowania pakietów npm, zobacz Publikowanie pakietów npm.

Wdrażanie aplikacji internetowej

Aby utworzyć archiwum plików zip, które jest gotowe do publikowania w aplikacji internetowej, użyj zadania Archive Files. Aby opublikować to archiwum w aplikacji internetowej, zobacz Wdrażanie aplikacji internetowej platformy Azure.

Kompilowanie i wypychanie obrazu do rejestru kontenerów

Po pomyślnym utworzeniu kodu źródłowego i pomyślnym wykonaniu testów jednostkowych można również skompilować obraz i wypchnąć go do rejestru kontenerów.

Rozwiązywanie problemów

Jeśli możesz skompilować projekt na maszynie deweloperów, ale masz problemy z kompilowaniem go w usłudze Azure Pipelines, zapoznaj się z następującymi potencjalnymi przyczynami i akcjami naprawczymi:

  • Sprawdź, czy wersje środowiska Node.js i modułu uruchamiającego zadania na maszynie deweloperów są zgodne z wersjami agenta. Możesz uwzględnić skrypty wiersza polecenia, takie jak node --version w potoku, aby sprawdzić, co jest zainstalowane na agencie. Aby wdrożyć tę samą wersję na agencie, użyj Instalatora narzędzi węzła (zgodnie z wyjaśnieniem w tym przewodniku) lub uruchom npm install polecenia, aby zaktualizować narzędzia do żądanych wersji.

  • Jeśli kompilacje kończą się niepowodzeniem sporadycznie podczas przywracania pakietów, rejestr npm ma problemy lub występują problemy z siecią między centrum danych platformy Azure i rejestrem. Nie możemy kontrolować tych czynników. Dowiedz się, czy korzystanie z usługi Azure Artifacts z rejestrem npm jako źródłem nadrzędnym zwiększa niezawodność kompilacji.

  • Jeśli używasz nvm narzędzia do zarządzania różnymi wersjami środowiska Node.js, rozważ przełączenie do zadania Instalator narzędzi węzła. (nvm jest instalowany ze względów historycznych na obrazie systemu macOS). nvm zarządza wieloma wersjami node.js przez dodanie aliasów powłoki i zmianę PATHelementu , która nieprawidłowo współdziała ze sposobem uruchamiania każdego zadania w nowym procesie przez usługę Azure Pipelines.

    Zadanie Instalator narzędzi węzła obsługuje ten model poprawnie. Jeśli jednak praca wymaga użycia nvmpolecenia , możesz dodać następujący skrypt na początku każdego potoku:

    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"
    

    node Następnie i inne narzędzia wiersza polecenia działają dla pozostałej części zadania potoku. W każdym kroku, w którym używasz nvm polecenia, uruchom skrypt przy użyciu następującego kodu:

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

Często zadawane pytania

Pyt.: Gdzie mogę dowiedzieć się więcej o usłudze Azure Artifacts i usłudze zarządzania pakietami?

1: Zarządzanie pakietami w usłudze Azure Artifacts

Pyt.: Gdzie mogę dowiedzieć się więcej o zadaniach?

Elementy: Zadania kompilacji, wydania i testowania

Pyt.: Jak mogę naprawić błąd potoku z komunikatem "BŁĄD KRYTYCZNY: CALL_AND_RETRY_LAST Alokacja nie powiodła się — sterta javaScript z pamięci"?

1: Ten typ błędu występuje, gdy pakiet Node.js przekracza limit użycia pamięci. Aby rozwiązać ten problem, dodaj zmienną podobną NODE_OPTIONS do i przypisz jej wartość --max_old_space_size=16384.

Pyt.: Jak mogę wersję pakietów npm w ramach procesu kompilacji?

1: Jedną z opcji jest użycie kombinacji kontroli wersji i wersji npm. Na końcu uruchomienia potoku możesz zaktualizować repozytorium przy użyciu nowej wersji. W tym języku YAML istnieje repozytorium GitHub, a pakiet zostanie wdrożony w usłudze npmjs. Kompilacja kończy się niepowodzeniem, jeśli istnieje niezgodność między wersją pakietu w pliku npmjs i pliku package.json .

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