Observação:

Este tutorial requer acesso ao Oracle Cloud. Para se inscrever em uma conta gratuita, consulte Conceitos básicos do Oracle Cloud Infrastructure Free Tier.
Ele usa valores de exemplo para credenciais, tenancy e compartimentos do Oracle Cloud Infrastructure. Ao concluir seu laboratório, substitua esses valores por valores específicos do seu ambiente de nuvem.

Simplifique o Frontend CI/CD com o OCI DevOps Service e o OCI Object Storage

Introdução

Este tutorial: Configurar o Oracle Cloud Infrastructure (OCI) Object Storage e o Oracle API Gateway para Hospedagem de Site Estático descreve como hospedar o aplicativo JavaScript compilado estaticamente, utilizando a compilação Antecipada de Tempo (AOT) no OCI Object Storage e no Oracle API Gateway.

Para estabelecer um workflow de produção completo, neste tutorial, orientaremos você na configuração de um pipeline robusto de CI/CD DevOps para seu site de front-end estático usando o serviço Oracle Cloud Infrastructure DevOps.

O serviço OCI DevOps é uma plataforma ponta a ponta de integração e entrega contínuas (CI/CD) para desenvolvedores. Usando esse serviço, o engenheiro do DevOps pode facilmente criar, testar e implantar software no Oracle Cloud. Os pipelines de build e implantação do DevOps reduzem erros orientados por alterações e diminuem o tempo que os clientes gastam na criação e implantação de releases. O serviço também fornece repositórios Git privados para armazenar seu código e suporta conexões com repositórios de código externos.

Objetivo

Configure um pipeline robusto de CI/CD DevOps para seu site de front-end estático usando o serviço OCI DevOps e o OCI Object Storage.

Pré-requisitos

Acesso a uma tenancy do Oracle Cloud.

Tarefa 1: Criar um Bucket do OCI Object Storage

Crie um novo bucket no OCI Object Storage. Esse bucket será usado para hospedar seu site estático conforme descrito em Configurar o OCI Object Storage e o Oracle API Gateway para Hospedagem de Site Estático.

Bucket do Armazenamento de Objetos

Tarefa 2: Criar um Projeto DevOps

Navegue até Developer Services, DevOps, Projects, clique em Create Devops project, informe o nome do projeto, selecione um tópico de notificação e clique em Create.

Observação: crie um novo tópico de notificação se ainda não o tiver criado.

Criar Devops

Tarefa 3: Estabelecer o Repositório de Código

Você tem a opção de criar um novo repositório Git privado ou espelhar seu repositório existente nos Repositórios de Código do OCI.

Observação: siga este documento: Configurando o Repositório para interagir com seus repositórios de código.

Crie o arquivo build_spec.yaml no repositório usando o código a seguir. Isso servirá como a Especificação do Build para nosso build 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

Tarefa 4: Estabelecer o Artifact Registry

O OCI Artifact Registry é um serviço de repositório que armazena, compartilha e gerencia pacotes de desenvolvimento de software. Com o Artifact Registry, você pode gerenciar artefatos para tornar os artefatos imutáveis, identificar artefatos com hash seguro, adicionar versões, fazer upload e download, extrair a visibilidade e as permissões mais recentes e controlar. Para obter mais informações, consulte Artifact Registry

Para criar o Artifact Registry, navegue até Console do OCI, Serviços do Desenvolvedor, Contêineres e Artefatos, Artifacts Registry e clique em Criar Repositório, informe os detalhes a seguir e clique em Criar. Isso criará um Registro de Artefatos Vazio para armazenar seus artefatos.

Para criar um Artefato de Implantação, usaremos o runtime de contêiner do Shell DevOps para implantar o artefato de build no OCI Object Storage. Para fazer isso, criaremos uma especificação de implantação. Para obter mais informações, consulte Especificação de Implantação.

Especificação 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..."

Observação: : O parâmetro automático -content-type calcula e define o tipo de conteúdo do arquivo que está sendo carregado, se não for especificado, o tipo de conteúdo do arquivo carregado será definido como octet-stream.

Navegue até Console do OCI, Serviços ao Desenvolvedor, Artifact Registry, selecione o Registro criado na Etapa 1, clique em Fazer Upload do Artefato e digite Nome do Caminho do Artefato como download-artifact, Versão como 1 e clique em Fazer Upload para fazer upload da especificação de implantação.

Tarefa 5: Estabelecer Pipelines de Build e Implantação

Pipeline de Build: É aqui que o código do seu aplicativo é compilado, testado e empacotado. No OCI DevOps, você pode definir pipelines de build que especificam as etapas necessárias para criar seu aplicativo. Isso geralmente inclui a execução de testes automatizados para garantir a qualidade do código.

Pipeline de Implantação: é aqui que os artefatos criados são implantados em vários ambientes, como teste, preparação e produção. No OCI DevOps, os pipelines de implantação permitem definir o processo para implantar seus aplicativos, incluindo a capacidade de especificar diferentes estratégias de implantação (como implantações azul-verde ou canário). Continuaremos a configurar os pipelines de build e implantação.

Acesse o Artifact Registry e as Políticas de IAM.

