Nota:
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
Azure DevOps (Visual Studio Team Services y Team Foundation Server) se compone de un conjunto de herramientas y servicios que ayudan a los desarrolladores a implementar procesos de DevOps, Integración continua e implementación continua para sus proyectos de desarrollo.
Este artículo explica los pasos necesarios para configurar su entorno de Azure DevOps con la integración continua y la implementación continua para automatizar las compilaciones, implementación y pruebas de unidad de SharePoint Framework.
Elegir entre las compilaciones y versiones de Azure DevOps y Azure Multi-stage Pipelines (versión preliminar)
Actualmente, hay dos métodos disponibles para implementar la integración continua y la implementación en Azure DevOps. Compilaciones y versiones de Azure es el método tradicional, con experiencia de edición gráfica y almacenamiento de definiciones en un documento JSON oculto para el usuario.
Se describen ambos métodos para SharePoint Framework:
- Compilación y lanzamiento de Azure (este artículo)
- Azure Multi-stage Pipelines
Integración continua
La integración continua (CI) ayuda a los desarrolladores a integrar código en un repositorio compartido al comprobar automáticamente la compilación mediante pruebas de unidad y el empaquetado de la solución cada vez que se envían nuevos cambios de código.
La configuración de Azure DevOps para la integración continua con una solución de SharePoint Framework requiere lo siguiente:
- Crear la definición de compilación
- Instalar NodeJS
- Restaurar dependencias
- Ejecutar pruebas de unidad
- Importar resultados de pruebas
- Importar información de cobertura de código
- Unir la solución
- Empaquetar la solución
- Preparar los artefactos
- Publicar los artefactos
Crear la definición de compilación
La definición de compilación, como su nombre indica, incluye todas las definiciones y las configuraciones de la compilación. Inicie la configuración de la integración continua mediante la creación de una nueva definición de compilación y la vinculación a su repositorio.
Nota:
Las definiciones de compilación se pueden describir como una plantilla de proceso. Es un conjunto de tareas de configuración que se ejecutarán una tras otra en el código fuente cada vez que se activa una compilación. Se pueden agrupar las tareas en fases, una definición de compilación contiene al menos una fase de forma predeterminada. Puede agregar nuevas tareas a la fase haciendo clic en el gran signo más junto al nombre de la fase.
Instalar NodeJS versión 10
Tras crear la definición de compilación, lo primero que necesita hacer es instalar NodeJS. Asegúrese de instalar la versión 10, ya que SharePoint Framework depende de ella.
Nota:
Asegúrese de especificar 10.x en el campo Version Spec. Si su proyecto se basa en SharePoint Framework 1.7.1 o versiones anteriores, use la versión 8. x.
Restaurar dependencias
Como las dependencias de terceros no se almacenan en el control de origen, debe restaurarlas antes de empezar a crear el proyecto. Para hacerlo, agregue una tarea npm y establezca el comando en install.
Ejecutar pruebas de unidad
SharePoint Framework no proporciona un marco de prueba de forma predeterminada (desde 1.8.0), en este ejemplo se usará Jest. Estos módulos se instalarán más adelante y se recomienda como mínimo probar la lógica empresarial del código para recibir comentarios sobre posibles problemas o regresiones tan pronto como sea posible. Para que Azure DevOps ejecute las pruebas de unidad, agregue una tarea npm. Establezca command como custom y, en el campo custom command, introduzca test. A continuación, establezca la opción Working Directory como $(Build.SourcesDirectory).
Configurar Jest
De forma predeterminada, los proyectos SharePoint Framework no incluyen un marco de prueba. En este ejemplo se usará Jest.
npm i jest jest-junit @voitanos/jest-preset-spfx-react16 -D
Nota:
Los proyectos generados en SharePoint Framework 1.7.1 y versiones anteriores se basan en React versión 15. Si usa React 15, debe instalarlo @voitanos/jest-preset-spfx-react15 en su lugar. Para otros marcos (Knockout, etc.) es posible que necesite instalar un valor preestablecido diferente en su lugar.
También debe configurar Jest, para hacerlo, cree un archivo config/jest.config.json y agregue el contenido siguiente.
{
"preset": "@voitanos/jest-preset-spfx-react16",
"rootDir": "../src",
"coverageReporters": [
"text",
"json",
"lcov",
"text-summary",
"cobertura"
],
"reporters": [
"default",
["jest-junit", {
"suiteName": "jest tests",
"outputDirectory": "temp/test/junit",
"outputName": "junit.xml"
}]
]
}
También necesita configurar el proyecto para utilizar jest al escribir los comandos. Para ello, edite el archivo package.json y agregue o reemplace estos dos scripts con los valores siguientes:
"test": "./node_modules/.bin/jest --config ./config/jest.config.json",
"test:watch": "./node_modules/.bin/jest --config ./config/jest.config.json --watchAll"
Escribir una prueba de unidades
Para escribir la primera prueba de unidad, cree un nuevo archivo src/webparts/webPartName/tests/webPartName.spec.ts y agregue el siguiente contenido:
import 'jest'
describe("webPartName", () => {
test("should add numbers Sync fluent", () => {
const result = 1 + 3;
expect(result).toBe(4); // fluent API
});
});
Nota:
Puede obtener más información sobre cómo escribir pruebas de unidad mediante Jest aquí. Puede obtener más información acerca de cómo probar las aplicaciones de reacción con Jest y Enzyme aquí (puede ignorar la parte de la configuración).
Importar resultados de pruebas
Para obtener información de los resultados de las pruebas junto con los resultados de la compilación, necesita importar estos resultados de pruebas desde el ejecutor de pruebas a Azure DevOps. Para ello, agregue una nueva tarea Publish Test Results. Establezca el campo Test results files como **/junit.xml y Search folder como $(Build.SourcesDirectory).
Importar información de cobertura de código
Para obtener reportes de la cobertura del código con el estado de la compilación deberá agregar una tarea para importar esa información. Para configurar la información de cobertura de código, agregue las tareas publish code coverage results. Asegúrese de que establece la herramienta en Cobertura, Summary files en $(Build.SourcesDirectory)/**/*-coverage.xml.
Unir la solución
Primero debe unir la solución para obtener recursos estáticos que un explorador web pueda comprender. Agregar otra tarea gulp, establezca la ruta de acceso gulpfile, establezca el campo Gulp Tasks en unir y agregue --ship en los Arguments.
Empaquetar la solución
Ahora que tiene activos estáticos, el siguiente paso es combinar los activos en un paquete que SharePoint podrá implementar. Agregue otra tarea gulp, establezca la ruta de acceso de gulpfile, establezca el campo Gulp Tasks en package-solution and añada --ship en los Arguments.
Preparar los artefactos
De forma predeterminada, una compilación de Azure DevOps no conserva ningún archivo. Para asegurarse de que se conservan los archivos necesarios para la publicación, deberá indicar explícitamente que archivos deben conservarse.
Agregue una tarea Copy Files y establezca los Contents en **\*.sppkg (el paquete de SharePoint creado con la tarea anterior) y la carpeta de destino en $(build.artifactstagingdirectory)/drop.
Publicar los artefactos
Ahora que ha recopilado todos los archivos necesarios para la implementación en una carpeta especial de artefactos, aún necesita indicar a Azure DevOps para conserve estos archivos después de ejecutar la compilación. Para hacerlo, agregue una tarea Publish artifacts y establezca Path to publish en $(build.artifactstagingdirectory)/drop y el Artifact name en drop.
Implementación continua
La implementación continua (CD) toma paquetes de código validados del proceso de compilación y los implementa en un entorno de almacenamiento provisional o de producción. Los desarrolladores pueden identificar qué implementaciones funcionaron correctamente o no y reducir los problemas a las versiones específicas del paquete.
La configuración de Azure DevOps para la implementación continua con una solución de SharePoint Framework requiere lo siguiente:
- Crear la definición de la versión
- Vincular el artefacto de la compilación
- Crear el entorno
- Instalar NodeJS
- Instalar la CLI para Microsoft 365
- Conectarse al catálogo de aplicaciones
- Agregar el paquete de solución al catálogo de aplicaciones
- Implementar la aplicación
- Configurar las variables en el entorno
Crear la definición de la versión
Empiece por crear una nueva definición de versión con una plantilla vacía. Una definición de versión es un proceso que se usa para identificar los elementos siguientes para la implementación:
- Entorno
- Tareas de implementación
- Crear artefactos
Vincular el artefacto de la compilación
Haga clic en Add an artifact y seleccione la definición de compilación que haya creado. Anote el nombre Source Alias que ha establecido, ya que deberá usarlo en las siguientes tareas.
Crear el entorno
Cuando crea el entorno de implementación continua, puede asignar un nombre y configurar aprobaciones previas a la implementación, filtros de artefactos (es decir, implementar la versión solo si proviene de esta o esa rama) y mucho más. Para hacerlo, haga clic en los botones alrededor del cuadro del entorno o directamente en el título.
Instalar NodeJS
Al hacer clic en 1 job, 0 tasks puede tener acceso a la vista de configuración de tareas, que funciona de forma similar a la definición de compilación. Aquí puede seleccionar el conjunto de tareas que solo se ejecutarán para este entorno específico. Esto incluye instalar NodeJS versión 10 o posterior.
Agregar una tarea Node tool installer y definir 10.X en el campo Version Spec. Si su proyecto se basa en SharePoint Framework 1.7.1 o versiones anteriores, use la versión 8. X.
Instalar la CLI para Microsoft 365
La infraestructura de lenguaje común (CLI) de Microsoft 365 es un proyecto de código abierto creado por la comunidad de patrones y prácticas (PnP) de Microsoft 365. Para aprovechar la CLI como parte de la definición de versión, primero debe instalarla. Después, podrá aprovechar los comandos disponibles para administrar la implementación. Agregue una tarea npm, seleccione un comando Custom y escriba install -g @pnp/cli-microsoft365 en el campo Command and Arguments.
Nota:
Obtenga más información sobre la CLI para Microsoft 365
Conectarse a SharePoint Online
Antes de usar el catálogo de aplicaciones en el entorno de implementación, primero debe autenticarse en el catálogo de aplicaciones de su espacio empresarial. Para ello, agregue una tarea Command Line y pegue el comando siguiente en el campo scriptm365 login -t password -u $(username) -p $(password).
Nota:
Si usa la CLI de Microsoft 365 para conectarse al espacio empresarial por primera vez, deberá realizar un inicio de sesión interactivo con la cuenta en primer lugar. Esto es necesario para conceder acceso a la aplicación del Shell de administración de Office 365 PnP que usa la CLI para Microsoft 365 para obtener acceso a su espacio empresarial en nombre de la cuenta. En caso contrario, se producirá un error en la tarea al iniciar una sesión no interactiva. Más información disponible en la guía del usuario sobre la CLI para Microsoft 365.
Nota:
La CLI de Microsoft 365 es una solución de código abierto con una comunidad activa que ofrece su soporte. No hay ningún contrato de nivel de servicio para el soporte de la herramienta de código abierto de Microsoft.
Agregar el paquete de solución al catálogo de aplicaciones
Cargue el paquete de soluciones en el catálogo de aplicaciones agregando otra tarea Command Line y pegando la siguiente línea de comandos en el campo Scriptm365 spo app add -p $(System.DefaultWorkingDirectory)/SpFxDevOps/drop/SharePoint/solution/sp-fx-devops.sppkg --overwrite
Nota:
La ruta de acceso del paquete depende del nombre de la solución (consulte la configuración del proyecto), así como el Source Alias definido previamente, asegúrese de que coinciden.
Nota:
Puede agregar una solución al catálogo de aplicaciones de la colección de sitios agregando --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope sitecollection
Implementar la aplicación
El último paso en esta configuración es implementar la aplicación en el catálogo de aplicaciones para que esté disponible para todas las colecciones de sitios en el espacio empresarial al ser la versión más reciente. Agregue otra tarea Command Line y pegue la siguiente línea de comandos en el campo Scriptm365 spo app deploy --name sp-fx-devops.sppkg
Nota:
Asegúrese de actualizar el nombre del paquete.
Nota:
Puede implementar una solución desde un catálogo de aplicaciones de la colección de sitios agregando --appCatalogUrl https://$(tenant).sharepoint.com/$(catalogsite) --scope sitecollection
Configurar las variables en el entorno
Las tareas que haya configurado en el último paso dependen de las variables de proceso de Azure DevOps (identificadas fácilmente con la sintaxis $(variableName)). Necesita definir esas variables antes de poder ejecutar la definición de compilación. Para ello, haga clic en la pestaña Variables. Agregue las siguientes variables
| Nombre | Valor |
|---|---|
| catalogsite | Opcional. La ruta de acceso relativa al servidor del sitio del catálogo de aplicaciones, por ejemplo, sites/appcatalogcuando se carga en un Catálogo de aplicaciones de la colección de sitios |
| contraseña | Contraseña del usuario con permisos de administrador en el espacio empresarial, no olvide marcar el candado para ocultarla a otros usuarios |
| usuario | Nombre del usuario con permisos de administrador en el espacio empresarial |
| tenant | Opcional. Nombre del espacio empresarial, https://tenant.sharepoint.com por ejemplo tenant, cuando se carga en un Catálogo de aplicaciones de la colección de sitios |
Nota:
Asegúrese de guardar la definición de la versión.
Pruebas
Para probar el proceso de implementación continua recién creado, vuelva a la sección Builds en Azure DevOps, seleccione la definición de su compilación y haga clic en Queue. Seleccione la rama y haga clic en Queue. Se creará e iniciará una nueva compilación.
Después de unos minutos, la compilación debería completarse y mostrar una página de resultados similar a la siguiente.
Si se desplaza a la sección Release de Azure DevOps, una nueva versión debería haberse iniciado automáticamente. Tras unos minutos se completará la publicación y se implementará la solución de SharePoint Framework en su espacio empresarial.
La canalización de DevOps para su solución de SharePoint Framework en Azure DevOps ya está configurada y preparada para una mejor personalización.