DevOps

Despliegue en Google Cloud Plataform Utilizando Azure DevOps

Publicado por
Victor Ureta
Despliegue en Google Cloud Plataform Utilizando Azure DevOps

Intro

En el siguiente post te explicaremos paso a paso para una aplicación web desarrollada con Angular 8, en un App Engine para la plataforma Google Cloud Platform. Al buscar documentación existente en internet basándonos en la típica búsqueda "Deploy App Azure Devops GCP", encontraremos información larga y extensa de cómo se realizaba el despliegue para algunos tipos de aplicativos, pero realmente no explicaba de una manera clara cómo realizar esta simple acción. En base a esto, se realizaron varias pruebas utilizando el SDK de Google, las que permitieron llegar a una forma sencilla de lograrlo.

Resumen

Para poder implementar el despliegue desde Azure DevOps a GCP debemos ejecutar los siguientes comandos en nuestro pipeline release (esto es un ejemplo del despliegue)

# Create environment variable for correct distribution
export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)"

# Add the Cloud SDK distribution URI as a package source
echo "deb http://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list

# Import the Google Cloud Platform public key
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -

# Update the package list and install the Cloud SDK
sudo apt-get update && sudo apt-get install google-cloud-sdk

# Select Project
gcloud config set project endless-ability-265820

# login in gcp with service account
gcloud auth activate-service-account --key-file $(System.DefaultWorkingDirectory)/_WEB_PortalCliente/dist/proyectonuevo-266717-5bdefb2b5f27.json

# Deploy GCP App Engine
cd $(System.DefaultWorkingDirectory)/_WEB_PortalCliente/dist/
gcloud app deploy --quiet

Antes de empezar

Es importante seguir los pasos a continuación. Te explicaremos en detalle:

  1. Crear Proyecto en GCP
  2. Crear App Engine en GCP
  3. Crear Cuenta de servicio con acceso al proyecto en GCP
  4. Activar App Engine Admin API
  5. Compilar
  6. Desplegar En el despliegue debemos considerar: a. Instalar SDK GCP b. Iniciar sesión con cuenta de servicio c. Seleccionar Proyecto d. Desplegar

Crear Proyecto en GCP

1.Ingresamos a https://console.cloud.google.com/  y por defecto nos abrira el último proyecto al que entramos. Haz clic en el proyecto.

Crear Proyecto en GCP

2.Haz clic en Nuevo Proyecto

Nuevo Proyecto

3.Le colocamos un nombre a nuestro proyecto y hacemos clic en Crear

crear

4.Una vez se haya creado correctamente el proyecto, hacemos clic en el proyecto actual

proyecto actual

5.Y hacemos clic en el proyecto que recién creamos, en este caso se llama ProyectoNuevo debemos también considerar de guardar el ID del proyecto, ya que será requerido para el despliegue en este caso es proyectonuevo-266717

proyecto nuevo

Crear App Engine en GCP

1.Haz clic en el menú de opciones. Acercamos el cursor en APP Engine y hacemos clic en Panel

APP Engine

2.Haz clic en Crear Aplicación

 Crear Aplicación

3.Escoge una región y haz clic en Crear APP

 Crear APP

4.Selecciona el lenguaje vas a trabajar y el tipo de ambiente; en este caso es Node.JS y elegimos el ambiente Estándar

ambiente Estándar

5.Y se creó el App Engine correctamente

image.png

Crear Cuenta de servicio con acceso al proyecto en GCP

1.Nos dirigimos al menú de opciones, API y servicios y haz clic en Credenciales

Credenciales

2.Haz clic en Crear Credenciales y luego Cuenta de servicio

Cuenta de servicio

3.Coloca un nombre y una descripción y haz clic en Crear

crear

4.Da el permiso de Propietario

permiso

5.Haz clic en Crear Clave , se abrirá una ventana lateral y selecciona JSON y haz clic en Crear

6.Se descargará el JSON con la clave privada

crear clave

Activar App Engine Admin API