Você pode acessar os artefatos que armazena no Artifact Registry pelo serviço DevOps. Você pode criar uma referência a três tipos de artefatos no Artifact Registry: configurações de implantação do grupo de instâncias, artefatos gerais e manifestos do Kubernetes. Seu administrador deve conceder a permissão de leitura de todos os artefatos aos recursos do pipeline.

Precisamos adicionar várias políticas do serviço IAM para que o pipeline de build e implantação dos serviços DevOps e o serviço de contêiner possam acessar o registro de artefatos para fazer upload e download dos artefatos. Para obter mais informações, consulte DevOps Políticas de IAM
Criar Pipeline de Build. Para obter mais informações sobre o Pipeline de Build do OCI, consulte Gerenciando Pipelines de Build.
1. Navegue até Console do OCI, Serviços ao Desenvolvedor, DevOps, selecione seu projeto, selecione Pipeline de Build e clique em Criar pipeline de build e abra o pipeline que você criou.
2. Para gerenciar o build, clique em Adicionar Estágio, Build Gerenciado, Próximo, informe os detalhes a seguir e clique em Adicionar.
  - Nome do Estágio: npm build
  - Forma do Build Runner: Default Shape
  - Imagem Base do Contêiner: Oracle Linux 7 x86_64 standard:1.0 (Você a altera de acordo com sua necessidade)
  - Criar Caminho do Arquivo de Especificação: build_spec.yaml Repositório de Código Principal - Clique em Selecionar Tipo de Conexão de Origem - Repositório de Código OSI, Selecione Seu Repo na tabela,
  - Ramificação: main.
    
    Observação: você altera a máquina de construção de acordo com sua necessidade.
3. Adicione outro estágio do Artefato de Entrega. Clique no sinal de Mais abaixo do estágio "Build Gerenciado", selecione Entregar artefatos e clique em Próximo.
  
  Informe o Nome do Estágio como save-artifact, clique em Criar Artefato e informe os detalhes a seguir.
  - Nome: save-artifacts
  - Tipo: General Artifact
  - Local do Artefato: Set a custom artifact location and Version
  - Caminho do Artefato: build/static-website.zip
  - versão: ${version}
  - Em Associar artefatos de build ao resultado do build, digite Nome do artefato de configuração/resultado do build como static-website-build e clique em Adicionar.
  Observação: : Certifique-se de que o nome do artefato de build seja o mesmo do estágio Artefatos de saída da Especificação de Build.
Criar Pipeline de Implantação. Para obter mais informações sobre o pipeline de implantação, consulte Gerenciando Pipelines de Implantação.
1. Navegue até DevOps, selecione seu projeto, selecione Pipeline de Implantação, clique em Criar Pipeline de Implantação, especifique as informações necessárias e clique em Criar.
2. Clique em Adicionar Estágio e selecione Integrações como "Executar Comando Shell" e clique em Próximo, digite o Nome do Estágio e defina o artefato que criamos na Tarefa 4.2 como especificação de comando.
3. Selecione a especificação de implantação. O upload foi feito para o Artifact Registry na Tarefa 4.2.
4. Selecione a forma e o tamanho da instância do contêiner para o estágio do shell e clique em Adicionar.
Acionar estágio do pipeline de implantação. Temos nosso pipeline de build e implantação criado. Precisamos acionar o pipeline de implantação de nosso pipeline de build. Para fazer isso, retornaremos aos nossos estágios de build e adicionaremos um estágio adicional do tipo Implantação de trigger.
1. Para adicionar estágio, clique no sinal de Mais abaixo de Entregar Artefatos e selecione Acionar implantação.
2. Informe Nome do Estágio como implantar no oss, selecione Selecionar pipeline de implantação e clique em Adicionar.
  
  Adicionamos um trigger para o pipeline de implantação. Agora, nosso pipeline de criação e implantação está concluído.

Tarefa 6: Adicionar Parâmetros

Adicionaremos a versão de build aos parâmetros para que possamos rastrear cada build individual usando seu número de build. Navegue até o pipeline de build que criamos na Tarefa 5.1, vá para Parâmetros, adicione Nome como "versão", Valor padrão como "0", Descrição como "versão para artefato" e clique no sinal de Mais para adicionar o parâmetro ao build.

estágio do parâmetro

Tarefa 7: Teste

Vá para o pipeline de build que criamos e clique em Iniciar execução manual.

estágio de execução manual

Você pode ver logs de execução como abaixo.

estágio de execução manual

Observação:

Se você receber um erro de artefato não encontrado, certifique-se de ter todas as políticas de IAM necessárias e de que o caminho e as versões do artefato estejam corretos.

Certifique-se de que o nome do artefato nas especificações de build e download seja igual ao do Artifact Registry.

Agradecimentos

Autor - Mayank Kakani (OCI Cloud Architect)

Mais Recursos de Aprendizagem

Explore outros laboratórios em docs.oracle.com/learn ou acesse mais conteúdo de aprendizado gratuito no canal Oracle Learning YouTube. Além disso, visite education.oracle.com/learning-explorer para se tornar um Oracle Learning Explorer.

Para obter a documentação do produto, visite o Oracle Help Center.

Título e Informações de Copyright

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

F90963-01

December 2023