Implementa un sitio web con Cloud Run

Ejecutar sitios web puede ser difícil por la sobrecarga de crear y administrar instancias de máquina virtual (VM), clústeres, Pods y servicios, entre otros. Eso está bien para apps más grandes y de varios niveles. Sin embargo, si solo intentas implementar y ver tu sitio web, tienes una gran cantidad de sobrecarga.

Con Cloud Run, la implementación de Knative de Google Cloud, puedes administrar y, también, implementar tu sitio web sin la sobrecarga que necesitas para implementaciones basadas en VM o Kubernetes. No solo es un enfoque más sencillo desde una perspectiva de administración, sino que también permite escalar a cero cuando no se recibe ninguna solicitud en su sitio web.

Cloud Run no solo desarrolla desarrollo sin servidores en contenedores, sino que también puede ejecutarse en sus propios clústeres de Google Kubernetes Engine (GKE) o en una solución de plataforma como servicio (FQDN) 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á con una imagen de Docker creada a través de Cloud Build, que se activa en Cloud Shell. Luego, implementará esa imagen en Cloud Run con un comando en Cloud Shell.

Prerequisites

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é creará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 la función de propietario del proyecto

Cómo configurar el entorno a tu propio ritmo

Si no tienes una Cuenta de Google, debes crear una. Luego, acceda a Google Cloud Console y haga clic en Project > Create project.

Recuerde el ID del proyecto, que se propaga automáticamente con el nombre de su 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 funcionará. Más adelante, se lo llamará PROJECT_ID.

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

Habilite la API de Cloud Run

Haz clic en el menú de navegación ☰ > API y servicios > Panel> Habilitar API y servicios .

Busca la opción "API de Cloud Run" y haz clic en API de Cloud Run > Habilitar.

Ejecutar este codelab 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 en ejecución (consulta Cómo realizar una limpieza 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 su laptop, 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 los 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).

Para activar Google Cloud Shell, en Developer Console, simplemente haz clic en el botón que se encuentra en la esquina superior derecha (el aprovisionamiento y la conexión al entorno debería llevar solo unos minutos):

activateCloudShell.png

Haz clic en el botón “Iniciar Cloud Shell”:

Captura de pantalla del 14 de junio de 2017 a las 10.13.43 p.m. .png

Una vez conectado a Cloud Shell, deberías ver que ya estás autenticado y que el proyecto ya está configurado con tu PROJECT_ID :

gcloud auth list

Resultado del comando

Credentialed accounts:
 - <myaccount>@<mydomain>.com (active)
gcloud config list project

Resultado del comando

[core]
project = <PROJECT_ID>

Cloud Shell también establece algunas variables de entorno de forma predeterminada, que pueden ser útiles cuando ejecute comandos futuros.

echo $GOOGLE_CLOUD_PROJECT

Resultado del comando

<PROJECT_ID>

Si, por algún motivo, el proyecto no se configuró, simplemente ejecuta el siguiente comando :

gcloud config set project <PROJECT_ID>

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

ID del proyecto.png

IMPORTANTE: Por último, establece la zona y la configuración de proyecto predeterminadas:

gcloud config set compute/zone us-central1-f

Puedes elegir una variedad de zonas diferentes. Obtenga más información en la documentación de regiones y zonas.

Dado que estás implementando un sitio web existente, solo necesitas clonar la fuente de tu repositorio para que puedas enfocarte en crear imágenes de Docker y en implementar en Cloud Run.

Ejecute los siguientes comandos para clonar el repositorio en su instancia de Cloud Shell y cambiar al directorio apropiado. 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

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

Realiza las verificaciones debidas 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 la app, haz clic en Vista previa en la Web y selecciona Vista previa en el puerto 8080.

Se abrirá una ventana nueva donde podrá ver su tienda elegante 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 tus archivos fuente están listos, es hora de convertir tu app en Docker.

