Implementa un sitio web con Cloud Run

1. Antes de comenzar

Ejecutar sitios web puede ser difícil debido a la sobrecarga que implica crear y administrar instancias de máquinas virtuales (VM), clústeres, Pods, servicios y mucho más. Esto está bien para apps más grandes de varios niveles, pero si solo quieres implementar y ver tu sitio web, significa que implica mucha sobrecarga.

Con Cloud Run, la implementación de Knative que ofrece Google Cloud, puedes implementar y administrar tu sitio web sin la sobrecarga que necesitas para las implementaciones basadas en VM o Kubernetes. No solo es un enfoque más simple desde una perspectiva de administración, sino que también te brinda la capacidad de reducir la escala a cero cuando no ingresan solicitudes a tu sitio web.

Cloud Run no solo trae desarrollo sin servidores a los contenedores, sino que también se puede ejecutar en tus propios clústeres de Google Kubernetes Engine (GKE) o en una solución de plataforma como servicio (PaaS) completamente administrada que proporciona Cloud Run. En este codelab, probarás la última situación.

En el siguiente diagrama, se ilustra el flujo de la implementación y el hosting de Cloud Run. Comenzarás con una imagen de Docker creada con Cloud Build, que se activará en Cloud Shell. Luego, implementarás esa imagen en Cloud Run con un comando en Cloud Shell.

Requisitos previos

• Conocimientos generales de Docker (consulta la sección Comenzar del sitio web de Docker)

Qué aprenderás

• Cómo compilar una imagen de Docker con Cloud Build y subirla a gcr.io
• Cómo implementar imágenes de Docker en Cloud Run
• Cómo administrar implementaciones de Cloud Run
• Cómo configurar un extremo para una app en Cloud Run

Qué compilarás

• Un sitio web estático que se ejecuta dentro de un contenedor de Docker
• Una versión de este contenedor que se encuentra en Container Registry
• Una implementación de Cloud Run para tu sitio web estático

Requisitos

• Una Cuenta de Google con acceso de administrador para crear proyectos o un proyecto con el rol de propietario del proyecto

2. Configuración del entorno

Configuración del entorno de autoaprendizaje

Si aún no tienes una Cuenta de Google, debes crear una. Luego, accede a la consola de Google Cloud y haz clic en Proyecto > Crear proyecto.

Recuerda el ID del proyecto, que se propaga automáticamente con el nombre de tu proyecto. El ID de proyecto es un nombre único en todos los proyectos de Google Cloud, por lo que el nombre de la captura de pantalla ya está tomado y no funcionará para ti. Más adelante, se denominará PROJECT_ID.

A continuación, debes habilitar la facturación en la consola de Cloud para usar los recursos de Google Cloud y habilitar la API de Cloud Run.

Habilita la API de Cloud Run

Haz clic en Menú de navegación ⁕ > APIs y Servicios > Panel > Habilita APIs y servicios. .

Busca “API de Cloud Run”, Luego, haz clic en API de Cloud Run > Habilitar.

La ejecución de este codelab no debería costar más que unos pocos dólares, pero podría ser más si decides usar más recursos o si los dejas ejecutándose (consulta Realiza una limpieza al final). Para obtener más información, consulta Precios.

Los usuarios nuevos de Google Cloud son aptos para una prueba gratuita de$300.

Cloud Shell

Si bien Google Cloud y Cloud Run se pueden operar de manera remota desde tu laptop, debes usar Cloud Shell, un entorno de línea de comandos que se ejecuta en Google Cloud. El entorno está preconfigurado con todas las bibliotecas cliente y frameworks que necesitas.

Esta máquina virtual basada en Debian está cargada con todas las herramientas de desarrollo que necesitarás. Ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud, lo que permite mejorar considerablemente el rendimiento de la red y la autenticación. Esto significa que todo lo que necesitarás para este Codelab es un navegador (sí, funciona en una Chromebook).

1. Para activar Cloud Shell desde la consola de Cloud, solo haz clic en Activar Cloud Shell (el aprovisionamiento y la conexión al entorno debería llevar solo unos minutos).

Una vez conectado a Cloud Shell, debería ver que ya se autenticó y que el proyecto ya se configuró con tu PROJECT_ID:

gcloud auth list

Resultado del comando

Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)

Nota: La herramienta de línea de comandos de gcloud viene preinstalada en Cloud Shell y, sin duda, disfrutarás de su compatibilidad con la finalización de pestañas. Para obtener más información, consulta la descripción general de la herramienta de línea de comandos de gcloud.

gcloud config list project

Resultado del comando

[core]
project = <PROJECT_ID>

