Tutorial: Revisión lint del código mediante una acción de GitHub

En este tutorial, añadirá la acción Super-Linter de GitHub a un flujo de trabajo de Amazon CodeCatalyst. La acción Super-Linter inspecciona el código, encuentra áreas donde el código tiene errores, problemas de formato y constructos sospechosos; luego, envía los resultados a la consola de CodeCatalyst. Después de añadir el linter al flujo de trabajo, ejecute el flujo de trabajo para hacer una revisión lint de una aplicación de Node.js de muestra (app.js). A continuación, corrija los problemas detectados y vuelva a ejecutar el flujo de trabajo para comprobar si las soluciones han funcionado.

sugerencia

Valore la posibilidad de usar Super-Linter para hacer una revisión lint en archivos YAML, como plantillas de AWS CloudFormation.

Requisitos previos

Antes de comenzar, necesitará lo siguiente:

• Un espacio de CodeCatalyst con una Cuenta de AWS conectada. Para obtener más información, consulte Creación de un espacio.

• Un proyecto vacío en el espacio de CodeCatalyst, llamado codecatalyst-linter-project. Use la opción Empezar desde cero para crear este proyecto.

  Para obtener más información, consulte Creación de un proyecto vacío en Amazon CodeCatalyst.

Paso 1: crear un repositorio de código fuente

En este paso, creará un repositorio de código fuente en CodeCatalyst. Utilizará este repositorio para almacenar el archivo fuente de la aplicación de muestra (app.js) para este tutorial.

Para obtener más información sobre los repositorios de código fuente, consulte Creación de un repositorio de código fuente.

Creación de un repositorio de código fuente

1. Abra la consola de CodeCatalyst en https://codecatalyst.aws/.

2. Vaya a su proyecto codecatalyst-linter-project.

3. En el panel de navegación, elija Código y, a continuación, elija Repositorios de origen.

4. Elija Agregar repositorio y, a continuación, elija Crear repositorio.

5. En Nombre del repositorio, escriba:

   codecatalyst-linter-source-repository

6. Seleccione Crear.

Paso 2: añadir un archivo app.js

En este paso, añadirá un archivo app.js al repositorio de código fuente. El app.js contiene un código de función con algunos errores que el linter encontrará.

Adición del archivo app.js

1. En la consola de CodeCatalyst, seleccione el proyecto codecatalyst-linter-project.

2. En el panel de navegación, elija Código y, a continuación, elija Repositorios de origen.

3. En la lista de repositorios de código fuente, elija el repositorio codecatalyst-linter-source-repository.

4. En Archivos, elija Crear archivo.

5. En el cuadro de texto, introduzca el siguiente código:

   // const axios = require('axios')
   // const url = 'http://checkip.amazonaws.com/';
   let response;
   /**
    *
    * Event doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html#api-gateway-simple-proxy-for-lambda-input-format
    * @param {Object} event - API Gateway Lambda Proxy Input Format
    *
    * Context doc: https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-context.html 
    * @param {Object} context
    *
    * Return doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html
    * @returns {Object} object - API Gateway Lambda Proxy Output Format
    *
    */
   exports.lambdaHandler = async (event, context) => {
     try {
       // const ret = await axios(url);
       response = {
         statusCode: 200,
         'body': JSON.stringify({
           message: 'hello world'
           // location: ret.data.trim()
         })
       }
     } catch (err) {
       console.log(err)
       return err
     }
   
       return response
   }

6. En Nombre del archivo, escriba app.js. Conserve las otras opciones predeterminadas.

7. Elija Commit (Confirmar).

   Ahora ha creado un archivo llamado app.js.

Paso 3: crear un flujo de trabajo que ejecute la acción Super-Linter

En este paso, creará un flujo de trabajo que ejecuta la acción Super-Linter al insertar código en el repositorio de código fuente. El flujo de trabajo consta de los siguientes componentes básicos, que se definen en un archivo YAML:

• Un desencadenador: este desencadenador inicia la ejecución automática del flujo de trabajo cuando se introduce un cambio en el repositorio de código fuente. Para obtener más información acerca de los disparadores, consulte Inicio de un flujo de trabajo y ejecución automática mediante desencadenadores.

• Una acción de GitHub Actions: al desencadenarse, la acción de GitHub Actions ejecuta la acción Super-Linter que, a su vez, inspecciona todos los archivos del repositorio de código fuente. Si el linter encuentra un problema, habrá un error en la acción del flujo de trabajo.

Creación de un flujo de trabajo que ejecute la acción Super-Linter

1. En la consola de CodeCatalyst, seleccione el proyecto codecatalyst-linter-project.

2. En el panel de navegación, elija CI/CD y, a continuación, elija Flujos de trabajo.

