Cómo implementar todos los frameworks de JavaScript en Cloud Run

1. Introducción

Descripción general

En este codelab, implementarás ocho aplicaciones de JavaScript en Cloud Run:

  • SSR de Angular basado en Angular
  • Nuxt.js, basado en Vue.js
  • Next.js - basado en React
  • Remix (basado en React)
  • SvelteKit: basado en Svelte
  • SolidStart: basado en Solid.js
  • Astrofotografía
  • Qwik

Captura de pantalla de la aplicación de AngularCaptura de pantalla de la aplicación Nuxt.jsCaptura de pantalla de la aplicación de Next.jsCaptura de pantalla de la aplicación para hacer un remixCaptura de pantalla de la aplicación SvelteKitCaptura de pantalla de la aplicación de SolidStartCaptura de pantalla de la aplicación AstroCaptura de pantalla de la aplicación de Qwik

Qué aprenderás

  • Cómo implementar frameworks de JavaScript compatibles con Cloud Build automáticamente
  • Cómo implementar frameworks de JavaScript que requieren configuración

Requisitos previos

2. Activar Cloud Shell

  1. Navega a la terminal de Cloud Shell: https://shell.cloud.google.com/?show=terminalSi es la primera vez que inicias Cloud Shell, verás una pantalla intermedia que describe de qué es. Si viste una pantalla intermedia, haz clic en Continuar.El aprovisionamiento y la conexión a Cloud Shell debería tardar solo un momento.
  2. Ejecuta el siguiente comando en Cloud Shell para configurar el proyecto de gcloud:
    gcloud config set project <PROJECT_ID>
    Reemplaza &lt;PROJECT_ID&gt; por el ID de tu proyecto. Ejemplo:
    gcloud config set project js-frameworks
    Si se te solicita autorización, haz clic en Autorizar.

3. Habilita las APIs

Antes de comenzar a usar este codelab, debes habilitar varias APIs. Este codelab requiere el uso de las siguientes APIs. Para habilitar esas APIs, ejecuta el siguiente comando:

gcloud services enable \
    cloudbuild.googleapis.com \
    artifactregistry.googleapis.com \
    run.googleapis.com

Luego, puedes establecer las variables de entorno que se usarán en este codelab.

4. Configura la región predeterminada

Puedes configurar la región de forma individual para cada implementación. Este comando establecerá la región predeterminada en us-central1 para que no tengas que establecerla en cada una.

gcloud config set run/region us-central1

5. Configurar Git

Algunas bibliotecas esperan que se use git para el control de versión de forma predeterminada. Si ya configuraste git en tu máquina (por ejemplo, si ejecutas este lab de forma local), no es necesario que ejecutes estos pasos.

git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global init.defaultBranch main

6. SSR de Angular (Angular)

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Crea una aplicación de Angular que use la renderización del servidor (SSR) 
    npx @angular/cli new angular-app --ssr
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd angular-app
  4. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://angular-app-xxxxxxxxxx-uc.a.run.app

Captura de pantalla de la aplicación de Angular

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Limpieza opcional

  1. Borra el proyecto de Angular de forma local 
    cd ..
rm -rf angular-app
  2. Borra el servicio de Cloud Run de Angular 
    gcloud run services delete angular-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

7. Nuxt.js (Vue.js)

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Crea una aplicación Nuxt.js 
    npx nuxi init nuxt-app
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd nuxt-app
  4. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://nuxt-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación Nuxt.js

Limpieza opcional

  1. Borra el proyecto Nuxt.js de forma local 
    cd ..
rm -rf nuxt-app
  2. Borra el servicio Nuxt.js de Cloud Run 
    gcloud run services delete nuxt-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

8. Next.js (React)

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Crea una aplicación de Next.js 
    npx create-next-app next-app
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd next-app
  4. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://next-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación de Next.js

Limpieza opcional

  1. Borra el proyecto de Next.js de forma local 
    cd ..
rm -rf next-app
  2. Borra el servicio de Cloud Run de Next.js 
    gcloud run services delete next-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

9. Remix (reacción)

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Cómo crear una aplicación de Remix 
    npx create-remix remix-app
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd remix-app
  4. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://remix-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación para hacer un remix

Limpieza opcional

  1. Cómo borrar el proyecto de Remix de forma local 
    cd ..
rm -rf remix-app
  2. Borra el servicio de Remix de Cloud Run 
    gcloud run services delete remix-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

10. Limpieza de Cloud Shell

Si no estás usando Cloud Shell o si solo estás implementando una única aplicación, este paso es opcional

