Creación de un servidor de estado de solicitud de extracción con Node.js

Azure Repos | Azure DevOps Server 2020 | Azure DevOps Server 2019 | TFS 2018

El flujo de trabajo de solicitud de extracción (PR) proporciona a los desarrolladores la oportunidad de obtener comentarios sobre el código de los elementos del mismo nivel, así como de las herramientas automatizadas. Los servicios y herramientas de terceros pueden participar en el flujo de trabajo de la solicitud de integración mediante la API de estado de la solicitud de solicitud. Este artículo le guía por el proceso de creación de un servidor de estado para validar las PR en un repositorio Azure DevOps Services Git. Para obtener más información sobre el estado de la solicitud de solicitud de extracción, consulte Personalización y extensión de flujos de trabajo de solicitud de extracción con el estado de solicitud de extracción.

Requisitos previos

  • Una organización de Azure DevOps con un repositorio de Git. Si no tiene una organización, regístrese para cargar y compartir código en repositorios de Git privados ilimitados gratuitos.
  • Instale VS Code u otro editor de código de su elección. Las instrucciones de esta guía usan VS Code pero los pasos de otros editores de código son similares.

Instalación de Node.js

Para instalar Node.js, descargue la versión LTS adecuada para su plataforma. La descarga contiene un instalador, que puede ejecutar para instalar el entorno de ejecución Node.js en el equipo local. Al instalar Node.js, asegúrese de mantener la parte del administrador de paquetes npm de la instalación, que está seleccionada de forma predeterminada.

Creación de un servidor web básico mediante Express

En los pasos de esta sección se usa Express, que es un marco web ligero para Node.js que proporciona una serie de métodos de utilidad HTTP que simplifican la creación de un servidor web. Este marco proporciona las funciones básicas necesarias para escuchar eventos de pr.

  1. Desde la línea de comandos, cree una nueva carpeta de proyecto para el servidor web.

    mkdir pr-server
    cd pr-server
    
  2. Use el npm init comando para crear un nuevo archivo para el package.json proyecto.

    npm init
    

    Presione Entrar para aceptar los valores predeterminados de todas las opciones excepto el punto de entrada. Cámbiela a app.js.

    entry point: (index.js) app.js
    
  3. Instale Express en el directorio pr-server mediante el siguiente comando. Esto instala Express y lo guarda en la lista de dependencias.

    npm install express
    
  4. Cree una aplicación Express sencilla sobre la que compilar para el servidor de estado de la pr. Los pasos siguientes se basan en el ejemplo de Express Hello world. Abra la carpeta del proyecto en VS Code ejecutando el siguiente comando desde la pr-server carpeta .

    code .
    
  5. Cree un nuevo archivo (Ctrl + N) y pegue el código de ejemplo siguiente.

    const express = require('express')
    const app = express()
    
    app.get('/', function (req, res) {
    res.send('Hello World!')
    })
    
    app.listen(3000, function () {
    console.log('Example app listening on port 3000!')
    })
    
  6. Guarde el archivo como app.js.

  7. Ejecute el servidor web básico con el siguiente comando:

    node app.js
    

    Para comprobar que el servidor se está ejecutando, consulte http://localhost:3000/ .

Escucha de solicitudes HTTP POST

El servidor web va a recibir solicitudes de Azure DevOps Services, por lo que debe controlar POST esas solicitudes en el servidor.

  1. Al final del app.js archivo, agregue el código siguiente y guarde el archivo.

    app.post('/', function (req, res) {
        res.send('Received the POST')
    })
    
  2. Vuelva a ejecutar el servidor web con el siguiente comando:

    node app.js
    

Configuración de un enlace de servicio para eventos de PR

Los enlaces de servicio son una Azure DevOps Services que puede alertar a servicios externos cuando se producen determinados eventos. En este ejemplo, querrá configurar dos enlaces de servicio para eventos de PR, de modo que se pueda notificar al servidor de estado. El primero será para el evento de creación de la solicitud de extracción y el segundo para el evento actualizado de la solicitud de extracción.

