Implementa un sitio web con Cloud Run

1. Antes de comenzar

Ejecutar sitios web puede ser difícil por toda la sobrecarga que implica crear y administrar instancias de máquinas virtuales (VM), clústeres, pods, servicios y mucho más. Esto es aceptable para las apps más grandes y de varios niveles, pero, si solo deseas implementar y hacer visible tu sitio web, es demasiada sobrecarga.

Con Cloud Run, la implementación de Google Cloud de Knative, puedes implementar y administrar tu sitio web sin la sobrecarga necesaria para las implementaciones basadas en VMs o en 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.

En este codelab, comenzarás con una imagen de Docker creada a través de Cloud Build, que activarás en Cloud Shell. Luego, implementarás esa imagen en Cloud Run con un comando en Cloud Shell.

Requisitos previos

• Familiaridad general con Docker (consulta la sección Introducción 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

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 debajo del nombre del proyecto. El ID del proyecto es un nombre único en todos los proyectos de Google Cloud, por lo que el nombre que aparece en la captura de pantalla ya está en uso y no lo podrás usar. 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 de control > Habilitar APIs y servicios. .

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

Ejecutar este codelab no debería costar más que unos pocos dólares, pero su costo podría aumentar si decides usar más recursos o si los dejas en ejecución (consulta Limpiar al final). Para obtener más información, consulta Precios.

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

Cloud Shell

Si bien Google Cloud y Cloud Run se pueden operar de manera remota desde tu laptop, usarás Cloud Shell, un entorno de línea de comandos que se ejecuta en Google Cloud. El entorno está preconfigurado con todas las bibliotecas y los frameworks de cliente 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 tienes que clonar la 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 cambiar 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

Esto clona tu repositorio, cambia al directorio y, luego, instala las dependencias necesarias para ejecutar tu app de forma local. La secuencia de comandos puede tardar unos minutos en ejecutarse.

Haz tu diligencia debida y prueba la app. Ejecuta el siguiente comando para iniciar el 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 la terminal.

4. Crea el contenedor de Docker con Cloud Build

Ahora que tienes listos los archivos de origen, es hora de convertir tu app en un contenedor de Docker.

En situaciones normales, 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 las cosas si usas Cloud Build para compilar el contenedor de Docker y colocar la imagen en Container Registry con un solo 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 tomará todos los archivos del bucket y utilizará el Dockerfile, que se encuentra en el mismo directorio para ejecutar el proceso de compilación de Docker. Como especificaste la marca --tag con el host como gcr.io para la imagen de Docker, se enviará la imagen de Docker resultante 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 haya finalizado, 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 mirar el proceso en tiempo real, puedes ir a la consola de Cloud y, luego, hacer clic en Menú de navegación ☰ > Cloud Build > Historial. Allí, puedes ver una lista de todas tus compilaciones anteriores, pero solo debería haber la que creaste.

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

5. Implementa 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 para este codelab.
• Cloud Run for Anthos es Cloud Run con un nivel adicional de control, lo que te permite traer tus clústeres y pods de GKE. Para obtener más información, consulta Cómo configurar 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 antes.

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 en qué región deseas que se ejecute. Selecciona la región más cercana a ti y, luego, acepta el nombre de servicio sugerido predeterminado (monolith).

Para realizar pruebas, permite las solicitudes no autenticadas a la app. Ingresa y en la solicitud.

Verifica la implementación

Para verificar que la implementación se creó correctamente, ejecuta el siguiente comando. Es posible que Pod status tarde unos momentos en ser 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

El resultado muestra varios aspectos. Puedes ver tu implementación, el usuario que la realizó (tu dirección de correo electrónico) y la URL que puedes utilizar para acceder a la aplicación. Todo indica que la creación se realizó correctamente.

Abre la URL proporcionada en la lista de servicios en tu navegador web y 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 en 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. Esta es una gran diferencia con respecto al modelo de funciones como servicio (FaaS), en el que una instancia maneja solo una solicitud a la vez.

Vuelve a implementar la misma imagen de contenedor con un valor de simultaneidad establecido en 1 (solo para probar) y observa lo que sucede.

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

Responde las preguntas subsiguientes como lo hiciste la primera vez. Cuando el comando se haya ejecutado correctamente, 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 redujo 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 establecer el valor de simultaneidad en el valor predeterminado de 80 o 0, lo que quitará cualquier restricción de simultaneidad y lo establecerá en el máximo predeterminado (que resulta ser 80 en el momento de escribir este artículo).

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 se restableció la simultaneidad en 80.

7. Realiza cambios en el sitio web

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

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

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 usar 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 a cada implementación como una revisión nueva, que se habilitará en línea y, luego, se le redireccionará el tráfico.

Nota: De forma predeterminada, se le asignará el 100% del tráfico entrante a la revisión más reciente 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

Ejecuta el siguiente comando para validar la actualización de tu implementación:

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 usa la versión más reciente de tu imagen implementada en una revisión nueva.

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

Ejecuta el siguiente comando para crear 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

Borra imágenes de Container Registry

Nota: Si creaste otras versiones, puedes usar la misma sintaxis para borrar esas imágenes también. En este codelab, se supone que lo seguiste exactamente y 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 artefactos de Cloud Build de Cloud Storage

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

# 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