Implementa un sitio web con Cloud Run

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. Todo este trabajo 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 Knative de Google Cloud, 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.

Cloud Run no solo ofrece desarrollo sin servidores en 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 segunda situación.

En el siguiente diagrama, se ilustra el flujo de la implementación y del hosting de Cloud Run. 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

• Conocimiento general de Docker (consulta la sección Comienza 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

Configuración del entorno de autoaprendizaje

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

Recuerda el ID del proyecto, que se completa 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 de la captura de pantalla ya está en uso 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 > Habilitar APIs y servicios. .

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

Ejecutar este codelab debería costar solo unos pocos dólares, pero su costo podría aumentar si decides usar más recursos o si los dejas en ejecución (consulta la sección 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 forma 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 todos los frameworks y las bibliotecas 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).

Para activar Google Cloud Shell, haz clic en el botón que se encuentra en la parte superior derecha de la consola para desarrolladores (el aprovisionamiento y la conexión al entorno debería llevar solo unos minutos):

Haz clic en el botón "Iniciar Cloud Shell":

Una vez que te conectes a Cloud Shell, deberías ver que ya te autenticaste y que el proyecto ya se configuró con tu PROJECT_ID :

gcloud auth list

Resultado del comando

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

Nota: gcloud es la herramienta de línea de comandos potente y unificada de Google Cloud Platform. La documentación completa está disponible en https://cloud.google.com/sdk/gcloud. Viene preinstalada en Cloud Shell y, sin duda, disfrutarás de su compatibilidad con el completado de línea de comando.

gcloud config list project

Resultado del comando

[core]
project = <PROJECT_ID>

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>

Si, por algún motivo, el proyecto no se configuró, 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:

IMPORTANTE: Por último, 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. Obtén más información en la documentación 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.

Dado que implementarás un sitio web existente, solo tienes que 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 cambiar al directorio correspondiente. También instalarás las dependencias de Node.js para poder probar tu app antes de implementarla.

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

Esto clonará tu repositorio, cambiará al directorio y, luego, instalará las dependencias necesarias para ejecutar tu app de forma local. Es posible que la secuencia de comandos tarde unos minutos en ejecutarse.

Realiza las pruebas necesarias y verifica tu 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.

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 el proceso 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 toma todos los archivos del bucket y usa 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 .

Este proceso tardará unos minutos en completarse, 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 el menú de navegación ☰ > Cloud Build > Historial. Allí, podrás ver una lista de todas tus compilaciones anteriores, pero debería haber solo 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.

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 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 se mostrará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 ejecutar la campaña. Selecciona la región más cercana a ti y, luego, acepta el nombre predeterminado sugerido del servicio (monolith).

Para fines de prueba, permite las solicitudes no autenticadas a 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 estar 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 utilizar para acceder a la app. 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 a través de Cloud Console. Haz clic en Menú de navegación ☰ > Cloud Run para ver el panel que contiene el servicio que implementaste.

Ahora, vuelve a implementar tu 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 tal como lo hiciste la primera vez. Cuando el comando se haya ejecutado con éxito, 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.

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 satisfacer al equipo de marketing.

Al parecer, 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 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 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.

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 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 utilizar rutas para asignar diferentes porcentajes de tráfico a diferentes revisiones de un servicio.

Sigue los próximos 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 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.

Borra 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 seguiste los pasos 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 otros artefactos que no sean los de este codelab, deberás borrar manualmente tu 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

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