1.Dirígete a https://console.cloud.google.com/apis/library ((Asegura que tengas correctamente seleccionado el proyecto)

2.Buscamos App Engine Admin API y lo selecciónalo Haz clic en Habilitar

api

Compilar

1.Dentro del codigo fuente de nuestra aplicación debemos crear una carpeta llamada gcp edonde agregaremos dos archivos. Uno es la firma que descargamos cuando creamos la cuenta de servicio, y el otro será un archivo llamada app.yalm  que contendrá lo siguiente (donde dice dev es el nombre de la carpeta en la que se encuentran los archivos de la aplicación).

runtime: python27
api_version: 1
threadsafe: true
handlers:
- url: /
 static_files: dev/index.html
 upload: dev/index.html
- url: /
 static_dir: dev


2.En nuestro pipeline debemos agregar un Task que copie los archivos de la carpeta gcp y los copie en la carpeta donde está el proyecto.

- task: NodeTool@0
   inputs:
     versionSpec: '10.x'
   displayName: 'Install Node.js'

 - script: |
     npm install -g @angular/cli
     npm install
     ng build --configuration=dev --output-path=dist/dev
   displayName: 'npm install and build'

 - task: CopyFiles@2
   inputs:
     SourceFolder: 'gcp'
     Contents: '**'
     TargetFolder: 'dist'

 - task: PublishBuildArtifacts@1
   displayName: 'Publish Artifact: dist'
   inputs:
     PathtoPublish: dist
     ArtifactName: dist
 - task: PublishBuildArtifacts@1
   inputs:
     PathtoPublish: 'dist'
     ArtifactName: 'dist'
     publishLocation: 'Container'


3.Una vez que esto compile, tendremos un resultado así:

resultado

Despliegue

1.Crea un nuevo Pipeline Release

Pipeline Release

2.Selecciona  Empty job

Empty job

3.Selecciona  Add an artifacts

Add an artifacts

4.Selecciona  el proyecto donde está el pipeline build y luego seleccionamos el pipeline build

pipeline build

5.Haz clic en las task del step

task del step

6.Debemos cambiar el S.O del agente por ubuntu 18.04

S.O

7.Agrega la step Command line con los siguientes comandos

Command line

Instalar SDK GCP

# Create environment variable for correct distribution
export CLOUD_SDK_REPO="cloud-sdk-$(lsb_release -c -s)"

# Add the Cloud SDK distribution URI as a package source
echo "deb http://packages.cloud.google.com/apt $CLOUD_SDK_REPO main" | sudo tee -a /etc/apt/sources.list.d/google-cloud-sdk.list

# Import the Google Cloud Platform public key
curl https://packages.cloud.google.com/apt/doc/apt-key.gpg | sudo apt-key add -

# Update the package list and install the Cloud SDK
sudo apt-get update && sudo apt-get install google-cloud-sdk


Seleccionamos el proyecto

gcloud config set project {idproyecto} ejemplo: gcloud config set project proyectonuevo-266717

Iniciar sesión gcloud auth activate-service-account --key-file {path json cuenta de servicio} ejemplo: gcloud auth activate-service-account --key-file $(System.DefaultWorkingDirectory)/_WEB_PortalCliente/dist/proyectonuevo-266717-5bdefb2b5f27.json

Desplegar Dentro de la ruta donde se encuentra el archivo app.yaml ejecutamos: gcloud app deploy --quiet

ejemplo:

cd $(System.DefaultWorkingDirectory)/_WEB_PortalCliente/dist/
gcloud app deploy --quiet


De esta forma logramos realizar el despliegue en GCP desde Azure DevOps

GCP desde Azure DevOps


What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Descarga nuestro Clever UI KIT 👇

Acá en Clever Experience trabajamos en un pequeño UI KIT que puede ayudarte en la próxima propuesta rápida, idea o proyecto que debas o quieras desarrollar.
Ingresa tu nombre y correo para descargar.

Gracias. Te será enviado un mail confirmando la inscripción
¡Ups! Algo salió mal al enviar el formulario.