Note:

Este tutorial requiere acceso a Oracle Cloud. Para registrarse en una cuenta gratuita, consulte Introducción a la cuenta gratuita de Oracle Cloud Infrastructure.
Utiliza valores de ejemplo para credenciales, arrendamiento y compartimentos de Oracle Cloud Infrastructure. Al finalizar el laboratorio, sustituya estos valores por otros específicos del entorno en la nube.

Optimiza la integración y el despliegue continuos de Frontend con OCI DevOps Service y OCI Object Storage

Introducción

En este tutorial: Configuración de Oracle Cloud Infrastructure (OCI) Object Storage y Oracle API Gateway para alojamiento de sitios web estáticos, se describe cómo alojar la aplicación JavaScript compilada estáticamente mediante la compilación anticipada (AOT) en OCI Object Storage y Oracle API Gateway.

Para establecer un flujo de trabajo de producción completo, en este tutorial le guiaremos a través de la configuración de un pipeline DevOps de integración y despliegue continuos sólido para su sitio web de frontend estático mediante el servicio Oracle Cloud Infrastructure DevOps.

El servicio DevOps de OCI es una plataforma completa de entrega e integración continuas (CI/CD) para desarrolladores. Con este servicio, el ingeniero de DevOps puede crear, probar y desplegar fácilmente software y aplicaciones en Oracle Cloud. Los pipelines de compilación y despliegue de DevOps reducen los errores basados en cambios y reducen el tiempo que los clientes dedican a crear y desplegar versiones. El servicio también proporciona repositorios de Git privados para almacenar su código y soporta conexiones a repositorios de código externos.

Objetivo

Configure un sólido pipeline de integración y despliegue continuos DevOps para su sitio web de frontend estático mediante el servicio OCI DevOps y OCI Object Storage.

Requisitos

Acceso a un arrendamiento de Oracle Cloud.

Tarea 1: Creación de un cubo de OCI Object Storage

Crear un nuevo cubo en OCI Object Storage. Este cubo se utilizará para alojar el sitio web estático, como se describe en Configuración de OCI Object Storage y Oracle API Gateway para alojamiento de sitios web estáticos.

Cubo de Object Storage

Tarea 2: Creación de un proyecto DevOps

Vaya a Developer Services, DevOps, Projects, haga clic en Create Devops project, introduzca el nombre del proyecto, seleccione un tema de notificación y, a continuación, haga clic en Create.

Nota: Debe crear un nuevo tema de notificación si aún no lo ha creado.

Crear Devops

Tarea 3: Establecimiento del Repositorio de Código

Puede crear un nuevo repositorio de Git privado o duplicar el repositorio existente en los repositorios de OCI Code.

Nota: Siga este documento: Configuración del repositorio para interactuar con los repositorios de código.

Cree el archivo build_spec.yaml en el repositorio con el siguiente código. Esto servirá como especificación de compilación para nuestra compilación DevOps.

version: 0.1
component: build
timeoutInSeconds: 1000
shell: bash
env:
  variables:
  # exportedVariables are made available to use as parameters in sucessor Build Pipeline stages
  # For this Build to run, the Build Pipeline needs to have a BUILDRUN_HASH parameter set
  exportedVariables:
    - BUILDRUN_HASH

