Compilación, prueba e implementación de javaScript Node.js aplicaciones

¿No está Azure Pipelines? Si es así, se recomienda probar esta sección para crearla antes de pasar a otras secciones.

https://github.com/Azure-Samples/js-e2e-express-server

trigger:
- none

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '12.x'
  displayName: 'Install Node.js'

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

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

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

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

Inicio de sesión en Azure Pipelines

Inicie sesión en Azure Pipelines. Una vez que haya iniciado sesión, el explorador accederá a https://dev.azure.com/my-organization-name y aparecerá el panel de Azure DevOps.

En la organización seleccionada, cree un proyecto. Si no tiene ningún proyecto en la organización, aparecerá la pantalla Cree un proyecto para empezar. De lo contrario, seleccione el botón Crear proyecto en la esquina superior derecha del panel.

Creación de la canalización

1. Para empezar, bifurca este repositorio en GitHub.

   https://github.com/Azure-Samples/js-e2e-express-server
   

2. Inicie sesión en su organización de Azure DevOps y vaya a su proyecto.

3. En el proyecto, vaya a la página Pipelines (Canalizaciones). A continuación, elija la acción para crear una canalización.

4. Siga los pasos del asistente y seleccione primero GitHub como ubicación del código fuente.

5. Puede que se le redirija a GitHub para iniciar sesión. Si es así, escriba sus credenciales de GitHub.

6. Cuando aparezca la lista de repositorios, seleccione el Node.js de ejemplo.

7. Azure Pipelines analizará el código del repositorio y recomendará Node.js la plantilla para la canalización. Seleccione esa plantilla.

8. Azure Pipelines generará un archivo YAML para la canalización. Seleccione Save and run (Guardar y ejecutar) y, luego, seleccione Commit directly to the main branch (Confirmar directamente en la rama principal) y, luego, elija de nuevo Save and run (Guardar y ejecutar).

9. Se inicia una nueva ejecución. Espere a que finalice.

Cuando haya terminado, tendrá un archivo YAML en funcionamiento ( ) en el repositorio que está listo azure-pipelines.yml para personalizar.

YAML

1. Para empezar, bifurca este repositorio en GitHub.

   https://github.com/Azure-Samples/js-e2e-express-server
   

2. Agregue un azure-pipelines.yml archivo en el repositorio. En este yaml se supone que Node.js con npm instalado en el servidor.

trigger:
- main

pool: Default

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

3. Cree una canalización (si no sabe cómo, consulte Creación de la primera canalización)y, para la plantilla, seleccione YAML.

4. Establezca el grupo de agentes y la ruta de acceso del archivo YAML para la canalización.

5. Guarde la canalización y poner en cola una compilación. Cuando aparezca el mensaje Build #nnnnnnnn.n se ha puesto en cola, seleccione el vínculo number para ver la canalización en acción.

6. Cuando esté listo para realizar cambios en la canalización, edite la canalización.

7. Consulte las secciones siguientes para obtener información sobre algunas de las formas más comunes de personalizar la canalización.

Clásico

1. Para empezar, bifurca este repositorio en GitHub.

   https://github.com/Azure-Samples/js-e2e-express-server
   

2. Una vez que tenga el código de ejemplo en su propio repositorio, cree una canalización mediante las instrucciones de Creación de la primera canalización y seleccione la plantilla Proceso vacío.

3. Seleccione Proceso en la pestaña Tareas del editor de canalizaciones y cambie las propiedades como se muestra a continuación:

   • Cola del agente:

4. Agregue las siguientes tareas a la canalización en el orden especificado:

   • npm

     • Comando:

   • npm

     • Nombre para mostrar:
     • Comando:
     • Comandos y argumentos:

   • Publicación de los resultados de las pruebas

     • Deje todos los valores predeterminados para las propiedades.

   • Archivos de archivo

     • Carpeta raíz o archivo que se archivará:
     • Anteponer el nombre de la carpeta raíz a las rutas de acceso de archivo: Desactivada

   • Publicar artefactos de compilación

     • Deje todos los valores predeterminados para las propiedades.

5. Guarde la canalización y poner en cola una compilación para verla en acción.

Puede usar Azure Pipelines para compilar aplicaciones de JavaScript sin necesidad de configurar ninguna infraestructura propia. Puede usar agentes Windows o Linux para ejecutar las compilaciones.

Actualice el siguiente fragmento de código azure-pipelines.yml en el archivo para seleccionar la imagen adecuada.

pool:
  vmImage: 'ubuntu-latest' # examples of other options: 'macOS-10.15', 'windows-latest'