Si, por algún motivo, el proyecto no está configurado, solo emite el siguiente comando:

gcloud config set project <PROJECT_ID>

Si no conoce su PROJECT_ID, Observa el ID que usaste en los pasos de configuración o búscalo en el panel de la consola de Cloud:

Cloud Shell también configura algunas variables de entorno de forma predeterminada, lo que puede resultar útil cuando ejecutas comandos futuros.

echo $GOOGLE_CLOUD_PROJECT

Resultado del comando

<PROJECT_ID>

2. Establece la zona predeterminada y la configuración del proyecto.

gcloud config set compute/zone us-central1-f

Puedes elegir una variedad de zonas diferentes. Para obtener más información, consulta Regiones y zonas.

Nota: Cuando ejecutas gcloud en tu propia máquina, la configuración se mantendrá en todas las sesiones. Pero en Cloud Shell, deberás configurarlo en cada nueva sesión o reconexión.

3. Clona el repositorio de código fuente

Como implementarás un sitio web existente, solo necesitas clonar el código fuente de tu repositorio, por lo que podrás enfocarte en crear imágenes de Docker e implementarlas en Cloud Run.

Ejecuta los siguientes comandos para clonar el repositorio en tu instancia de Cloud Shell y cambiarlo al directorio correspondiente. También instalarás las dependencias de Node.js para poder probar tu app antes de la implementación.

cd ~
git clone https://github.com/googlecodelabs/monolith-to-microservices.git
cd ~/monolith-to-microservices
./setup.sh

Con esta acción, se clona el repositorio, se cambia el directorio y se instalan las dependencias necesarias para ejecutar la app de forma local. Es posible que la secuencia de comandos demore unos minutos en ejecutarse.

Realiza la diligencia debida y prueba tu app. Ejecuta el siguiente comando para iniciar tu servidor web:

cd ~/monolith-to-microservices/monolith
npm start

Resultado:

Monolith listening on port 8080!

Para obtener una vista previa de tu app, haz clic en Vista previa en la Web y selecciona Vista previa en el puerto 8080.

Se abrirá una ventana nueva en la que podrás ver tu Fancy Store en acción.

Puedes cerrar esta ventana después de ver el sitio web. Para detener el proceso del servidor web, presiona CONTROL+C (Command+C en Macintosh) en la ventana de terminal.

4. Crea el contenedor de Docker con Cloud Build

Ahora que los archivos fuente están listos, es momento de crear los contenedores de Docker para tu app.

Normalmente, tendrías que adoptar un enfoque de dos pasos que implica compilar un contenedor de Docker y enviarlo a un registro para almacenar la imagen que extraerá GKE. Sin embargo, puedes simplificar el proceso si usas Cloud Build para compilar el contenedor de Docker y colocar la imagen en Container Registry con un único comando. Para ver el proceso manual de creación y envío de un Dockerfile, consulta la Guía de inicio rápido de Container Registry.

Cloud Build comprime los archivos del directorio y los mueve a un bucket de Cloud Storage. Luego, el proceso de compilación toma todos los archivos del bucket y usa el Dockerfile, que está presente en el mismo directorio para ejecutar el proceso de compilación de Docker. Dado que especificaste la marca --tag con el host como gcr.io para la imagen de Docker, la imagen de Docker resultante se enviará a Container Registry.

Primero, debes asegurarte de tener habilitada la API de Cloud Build. Para hacerlo, ejecute el siguiente comando:

gcloud services enable cloudbuild.googleapis.com

Después de habilitar la API, ejecuta el siguiente comando en Cloud Shell para iniciar el proceso de compilación:

gcloud builds submit --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 .

Ese proceso tarda unos minutos, pero cuando se complete, se mostrará un resultado similar al siguiente en la terminal:

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ID                                    CREATE_TIME                DURATION  SOURCE                                                                                  IMAGES                              STATUS
1ae295d9-63cb-482c-959b-bc52e9644d53  2019-08-29T01:56:35+00:00  33S       gs://<PROJECT_ID>_cloudbuild/source/1567043793.94-abfd382011724422bf49af1558b894aa.tgz  gcr.io/<PROJECT_ID>/monolith:1.0.0  SUCCESS

Para ver tu historial de compilaciones o el proceso en tiempo real, ve a la consola de Cloud y haz clic en Menú de navegación syslog > Cloud Build > Historial. Allí podrás ver una lista de todas tus compilaciones anteriores, pero solo debería aparecer la que creaste.

Si haces clic en ID de compilación, puedes ver todos sus detalles, incluido el resultado del registro. Para ver la imagen del contenedor que se creó, haz clic en el vínculo junto a Imagen.