steps:
  - type: Command
    name: "Define unique build tag"
    timeoutInSeconds: 140
    command: |
      echo "OCI_BUILD_RUN_ID: ${OCI_BUILD_RUN_ID}"
      export BUILDRUN_HASH=`echo ${OCI_BUILD_RUN_ID} | rev | cut -c 1-7`
      echo "BUILDRUN_HASH: " $BUILDRUN_HASH
  - type: Command
    name: "Install Nodejs"
    command: |
      sudo yum install -y oracle-nodejs-release-el7 oracle-release-el7
      echo "Installation Complete..."
  - type: Command
    name: "Frontend build"
    command: |
      npm install
      npm run build
      echo "Build Done..."
  - type: Command
    name: "Zip build files"
    command: |
      cd dist
      zip -r -j build.zip angular-conduit/*
      echo "Zip complete"
f
outputArtifacts:
  - name: static-website-build     # Change this to your artifact name.
    type: BINARY
    location: dist/build.zip

Tarea 4: Establecimiento de Artifact Registry

OCI Artifact Registry es un servicio de repositorio para almacenar, compartir y gestionar paquetes de desarrollo de software. Con Artifact Registry, puede gestionar artefactos para hacer artefactos inmutables, identificar artefactos con hash seguro, agregar versiones, cargar y descargar, recuperar lo último y controlar la visibilidad y los permisos. Para obtener más información, consulte Artifact Registry

Para crear Artifact Registry, vaya a Consola de OCI, Servicios para desarrolladores, Contenedores y artefactos, Artifacts Registry y haga clic en Crear repositorio, introduzca los siguientes detalles y haga clic en Crear. Esto creará un registro de artefactos vacío para almacenar los artefactos.

Para crear un artefacto de despliegue, utilizaremos el tiempo de ejecución del contenedor de shell DevOps para desplegar el artefacto de creación en OCI Object Storage. Para ello, crearemos una especificación de despliegue. Para obtener más información, consulte Especificación de despliegue.

Especificación de comando: deployemnt_spec.yaml

version: 0.1
component: command
timeoutInSeconds: 6000
shell: bash

inputArtifacts:
  - name: "static-artifact"
    type: GENERIC_ARTIFACT
    registryId: "<Artifact Registry OCID>"                # replace this with your Artifact Registry OCID
    path: "build/static-website.zip"                      # replace this with your Build Artifact Path
    version: ${version}
    location: /workspace/input/build.zip

steps:
  - type: Command
    timeoutInSeconds: 600
    name: "unzip artifact"
    command: |
      echo "unzipping..."
      ls -latr /workspace/input
      mkdir -p /workspace/output
      unzip /workspace/input/build.zip -d /workspace/output
      ls -latr /workspace/output

  - type: Command
    name: "Bucket cleanup"
    timeoutInSeconds: 140
    command: |
      oci os object bulk-delete --force --bucket-name <bucket_name>     # replace this with your bucket name.
      echo "delete complete..."

  - type: Command
    name: "Static Website Deployment"
    timeoutInSeconds: 140
    command: |
      oci os object bulk-upload --bucket-name  <bucket_name> --content-type auto --src-dir /workspace/output/  # replace this with your bucket name.
      echo "deployment complete..."

Nota: El parámetro automático -content-type calcula y define el tipo de contenido del archivo que se está cargando, si no se especifica, el tipo de contenido del archivo cargado se define como octeto-stream.

Vaya a Consola de OCI, Servicios para desarrolladores, Artifact Registry, seleccione el registro creado en el paso 1, haga clic en Cargar artefacto y, a continuación, introduzca Nombre de ruta de artefacto como download-artifact, Versión como 1 y haga clic en Cargar para cargar la especificación de despliegue.

Tarea 5: Establecimiento de pipelines de compilación y despliegue

Pipeline de compilación: aquí es donde se compila, prueba y empaqueta el código de su aplicación. En OCI DevOps, puede definir pipelines de compilación que especifiquen los pasos necesarios para crear la aplicación. Esto suele incluir la ejecución de pruebas automatizadas para garantizar la calidad del código.

Pipeline de despliegue: aquí es donde los artefactos creados se despliegan en varios entornos, como prueba, temporal y producción. En OCI DevOps, los pipelines de despliegue permiten definir el proceso para desplegar las aplicaciones, incluida la capacidad de especificar diferentes estrategias de despliegue (como despliegues azul/verde o canarios). Continuaremos con la configuración de los pipelines de compilación y despliegue.

Acceso a Artifact Registry y políticas de IAM.

Puede acceder a los artefactos que almacena en Artifact Registry desde el servicio DevOps. Puede crear una referencia a tres tipos de artefactos en Artifact Registry: configuraciones de despliegue de grupo de instancias, artefactos generales y manifiestos de Kubernetes. El administrador debe otorgar el permiso de lectura de todos los artefactos a los recursos de pipeline.

Necesitamos agregar varias políticas de IAM para que el pipeline de creación y despliegue de los servicios DevOps y el servicio de contenedor puedan acceder al registro de artefactos para cargar y descargar los artefactos. Para obtener más información, consulte DevOps Políticas de IAM
Crear pipeline de creación. Para obtener más información sobre el pipeline de compilación de OCI, consulte Gestión de pipelines de compilación.
1. Vaya a Consola de OCI, Servicios para desarrolladores, DevOps, seleccione el proyecto, seleccione Pipeline de compilación y haga clic en Crear pipeline de compilación y, a continuación, abra el pipeline que ha creado.
2. Para gestionar la creación, haga clic en Agregar etapa, Creación gestionada, Siguiente, introduzca los siguientes detalles y, a continuación, haga clic en Agregar.
  - Nombre de etapa: npm build
  - Unidad de ejecutor de compilación: Default Shape
  - Imagen de contenedor base: Oracle Linux 7 x86_64 standard:1.0 (la cambia según sus necesidades)
  - Ruta de acceso de archivo de especificación de compilación: build_spec.yaml Repositorio de código principal: haga clic en Seleccionar tipo de conexión de origen: Repositorio de código OSI, seleccione el repositorio de la tabla.
  - Sucursal: main.
    
    Nota: Puede cambiar la máquina de creación según sus necesidades.
3. Agregue otro artefacto de entrega de etapa. Haga clic en el signo Más debajo de la etapa "Creación gestionada", seleccione Entregar artefactos y haga clic en Siguiente.
  
  Introduzca Nombre de etapa como guardar artefacto, haga clic en Crear artefacto e introduzca los siguientes detalles.
  - Nombre: save-artifacts
  - Tipo: General Artifact
  - Ubicación de artefacto: Set a custom artifact location and Version
  - Ruta de artefacto: build/static-website.zip
  - version: ${version}
  - En Asociar artefactos de creación a resultado de creación, introduzca Nombre de artefacto de resultado/configuración de creación como static-website-build y haga clic en Agregar.
  Nota: Asegúrese de que el nombre del artefacto de compilación es el mismo que en la etapa Artefactos de salida de especificación de compilación.
Crear pipeline de despliegue. Para obtener más información sobre el pipeline de despliegue, consulte Gestión de pipelines de despliegue.
1. Vaya a DevOps, seleccione el proyecto, seleccione Pipeline de despliegue, haga clic en Crear pipeline de despliegue, introduzca la información necesaria y, a continuación, haga clic en Crear.
2. Haga clic en Agregar etapa y seleccione Integraciones como "Ejecutar comando de shell" y haga clic en Siguiente, introduzca el Nombre de etapa y defina el artefacto que hemos creado en la tarea 4.2 como especificación del comando.
3. Seleccione la especificación de despliegue que hemos cargado en Artifact Registry en la tarea 4.2.
4. Seleccione la unidad y el tamaño de la instancia de contenedor para la etapa de shell y haga clic en Agregar.
Active la etapa de pipeline de despliegue. Hemos creado nuestro pipeline de compilación y despliegue, necesitamos disparar el pipeline de despliegue desde nuestro pipeline de compilación. Para ello, volveremos a nuestras etapas de creación y agregaremos una etapa adicional de tipo Despliegue de disparador.
1. Para agregar una etapa, haga clic en el signo Más debajo de Entregar artefactos y seleccione Despliegue de disparador.
2. Introduzca Nombre de etapa como desplegar en os, seleccione Seleccionar pipeline de despliegue y, a continuación, haga clic en Agregar.
  
  Hemos agregado un disparador para el pipeline de despliegue. Ahora nuestro pipeline de compilación y despliegue está completo.

Tarea 6: Agregar parámetros

Agregaremos la versión de compilación a los parámetros, para que podamos realizar un seguimiento de cada compilación individual utilizando su número de compilación. Vaya al pipeline de compilación que hemos creado en la tarea 5.1, vaya a Parámetros, agregue Nombre como "versión", Valor por defecto como "0", Descripción como "versión para artefacto" y haga clic en el signo Más para agregar el parámetro a la compilación.

etapa de parámetro

Tarea 7: Prueba

Vaya al pipeline de compilación que hemos creado y haga clic en Iniciar ejecución manual.

etapa de ejecución manual

Puede ver los logs de ejecución como se muestra a continuación.

etapa de ejecución manual

Nota:

Si obtiene un error de artefacto no encontrado, asegúrese de que tiene todas las políticas de IAM necesarias y de que la ruta de artefacto y las versiones son correctas.

Asegúrese de que el nombre del artefacto en las especificaciones de creación y descarga es el mismo que en Artifact Registry.

Agradecimientos

Autor: Mayank Kakani (arquitecto de OCI Cloud)

Más recursos de aprendizaje

Explore otros laboratorios en docs.oracle.com/learn o acceda a más contenido de aprendizaje gratuito en el canal YouTube de Oracle Learning. Además, visite education.oracle.com/learning-explorer para convertirse en Oracle Learning Explorer.

Para obtener documentación sobre el producto, visite Oracle Help Center.

Título e Información de Copyright

Streamline Frontend CI/CD with OCI DevOps Service and OCI Object Storage

F90963-01

December 2023