Las herramientas que se usan normalmente para compilar, probar y ejecutar aplicaciones de JavaScript (como npm, Node, Yarn y Gulp) están preinstaladas en agentes hospedados por Microsoft en Azure Pipelines. Para obtener la versión exacta de Node.js y npm preinstalados, consulte Agentes hospedados por Microsoft. Para instalar una versión específica de estas herramientas en agentes hospedados por Microsoft, agregue la tarea Instalador de herramientas de nodo al principio del proceso.

También puede usar un agente auto-hospedado.

Si necesita una versión de Node.js y npm que aún no esté instalada en el agente hospedado por Microsoft, use la tarea instalador de herramientas de Node. Agregue el siguiente fragmento de código al azure-pipelines.yml archivo.

- task: NodeTool@0 
  inputs:
    versionSpec: '12.x' # replace this value with the version that you need for your project

Si necesita una versión de Node.js/npm que aún no está instalada en el agente:

1. En la canalización, seleccione Tareas, elija la fase que ejecuta las tareas de compilación y, a continuación, seleccione para agregar una nueva tarea a esa fase.

2. En el catálogo de tareas, busque y agregue la tarea Instalador de herramientas de nodo.

3. Seleccione la tarea y especifique la versión del entorno Node.js tiempo de ejecución que desea instalar.

pool:
  vmImage: 'ubuntu-latest'
strategy:
  matrix:
    node_12_x:
      node_version: 12.x
    node_13_x:
      node_version: 13.x

steps:
- task: NodeTool@0 
  inputs:
    versionSpec: $(node_version)

- script: npm install

Consulte Ejecución de varias configuraciones.

Si ha definido las herramientas necesarias para la compilación como dependencias de desarrollo en el archivo o del proyecto, instale estas herramientas junto con el resto de las dependencias del proyecto a través package.jsonpackage-lock.json de npm. Esto instalará la versión exacta de las herramientas definidas en el proyecto, aisladas de otras versiones que existen en el agente de compilación.

Puede usar un script o la tarea npm.

Uso de un script para instalar con package.json

- script: npm install --only=dev

Uso de la tarea npm para instalar con package.json

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

Ejecute las herramientas instaladas de esta manera mediante el ejecutor de paquetes de npm, que primero buscará las herramientas instaladas de esta manera npx en su resolución de ruta de acceso. En el ejemplo siguiente se llama al ejecutor de pruebas, pero se buscará la versión instalada como una dependencia de desarrollo antes de usar una versión instalada mocha globalmente (hasta npm install -g ).

- script: npx mocha

Para instalar herramientas que el proyecto necesita pero que no están establecidas como dependencias de desarrollo en , llame a desde una fase package.json de script en la npm install -g canalización.

En el ejemplo siguiente se instala la versión más reciente de la CLI Angular mediante . El resto de la canalización puede usar la ng herramienta desde otras script fases.

- script: npm install -g @angular/cli

Estas tareas se ejecutarán cada vez que se ejecute la canalización, por lo que debe tener en cuenta el impacto que la instalación de herramientas tiene en los tiempos de compilación. Considere la posibilidad de configurar agentes auto hospedados con la versión de las herramientas que necesita si la sobrecarga se convierte en un impacto grave en el rendimiento de la compilación.

Use las tareas npmo de línea de comandos de la canalización para instalar herramientas en el agente de compilación.

Para instalar paquetes npm mediante un script en la canalización, agregue el siguiente fragmento de código a azure-pipelines.yml .

- script: npm install

Para usar un registro privado especificado en el .npmrc archivo, agregue el siguiente fragmento de código a azure-pipelines.yml .

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

Para pasar credenciales del Registro a comandos npm a través de ejecutores de tareas como Gulp, agregue la siguiente tarea a antes de llamar azure-pipelines.yml al ejecutor de tareas.

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

Use la tarea npm o npm authenticate de la canalización para descargar e instalar paquetes.

Si en ocasiones se producirá un error en las compilaciones debido a problemas de conexión al restaurar paquetes desde el registro npm, puede usar Azure Artifacts junto con orígenes ascendentes y almacenar en caché los paquetes. Las credenciales de la canalización se usan automáticamente al conectarse a Azure Artifacts. Estas credenciales normalmente se derivan de la cuenta Project servicio de compilación de recopilación.

Si usa agentes hospedados por Microsoft,obtiene una nueva máquina cada vez que ejecuta una compilación, lo que significa restaurar las dependencias cada vez.

Esto puede tardar una cantidad significativa de tiempo. Para mitigar esto, puede usar Azure Artifacts o un agente auto-hospedado. A continuación, se obtiene la ventaja de usar la caché de paquetes.