Por lo general, debes seguir 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, puede simplificar las cosas si usa Cloud Build para compilar el contenedor de Docker y coloca la imagen en Container Registry con un solo comando. Para ver el proceso manual de crear un Dockerfile y enviarlo, consulta la Guía de inicio rápido para 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. Dado que 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, ejecute 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 después de completarse, 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 compilación o mirar el proceso en tiempo real, puedes ir a Cloud Console y hacer clic en Menú de navegación ☰ >Historial. Allí podrá ver una lista de todas sus compilaciones anteriores, pero debería haber solo la que creó.

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

Ahora que organizó su sitio web en un contenedor y lo envió a Container Registry, es hora de implementarlo en Cloud Run.

Hay dos enfoques para las implementaciones en Cloud Run:

  • Cloud Run (completamente administrado) es el modelo de GCP en el que se administra todo el ciclo de vida de los contenedores. En este codelab, usarás ese enfoque.
  • Cloud Run for Anthos es Cloud Run con una capa de control adicional, lo que le permite traer sus clústeres y Pods desde GKE. Para obtener más información, consulta Configura Cloud Run for Anthos en Google Cloud.

Los ejemplos de línea de comandos estarán en Cloud Shell mediante las variables de entorno que configuró 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 la región en la que quieres ejecutarlo. Seleccione la región más cercana a usted y, luego, acepte el nombre del servicio sugerido predeterminado (monolítico).

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

Verifique la implementación

Para verificar que la implementación se haya creado correctamente, ejecute el siguiente comando: Es posible que Pod status tarde un momento 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

En el resultado, se muestran varias cosas. Podrá ver su implementación, así como el usuario que la implementó (su dirección de correo electrónico) y la URL que puede usar para acceder a la aplicación. Al parecer, todo se creó correctamente.

Abra la URL proporcionada en la lista de servicios de su navegador web. Debería ver el mismo sitio web del que obtuvo una vista previa de manera local.

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 diferencia con respecto al modelo de funciones como servicio (FaaS), en la que una instancia controla una solicitud a la vez.

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

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

Responda las siguientes preguntas tal como lo hizo la primera vez. Cuando el comando se ejecute con éxito, consulte Cloud Console para ver el resultado.

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

Haz clic en la pestaña Revisiones. Debería ver dos revisiones creadas. Haga clic en monolith-00002 y revise los detalles. Debería ver el valor de simultaneidad reducido a 1.

]

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

Ahora, restablezca la simultaneidad original sin volver a implementar. Puedes establecer el valor de simultaneidad en 80 o 0 de forma predeterminada, lo que quitará cualquier restricción de simultaneidad y lo establecerá en el máximo predeterminado (que es 80 en el momento en que se escribe este mensaje).

Ejecute 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

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

Tu equipo de marketing te solicitó que cambies la página principal del sitio web de tu empresa. Ellos creen 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.

Al parecer, uno de tus desarrolladores ya creó los cambios con el nombre de archivo index.js.new. Simplemente puedes copiar ese archivo en index.js, y tus cambios deberían reflejarse. Siga las instrucciones para realizar los cambios necesarios.

Ejecute los siguientes comandos, copie el archivo actualizado con el nombre correcto y, luego, imprima 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 actualizó los componentes de React, pero debe compilar la aplicación de React para generar archivos estáticos. Ejecute el siguiente comando para compilar la aplicación y copiarla en el directorio público monolith:

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

Ahora que su código está actualizado, debe volver a compilar su 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.

Ejecute 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 la app sin tiempo de inactividad.

Los cambios están completos, y el equipo de marketing está feliz con las actualizaciones que realizó. Necesitamos actualizar el sitio web sin que los usuarios se vean afectados.

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

Siga los siguientes conjuntos de instrucciones para actualizar su sitio web.

Línea de comandos

Desde la línea de comandos, puede 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

Verifique la implementación

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

gcloud run services describe monolith --platform managed 

El resultado 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 la URL externa del servicio de Cloud Run y observa que se actualizó el título de la app.

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

gcloud run services list

Ahora su sitio web debería mostrar el texto que agregó al componente de página principal.

Borra imágenes de Container Registry

# 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

# 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

Implementó, escaló y actualizó su sitio web con Cloud Run.

Más información