5. Implementar el contenedor en Cloud Run

Ahora que creaste un contenedor para tu sitio web y lo enviaste a Container Registry, es momento de implementarlo en Cloud Run.

Hay dos enfoques para las implementaciones en Cloud Run:

• Cloud Run (completamente administrado) es el modelo de PaaS en el que se administra todo el ciclo de vida del contenedor. Usarás ese enfoque en este codelab.
• Cloud Run for Anthos es Cloud Run con una capa adicional de control, lo que te permite trasladar tus clústeres y Pods de GKE. Para obtener más información, consulta Configura Cloud Run for Anthos en Google Cloud.

Los ejemplos de la línea de comandos estarán en Cloud Shell con las variables de entorno que configuraste anteriormente.

Línea de comandos

Ejecuta el comando siguiente para implementar tu app:

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --platform managed 

Se te pedirá que especifiques la región en la que quieres que se ejecute. Selecciona la región más cercana y, luego, acepta el nombre de servicio sugerido predeterminado (monolith).

Para realizar pruebas, permite las solicitudes no autenticadas en la app. Ingresa y cuando se te solicite.

Verifica la implementación

Para verificar que la implementación se haya creado correctamente, ejecuta el siguiente comando. Es posible que Pod status tarde unos minutos en cambiar a Running:

gcloud run services list

Selecciona [1] Cloud Run (completamente administrado).

Resultado:

SERVICE   REGION    URL  LAST DEPLOYED BY          LAST DEPLOYED AT
✔  monolith  us-east1 <your url>  <your email>  2019-09-16T21:07:38.267Z

En el resultado, se muestran varias cosas. Puedes ver tu implementación, el usuario que la realizó (tu dirección de correo electrónico) y la URL que puedes usar para acceder a la aplicación. Parece que todo se creó correctamente.

Abre la URL proporcionada en la lista de servicios en tu navegador web. Deberías ver el mismo sitio web del que obtuviste una vista previa de forma local.

**Nota:**También puedes ver tus implementaciones de Cloud Run a través de la consola de Cloud. Haz clic en Menú de navegación ⁕ > Cloud Run para ver el panel que contiene el servicio que implementaste.

6. Crea una revisión nueva con una simultaneidad más baja

Ahora, vuelve a implementar la app, pero esta vez ajusta uno de los parámetros.

De forma predeterminada, una app de Cloud Run tendrá un valor de simultaneidad establecido en 80, lo que significa que cada instancia de contenedor entregará hasta 80 solicitudes a la vez. Esa es una gran desviación del modelo de funciones como servicio (FaaS), en el que una instancia maneja una solicitud a la vez.

Vuelve a implementar la misma imagen de contenedor con un valor de simultaneidad establecido en 1 (solo con fines de prueba) y observa qué sucede.

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --platform managed --concurrency 1

Responde las siguientes preguntas como lo hiciste la primera vez. Una vez que el comando funcione de forma correcta, consulta la consola de Cloud para ver el resultado.

En el panel de Cloud Run, haz clic en el servicio monolith para ver los detalles.

Haz clic en la pestaña Revisiones. Deberías ver dos revisiones creadas. Haz clic en monolith-00002 y revisa los detalles. Deberías ver que el valor de simultaneidad se reduce a 1.

]

Aunque esa configuración es suficiente para las pruebas, en la mayoría de las situaciones de producción tendrás contenedores que admitan varias solicitudes simultáneas.

Ahora, restablece la simultaneidad original sin volver a realizar una implementación. Puedes configurar el valor de simultaneidad predeterminado de 80 o 0, lo que quitará cualquier restricción de simultaneidad y lo establecerá en el máximo predeterminado (que en el momento de este momento es 80).

Ejecuta el siguiente comando en Cloud Shell para actualizar la revisión actual:

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --platform managed --concurrency 80

Observa que se creó otra revisión, se redireccionó el tráfico y la simultaneidad volvió a 80.

7. Realiza cambios en el sitio web

Tu equipo de marketing te pidió que cambiaras la página principal del sitio web de tu empresa. Cree que debería ser más informativo sobre lo que la empresa es y vende. En esta sección, agregarás texto a la página principal para satisfacer al equipo de marketing.

Parece que uno de los desarrolladores ya creó los cambios con el nombre de archivo index.js.new. Puedes simplemente copiar ese archivo a index.js y deberías ver reflejados los cambios. Sigue las instrucciones para realizar los cambios correspondientes.

Ejecuta los siguientes comandos, copia el archivo actualizado en el nombre de archivo correcto y, luego, imprime el contenido para verificar los cambios:

cd ~/monolith-to-microservices/react-app/src/pages/Home
mv index.js.new index.js
cat ~/monolith-to-microservices/react-app/src/pages/Home/index.js

El código resultante debería verse así:

/*
Copyright 2019 Google LLC

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1
  },
  paper: {
    width: "800px",
    margin: "0 auto",
    padding: theme.spacing(3, 2)
  }
}));
export default function Home() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Typography variant="h5">
          Fancy Fashion &amp; Style Online
        </Typography>
        <br />
        <Typography variant="body1">
          Tired of mainstream fashion ideas, popular trends and societal norms?
          This line of lifestyle products will help you catch up with the Fancy trend and express your personal style.
          Start shopping Fancy items now!
        </Typography>
      </Paper>
    </div>
  );
}

Ya actualizaste los componentes de React, pero debes compilar la app de React para generar archivos estáticos. Ejecuta el siguiente comando para compilar la app y copiarla en el directorio público de monolith:

cd ~/monolith-to-microservices/react-app
npm run build:monolith

Ahora que se actualizó el código, debes volver a compilar el contenedor de Docker y publicarlo en Container Registry. Puedes utilizar el mismo comando que antes, pero esta vez actualizarás la etiqueta de la versión.

Ejecuta el siguiente comando para activar un Cloud Build nuevo con una versión de imagen actualizada de 2.0.0:

cd ~/monolith-to-microservices/monolith

#Feel free to test your application
npm start

gcloud builds submit --tag gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:2.0.0 .

En la siguiente sección, usarás esa imagen para actualizar tu app sin tiempo de inactividad.

8. Actualiza el sitio web sin tiempo de inactividad

Los cambios están completos, y el equipo de marketing está feliz con las actualizaciones que realizaste. Es momento de actualizar el sitio web sin que los usuarios tengan interrupciones.

Cloud Run trata cada implementación como una revisión nueva, que se habilitará en línea y, luego, se redireccionará el tráfico a ella.

Nota: De forma predeterminada, a la última revisión se le asignará el 100% del tráfico entrante para un servicio. Es posible usar rutas para asignar diferentes porcentajes de tráfico a diferentes revisiones de un servicio.

Sigue los siguientes conjuntos de instrucciones para actualizar tu sitio web.

Línea de comandos

Desde la línea de comandos, puedes volver a implementar el servicio para actualizar la imagen a una versión nueva con el siguiente comando:

gcloud run deploy --image=gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:2.0.0 --platform managed

Verifica la implementación

Para validar la actualización de tu implementación, ejecuta el siguiente comando:

gcloud run services describe monolith --platform managed 

La salida obtenida se verá así:

apiVersion: serving.knative.dev/v1alpha1
kind: Service
metadata:
  annotations:
    client.knative.dev/user-image: gcr.io/my-cloudrun-codelab/monolith:2.0.0
...

Verás que tu servicio ahora está usando la versión más reciente de tu imagen implementada en una revisión nueva.

Para verificar los cambios, navega a la URL externa del servicio de Cloud Run nuevamente y observa que se actualizó el título de tu app.

Ejecuta el siguiente comando para generar una lista de los servicios y ver la dirección IP si la olvidaste:

gcloud run services list

Ahora tu sitio web debería mostrar el texto que agregaste al componente de la página principal.

9. Limpia

Borrar imágenes de Container Registry

Nota: Si creaste otras versiones, también puedes usar la misma sintaxis para borrar esas imágenes. En este codelab, se supone que lo seguiste exactamente y que solo tienes dos etiquetas.

# Delete the container image for version 1.0.0 of our monolith
gcloud container images delete gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:1.0.0 --quiet

# Delete the container image for version 2.0.0 of our monolith
gcloud container images delete gcr.io/${GOOGLE_CLOUD_PROJECT}/monolith:2.0.0 --quiet

Borra los artefactos de Cloud Build de Cloud Storage

Nota: Si usaste Cloud Build para artefactos distintos de los de este codelab, deberás borrar manualmente la fuente de gs://<PROJECT_ID>_cloudbuild/source.

# The following command will take all source archives from all builds and delete them from cloud storage

# Run this command to print all sources:
# gcloud builds list | awk 'NR > 1 {print $4}' 

gcloud builds list | awk 'NR > 1 {print $4}' | while read line; do gsutil rm $line; done

Borra el servicio de Cloud Run

gcloud run services delete monolith --platform managed

10. Felicitaciones

Implementaste, escalaste y actualizaste tu sitio web con Cloud Run.

Más información

• Documentación de Docker
• Documentación de Google Kubernetes Engine
• Documentación de Cloud Build
• Documentación de Container Registry