Use una fase de script para invocar Yarn para restaurar las dependencias. Yarn está disponible preinstalado en algunos agentes hospedados por Microsoft. Puede instalarlo y configurarlo en agentes auto-hospedados como cualquier otra herramienta.

- script: yarn install

Use la CLI o la tarea Bash en la canalización para invocar Yarn.

Use compiladores como Javascriptl y el compilador de TypeScript para convertir el código fuente en versiones que el entorno de ejecución de Node.js o en exploradores web puedan usar.

Si tiene un objeto de script configurado en el archivo del proyecto que ejecuta el compilador, invoquelo en la canalización mediante una tarea de script.

- script: npm run compile

Puede llamar a compiladores directamente desde la canalización mediante la tarea script. Estos comandos se ejecutarán desde la raíz del repositorio de código fuente clonado.

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

Use la tarea npm en la canalización si tiene un script de compilación definido en el archivo package.json del proyecto para compilar el código. Use la tarea Bash para compilar el código si no tiene un script independiente definido en la configuración del proyecto.

Configure las canalizaciones para ejecutar las pruebas de JavaScript de modo que produzcan resultados con el formato XML de JUnit. A continuación, puede publicar los resultados mediante la tarea integrada publicar resultados de pruebas.

Si el marco de prueba no admite la salida de JUnit, deberá agregar compatibilidad a través de un módulo de informes de asociados, como mocha-junit-reporter. Puede actualizar el script de prueba para usar el reportero de JUnit o, si el informante admite opciones de línea de comandos, pasarlas a la definición de tarea.

En la tabla siguiente se enumeran los ejecutores de pruebas más usados y los informadores que se pueden usar para generar resultados XML:

En este ejemplo se usa mocha-junit-reporter e invoca directamente mediante un script. Esto genera la salida XML de JUnit en la ubicación predeterminada de ./test-results.xml .

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

Si ha definido un test script en el archivo package.json del proyecto, puede invocarlo mediante npm test .

- script: npm test

Publicación de resultados de pruebas

Para publicar los resultados, use la tarea Resultados de pruebas publicación.

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

Publicación de resultados de cobertura de código

Si los scripts de prueba ejecutan una herramienta de cobertura de código como,por ejemplo , agregue la tarea Publicar resultados de cobertura de código para publicar los resultados de cobertura de código junto con los resultados de las pruebas. Al hacerlo, puede encontrar métricas de cobertura en el resumen de compilación y descargar informes HTML para su posterior análisis. La tarea espera la salida de informes cobertura o JaCoCo, por lo que debe asegurarse de que la herramienta de cobertura de código se ejecuta con las opciones necesarias para generar la salida correcta. (Por ejemplo, --report cobertura).

En el ejemplo siguiente se usa nyc, la interfaz de la línea de comandos de Nyc, junto con mocha-junit-reporter e invoca el comando .

- 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@1
  inputs: 
    codeCoverageTool: Cobertura # or JaCoCo
    summaryFileLocation: '$(System.DefaultWorkingDirectory)/**/*coverage.xml'
    reportDirectory: '$(System.DefaultWorkingDirectory)/**/coverage'

Use las tareas Publicar Resultados de pruebas y Publicar resultados de cobertura de código de la canalización para publicar los resultados de las pruebas junto con los resultados de cobertura de código mediante LaNús.

Establezca las Opciones de control para que la tarea Publicar Resultados de pruebas ejecute la tarea incluso si se ha dado un error en una tarea anterior, a menos que se cancele la implementación.

Empaquete aplicaciones para agrupar todos los módulos de aplicación con salidas intermedias y dependencias en recursos estáticos listos para la implementación. Agregue una fase de canalización después de la compilación y pruebas para ejecutar una herramienta como Webpack o ng build mediante la CLI Angular.

El primer ejemplo llama a webpack . Para que esto funcione, asegúrese de que está configurado como una dependencia webpack de desarrollo en el archivo de proyecto package.json. Esto se ejecutará con la configuración predeterminada a menos webpack que tenga un archivo en la carpeta raíz del webpack.config.js proyecto.

- script: webpack

En el ejemplo siguiente se usa la tarea npm para llamar al objeto de script definido en el archivo build package.json del proyecto. El uso de objetos de script en el proyecto mueve la lógica de la compilación al código fuente y fuera de la canalización.

- script: npm run build

Use la CLI o la tarea Bash de la canalización para invocar la herramienta de empaquetado, como o Angular de .

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

Agregue las siguientes tareas a la canalización:

• npm

  • Comando:
  • Comandos y argumentos:

• npm

  • Comando:

• bash

  • Tipo:
  • Guión:

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

trigger:
- main