Para recibir las notificaciones de enlace de servicio, deberá exponer un puerto a la red pública de Internet. La utilidad ngrok es muy útil para hacerlo en un entorno de desarrollo.

  1. Descargue y descomprima la versión de ngrok adecuada para su plataforma.

  2. Use ngrok para empezar a escuchar en el mismo puerto que el servidor de ejemplo: el puerto 3000. Ejecute el siguiente comando en una nueva ventana de comandos.

    ngrok http 3000
    

    Ngrok creará una dirección URL pública que reenvía a localhost:3000 . Tenga en cuenta esa dirección URL, ya que la necesitará en el paso siguiente. Tendrá un aspecto similar al siguiente:

    http://c3c1bffa.ngrok.io
    
  3. Vaya al proyecto en Azure DevOps, por ejemplo,https://dev.azure.com/<your account>/<your project name>

  4. En el menú de navegación, mantenga el puntero sobre el engranaje y seleccione Service Hooks (Enlaces de servicio).

    Elija Enlaces de servicio en el menú de administración.

  5. Si este es el primer enlace de servicio, seleccione + Crear suscripción.

    Seleccione Crear una nueva suscripción en la barra de herramientas.

    Si ya tiene otros enlaces de servicio configurados, seleccione el signo más verde (+) para crear una nueva suscripción de enlace de servicio.

    Seleccione el signo más verde para crear una nueva suscripción de enlace de servicio.

  6. En el cuadro de diálogo Nueva suscripción de enlaces de servicio, seleccione Web Hooks en la lista de servicios y, a continuación, seleccione Siguiente.

    Selección de web hooks en la lista de servicios

  7. Seleccione Solicitud de extracción creada en la lista de desencadenadores de eventos y, a continuación, seleccione Siguiente.

    Selección de la solicitud de extracción creada en la lista de desencadenadores de eventos

  8. En la página Acción, escriba la dirección URL de ngrok en el cuadro DIRECCIÓN URL. Seleccione Probar para enviar un evento de prueba al servidor.

    Escriba la dirección URL y seleccione Probar para probar el enlace de servicio.

    En la ventana de la consola de ngrok, verá un entrante que devolvió un , que indica que el servidor POST recibió el evento de enlace de 200 OK servicio.

    HTTP Requests
    -------------
    
    POST /                         200 OK
    

    En la ventana Notificación de prueba, seleccione la pestaña Respuesta para ver los detalles de la respuesta del servidor. Debería ver una longitud de contenido de 17 que coincida con la longitud de la cadena del controlador POST (es decir, "Received the POST").

    Seleccione la pestaña respuesta para ver los resultados de la prueba.

  9. Cierre la ventana Notificación de prueba y seleccione Finalizar para crear el enlace de servicio.

Vuelva a seguir los pasos del 3 al 9, pero esta vez configure el evento de actualización de la solicitud de extracción.

Importante

Asegúrese de seguir los pasos anteriores dos veces y crear enlaces de servicio tanto para la solicitud de extracción creada como para los eventos actualizados de la solicitud de extracción.

Publicación del estado en las solicitud de acceso