3. Seleccione Crear flujo de trabajo.

4. En Repositorio de origen, elija codecatalyst-linter-source-repository.

5. En Ramificación, elija main.

6. Seleccione Crear.

7. Elimine el código de ejemplo de YAML.

8. Añada el YAML siguiente:

   Name: codecatalyst-linter-workflow
   SchemaVersion: "1.0"
   Triggers:
     - Type: PUSH
       Branches:
         - main
   Actions:
     SuperLinterAction:
       Identifier: aws/github-actions-runner@v1
       Configuration:
         Steps:
           github-action-code

   En el código anterior, reemplace github-action-code por el código de la acción Super-Linter, tal y como se indica en los siguientes pasos de este procedimiento.

9. Vaya a la página de Super-Linter en GitHub Marketplace.

10. En steps: (minúsculas), busque el código y péguelo en el flujo de trabajo de CodeCatalyst, bajo Steps: (mayúsculas).

    Cambie el código de la acción de GitHub para que se ajuste a los estándares de CodeCatalyst, tal y como se muestra en el siguiente código.

    Este es el aspecto del flujo de trabajo de CodeCatalyst:

    Name: codecatalyst-linter-workflow
    SchemaVersion: "1.0"
    Triggers:
      - Type: PUSH
        Branches:
          - main
    Actions:
      SuperLinterAction:
        Identifier: aws/github-actions-runner@v1
        Configuration:
          Steps:
            - name: Lint Code Base
              uses: github/super-linter@v4
              env:
                VALIDATE_ALL_CODEBASE: "true"
                DEFAULT_BRANCH: main

11. (Opcional) Seleccione Validar para asegurarse de que el código de YAML del flujo de trabajo es válido antes de confirmarlo.

12. Seleccione Confirmar, introduzca un mensaje de confirmación, seleccione su repositorio codecatalyst-linter-source-repository y vuelva a seleccionar Confirmar.

    Ahora ha creado un flujo de trabajo. La ejecución del flujo de trabajo se inicia automáticamente debido al desencadenador definido en la parte superior del flujo de trabajo.

Consulta de la ejecución del flujo de trabajo en curso

1. En el panel de navegación, elija CI/CD y, a continuación, elija Flujos de trabajo.

2. Elija el flujo de trabajo que acaba de crear: codecatalyst-linter-workflow.

3. En el diagrama de flujo de trabajo, seleccione SuperLinterAction.

4. Espere a que la acción tenga un error. Este error era esperable, ya que linter encontró problemas en el código.

5. Deje la consola de CodeCatalyst abierta y vaya a Paso 4: solucionar los problemas encontrados por Super-Linter.

Paso 4: solucionar los problemas encontrados por Super-Linter

Super-Linter debería haber encontrado problemas en el código app.js, así como en el archivo README.md incluido en el repositorio de código fuente.

Resolución de los problemas encontrados por linter

1. En la consola de CodeCatalyst, seleccione la pestaña Registros y, a continuación, Revisión lint en base de código.

   Aparecerán los registros generados por la acción Super-Linter.

2. En los registros de Super-Linter, desplácese hacia abajo, hasta aproximadamente la línea 90, donde encontrará el origen de los problemas. Tendrán un aspecto similar al siguiente:

   /github/workspace/hello-world/app.js:3:13: Extra semicolon.
   /github/workspace/hello-world/app.js:9:92: Trailing spaces not allowed.
   /github/workspace/hello-world/app.js:21:7: Unnecessarily quoted property 'body' found.
   /github/workspace/hello-world/app.js:31:1: Expected indentation of 2 spaces but found 4.
   /github/workspace/hello-world/app.js:32:2: Newline required at end of file but not found.

3. Corrija app.js y README.md en el repositorio de código fuente y confirme los cambios.

   sugerencia

   Para corregir README.md, añada markdown al bloque de código de la siguiente manera:

   ```markdown
   Setup examples:
   ...
   ```

   Los cambios inician otro flujo de trabajo que se ejecuta automáticamente. Espere a que el flujo de trabajo finalice. Si ha solucionado todos los problemas, el flujo de trabajo debería funcionar correctamente.

Limpieza

Limpie en CodeCatalyst para eliminar los rastros de este tutorial en el entorno.

Limpieza en CodeCatalyst

1. Abra la consola de CodeCatalyst en https://codecatalyst.aws/.

2. Elimine codecatalyst-linter-source-repository.

3. Elimine codecatalyst-linter-workflow.

En este tutorial, hemos visto cómo añadir la acción Super-Linter de GitHub a un flujo de trabajo de CodeCatalyst con el fin de hacer una revisión lint de parte del código.