pool:
  vmImage: 'ubuntu-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '10.x'
  displayName: 'Install Node.js'

- script: |
    npm install
    npm run build
  displayName: 'npm install and 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

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

Agregue las siguientes tareas a la canalización:

• npm

  • Comando:
  • Comandos y argumentos:

• bash

  • Tipo:
  • Guión:

Gulp está preinstalado en agentes hospedados por Microsoft. Para ejecutar el gulp comando en el archivo YAML:

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

Si los pasos del archivo gulpfile.js requieren autenticación con un registro npm:

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

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

Agregue la tarea Publicar Resultados de pruebas para publicar los resultados de pruebas de JUnit o xUnit en el servidor.

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

Agregue la tarea Publicar resultados de cobertura de código para publicar los resultados de cobertura de código en el servidor. Puede encontrar las métricas de cobertura en el resumen de compilación y puede descargar informes HTML para su posterior análisis.

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

La manera más sencilla de crear una canalización si la aplicación usa Gulp es usar elNode.js con la plantilla de compilación de Gulp al crear la canalización. Esto agregará automáticamente varias tareas para invocar comandos de Gulp y publicar artefactos. En la tarea, seleccione Habilitar cobertura de código para habilitar la cobertura de código mediante Javascript.

Grunt está preinstalado en agentes hospedados por Microsoft. Para ejecutar el comando grunt en el archivo YAML:

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

Si los pasos del archivo Gruntfile.js requieren autenticación con un registro npm:

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

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

La manera más sencilla de crear una canalización si la aplicación usa Grunt es usar elNode.js con la plantilla de compilación grunt al crear la canalización. Esto agregará automáticamente varias tareas para invocar comandos de Gulp y publicar artefactos. En la tarea, seleccione la opción Publicar en TFS/Team Services para publicar los resultados de las pruebas y seleccione Habilitar cobertura de código para habilitar la cobertura de código mediante Javascript.

Publicar archivos en Azure Pipelines

Para cargar simplemente todo el directorio de trabajo de archivos, use la tarea Publicar Artifacts compilación y agregue lo siguiente al archivo.

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

Para cargar un subconjunto de archivos, copie primero los archivos necesarios del directorio de trabajo en un directorio de ensayo con la tarea Copiar archivos y, a continuación, use la tarea Publicar Artifacts compilación.

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

- task: PublishBuildArtifacts@1

Publicación de un módulo en un registro npm

Si la salida del proyecto es un módulo para su uso por otros proyectos y no una aplicación web, use la tarea npm para publicar el módulo en un registro local o en la red npm registro npm. npm Debe proporcionar una combinación de nombre y versión única cada vez que publique, por lo que debe tener esto en cuenta al configurar los pasos de publicación como parte de una canalización de versión o desarrollo.

En el primer ejemplo se supone que administra la información de versión (por ejemplo, a través de una versión de npm)mediante cambios en el archivo en el control de versiones. En este ejemplo se usa la tarea script para publicar en el registro público.

- script: npm publish

En el ejemplo siguiente se publica en un registro personalizado definido en el archivo del .npmrc repositorio. Deberá configurar una conexión de servicio npm para insertar credenciales de autenticación en la conexión a medida que se ejecuta la compilación.

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

En el ejemplo final se publica el módulo en una Azure DevOps Services de administración de paquetes.

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

Para obtener más información sobre el control de versiones y la publicación de paquetes npm, vea Publish npm packages (Publicar paquetes npm) y How can I version my npm packages as part of the build process? (¿Cómo puedo crear versiones de mis paquetes npm como parte del proceso de compilación?).

Implementación de una aplicación sitio

Para crear un .zip de archivos que esté listo para publicarse en una aplicación web, use la tarea Archivos de archivo:

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

Para publicar este archivo en una aplicación web, consulte Implementación de aplicaciones web de Azure.

Publicar artefactos en Azure Pipelines

Use la tarea Publicar Artifacts para publicar archivos de la compilación en Azure Pipelines o TFS.

Publicar en un registro npm

Para crear y publicar un paquete npm, use la tarea npm. Para obtener más información sobre el control de versiones y la publicación de paquetes npm, vea Publicar paquetes npm.

Implementación de una aplicación sitio

Para crear un .zip de archivos que esté listo para publicarse en una aplicación web, use la tarea Archivos de archivo. Para publicar este archivo en una aplicación web, consulte Implementación de aplicaciones web de Azure.

Compilación e inserción de imágenes en el registro de contenedor

Una vez que el código fuente se compila correctamente y las pruebas unitarias se han realizado correctamente, también puede compilar una imagen e insertarla en un registro de contenedor.