Ahora que el servidor puede recibir eventos de enlace de servicio cuando se crean nuevos PR, actualíctelo para devolver el estado a la solicitud de solicitud de registro.

  1. Las solicitudes de enlace de servicio incluyen una carga JSON que describe el evento. Para ayudar a analizar el JSON devuelto por el enlace de servicio, instale el paquete body-parser.

    npm install body-parser
    
  2. Actualice app.js para usar el analizador de cuerpo para analizar application/json .

    var bodyParser = require('body-parser')
    
    app.use(bodyParser.json())
    
  3. Para simplificar la realización de llamadas a la API rest Azure Repos, instale el paquete azure-devops-node-api.

    npm install azure-devops-node-api 
    
  4. Actualice app.js para usar el paquete azure-devops-node-api, configure los detalles de una conexión a su cuenta y obtenga una instancia de la API de Git.

    const vsts = require("azure-devops-node-api")
    
    const collectionURL = process.env.COLLECTIONURL    
    const token = process.env.TOKEN
    
    var authHandler = vsts.getPersonalAccessTokenHandler(token)
    var connection = new vsts.WebApi(collectionURL, authHandler)
    
    var vstsGit = connection.getGitApi().then( 
        vstsGit => {                                    
            vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
                console.log(result);
            },
            error => {
                console.log(error);
            })
        }, 
        error => { 
            console.log(error);
        } 
    );
    
  5. Cree una variable de entorno para la dirección URL de la colección, reemplazando <your account> por el nombre de la Azure DevOps organización.

    setx COLLECTIONURL "https://dev.azure.com/<your account>"
    
  6. Cree un token de autenticación personal (PAT) para que lo use la aplicación, siguiendo estas instrucciones: Autenticación con tokens de acceso personal. Debe crear un nuevo PAT para cada servicio que use para acceder a su cuenta y asignarle el nombre adecuado.

  7. Cree una variable de entorno para el PAT.

    setx TOKEN "yourtokengoeshere"
    
  8. Actualice la función post() para leer los detalles de la solicitud de solicitud de acceso de la carga del enlace de servicio. Necesitará estos valores para devolver el estado.

    var repoId = req.body.resource.repository.id
    var pullRequestId = req.body.resource.pullRequestId
    var title = req.body.resource.title
    
  9. Compile el objeto de estado para publicarlo en la solicitud de solicitud de acceso.

    Statees una enumeración de tipo State Use succeeded para indicar que la pr ha superado la comprobación de estado y está lista para combinarse.

    es un valor de cadena que se mostrará al usuario en la sección Estado y la fuente de actividad en la vista de detalles description de la pr.

    es una dirección URL que se usará para crear un vínculo para el texto de descripción en la targetUrl sección Estado y la fuente de actividad. Este es el lugar al que los usuarios pueden ir para obtener más información sobre el estado, por ejemplo, un informe de compilación o una ejecución de prueba. Si no se especifica ninguna dirección URL, la descripción aparecerá como texto sin vínculo.

    El contexto name y se usan para clasificar el estado y distinguirlo del estado de publicación de otros genre servicios.

        var prStatus = {
            "state": "succeeded",
            "description": "Ready for review",
            "targetUrl": "https://visualstudio.microsoft.com",
            "context": {
                "name": "wip-checker",
                "genre": "continuous-integration"
            }
        }
    
  10. En lugar de simplemente publicar el estado a la vista, inspeccione el título de la pr para ver si el usuario ha indicado si la pr es un trabajo en curso agregando succeededsucceeded al título. Si es así, cambie el estado publicado de nuevo en la pr.

        if (title.includes("WIP")) {
            prStatus.state = "pending"
            prStatus.description = "Work in progress"
        }
    
  11. Por último, publique el estado mediante el createPullRequestStatus() método . Requiere el objeto de estado, el identificador del repositorio y el identificador de solicitud de extracción. Salida de la respuesta a la consola del nodo para que pueda ver el resultado de la publicación.

    vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
        console.log(result)
    })
    
  12. El método resultante debe tener un aspecto parecido al siguiente:

    app.post("/", function (req, res) {
    
        // Get the details about the PR from the service hook payload
        var repoId = req.body.resource.repository.id
        var pullRequestId = req.body.resource.pullRequestId
        var title = req.body.resource.title
    
        // Build the status object that we want to post.
        // Assume that the PR is ready for review...
        var prStatus = {
            "state": "succeeded",
            "description": "Ready for review",
            "targetUrl": "https://visualstudio.microsoft.com",
            "context": {
                "name": "wip-checker",
                "genre": "continuous-integration"
            }
        }
    
        // Check the title to see if there is "WIP" in the title.
        if (title.includes("WIP")) {
    
            // If so, change the status to pending and change the description.
            prStatus.state = "pending"
            prStatus.description = "Work in progress"
        }
    
        // Post the status to the PR
        vstsGit.createPullRequestStatus(prStatus, repoId, pullRequestId).then( result => {
            console.log(result)
        })
    
        res.send("Received the POST")
    })
    
  13. Guarde app.js y reinicie la aplicación node.

    node app.js
    

Creación de una nueva pr para probar el servidor de estado

Ahora que el servidor está ejecutando y escuchando notificaciones de enlace de servicio, cree una solicitud de extracción para probarla.

  1. Comience en la vista de archivos. Edite readme.md archivo en el repositorio (o cualquier otro archivo si no tiene un readme.md).

    Seleccione Editar en el menú contextual.

  2. Realice una edición y confirme los cambios en el repositorio.

    Edite el archivo y seleccione Confirmar en la barra de herramientas.

  3. Asegúrese de confirmar los cambios en una nueva rama para que pueda crear una PR en el paso siguiente.

    Escriba un nuevo nombre de rama y seleccione Confirmar.

  4. Seleccione el vínculo Crear una solicitud de extracción.

    Seleccione Crear una solicitud de extracción en la barra de sugerencias.

  5. Agregue WIP en el título para probar la funcionalidad de la aplicación. Seleccione Crear para crear la pr.

    Agregar WIP al título de pr. predeterminado

  6. Una vez creada la SOLICITUD, verá la sección estado, con la entrada Trabajo en curso que vincula a la dirección URL especificada en la carga.

    Sección Estado con la entrada Trabajo en curso.

  7. Actualice el título de la pr. y quite el texto de WIP y observe que el estado cambia de Trabajo en curso a Listo para revisión.

Pasos siguientes