Cloud Shell ofrece un directorio principal persistente de 5 GB y se ejecuta en Google Cloud.

Para implementar los ocho frameworks con Cloud Shell, deberás crear espacio para las aplicaciones restantes.

Quitar los proyectos en Cloud Shell no borrará los servicios implementados de Cloud Run que hayas implementado.

Para borrar las aplicaciones que ya creaste, ejecuta estos comandos:

cd ~
rm -rf angular-app/
rm -rf nuxt-app/
rm -rf next-app/
rm -rf remix-app/

11. SvelteKit (Svelte)

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Crea una aplicación de SvelteKit 
    npx create-svelte svelte-app
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd svelte-app
  4. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://svelte-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación de SvelteKit

Limpieza opcional

  1. Borra el proyecto SvelteKit de forma local 
    cd ..
rm -rf svelte-app
  2. Borra el servicio SvelteKit de Cloud Run 
    gcloud run services delete svelte-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

12. Inicio sólido (sólido)

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Crea una aplicación de SolidStart 
    npx create-solid solid-app
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd solid-app
  4. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://solid-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación de SolidStart

Limpieza opcional

  1. Borra el proyecto SolidStart de forma local 
    cd ..
rm -rf solid-app
  2. Borra el servicio SolidStart de Cloud Run 
    gcloud run services delete solid-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

13. Astrofotografía

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Cómo crear una aplicación de Astro 
    npx create-astro astro-app
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd astro-app
  4. Cómo agregar el adaptador Astro para Node.js 
    npx astro add node
  5. Actualiza la secuencia de comandos start en package.json
    npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"
  6. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://astro-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación Astro

Limpieza opcional

  1. Cómo borrar el proyecto de Astro de forma local 
    cd ..
rm -rf astro-app
  2. Borra el servicio de Astro Cloud Run 
    gcloud run services delete astro-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

14. Qwik

  1. Navega al directorio en el que deseas crear tu aplicación de Angular. 
    cd ~
  2. Crear una aplicación de Qwik 
    npx create-qwik
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
  3. Navega a la nueva carpeta del proyecto que creaste. 
    cd qwik-app
  4. Agrega el adaptador de Qwik para Cloud Run 
    npm run qwik add cloud-run
  5. Implemente la aplicación 
    gcloud run deploy --allow-unauthenticated
    Cuando se te soliciten tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.

Visita tu aplicación

La implementación tardará unos minutos. Cuando se complete, Cloud Run devolverá una URL como la siguiente:

https://qwik-app-xxxxxxxxxx-uc.a.run.app

Abre la URL proporcionada en una pestaña nueva del navegador para ver tu aplicación implementada.

Captura de pantalla de la aplicación de Qwik

Limpieza opcional

  1. Borrar el proyecto de Qwik de forma local 
    cd ..
rm -rf qwik-app
  2. Borrar el servicio de Qwik Cloud Run 
    gcloud run services delete qwik-app
    Cuando se te pregunte si quieres continuar, presiona la tecla Enter para continuar.

15. ¡Felicitaciones!

¡Felicitaciones por completar el codelab!

Te recomendamos que revises la documentación en Guía de inicio rápido: Implementa en Cloud Run desde un repositorio de Git para que tus compilaciones futuras puedan implementarse automáticamente con cada envío al control de versión.

Temas abordados

  • Cómo implementar automáticamente frameworks de JavaScript compatibles con Cloud Build
    • SSR de Angular basado en Angular
    • Nuxt.js, basado en Vue.js
    • Next.js - basado en React
    • Remix (basado en React)
    • SvelteKit: basado en Svelte
    • SolidStart: basado en Solid.js
  • Cómo implementar frameworks de JavaScript que requieren configuración
    • Astrofotografía
    • Qwik

16. Limpia

Para evitar cargos accidentales (por ejemplo, si este servicio de Cloud Run se invoca de forma involuntaria más veces que tu asignación mensual de invocación de Cloud Run en el nivel gratuito), puedes borrar el trabajo de Cloud Run o el proyecto que creaste en el paso 1.

Para borrar los servicios de Cloud Run, ve a la consola de Cloud Run en https://console.cloud.google.com/run/ y bórralos.

Si decides borrar el proyecto completo, puedes ir a https://console.cloud.google.com/cloud-resource-manager, seleccionar el proyecto que creaste en el paso 2 y elegir Borrar. Si borras el proyecto, deberás cambiar los proyectos en tu SDK de Cloud. Para ver la lista de todos los proyectos disponibles, ejecuta gcloud projects list.