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 Angular

Qué aprenderás

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

Requisitos previos

Accediste a la terminal de Cloud Shell.
Tienes un proyecto de Google Cloud con la facturación habilitada y permiso para realizar implementaciones en Cloud Run.
- Puedes confirmar esto si implementaste un servicio de Cloud Run anteriormente. Por ejemplo, puedes seguir la guía de inicio rápido para implementar un servicio web de Node.js desde el código fuente para comenzar.

2. Activar Cloud Shell

Navega a la terminal de Cloud Shell: https://shell.cloud.google.com/?show=terminal. Si es la primera vez que inicias Cloud Shell, aparecerá una pantalla intermedia en la que se describirá qué es. Si apareció una pantalla intermedia, haz clic en Continuar. El aprovisionamiento y la conexión a Cloud Shell solo tomarán unos minutos.
Ejecuta el siguiente comando en Cloud Shell para establecer tu proyecto gcloud:
```
gcloud config set project <PROJECT_ID>
```
Reemplaza <PROJECT_ID> 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, deberás habilitar varias APIs. En este codelab, se 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 variables de entorno que se usarán a lo largo de este codelab.

4. Configura la región predeterminada

Puedes establecer 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 configurarla para cada una.

gcloud config set run/region us-central1

5. Configurar Git

De forma predeterminada, algunas bibliotecas esperan que se use git para el control de versiones. Si ya tienes git configurado en tu máquina (por ejemplo, si ejecutas este lab de forma local), no es necesario que sigas 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)

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de Angular que use la renderización del servidor (SSR)
```
npx @angular/cli new angular-app --ssr
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd angular-app
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Limpieza opcional

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

7. Nuxt.js (Vue.js)

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de Nuxt.js
```
npx nuxi init nuxt-app
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd nuxt-app
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Captura de pantalla de la aplicación Nuxt.js

Limpieza opcional

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

8. Next.js (React)

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de Next.js
```
npx create-next-app next-app
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd next-app
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

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

Limpieza opcional

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

9. Remix (React)

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de Remix
```
npx create-remix remix-app
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd remix-app
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Captura de pantalla de la aplicación de remixes

Limpieza opcional

Borra el proyecto de Remix de forma local
```
cd ..
rm -rf remix-app
```
Borra el servicio de Cloud Run de Remix
```
gcloud run services delete remix-app
```
Cuando se te pregunte si deseas continuar, presiona la tecla Enter para continuar.

10. Limpieza de Cloud Shell

Si no usas Cloud Shell o solo implementas una 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.

Si quitas los proyectos en Cloud Shell, no se borrarán los servicios de Cloud Run que implementaste.

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)

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de SvelteKit
```
npx create-svelte svelte-app
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd svelte-app
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Captura de pantalla de la aplicación de SvelteKit

Limpieza opcional

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

12. SolidStart (Solid)

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de SolidStart
```
npx create-solid solid-app
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd solid-app
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Captura de pantalla de la aplicación de SolidStart

Limpieza opcional

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

13. Astrofotografía

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de Astro
```
npx create-astro astro-app
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd astro-app
```
Agrega el adaptador de Astro para Node.js
```
npx astro add node
```

Actualiza la secuencia de comandos start en package.json

npm pkg set scripts.start="HOST=0.0.0.0 node ./dist/server/entry.mjs"

Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Captura de pantalla de la aplicación de Astro

Limpieza opcional

Borra el proyecto de Astro de forma local
```
cd ..
rm -rf astro-app
```
Borra el servicio de Astro Cloud Run
```
gcloud run services delete astro-app
```
Cuando se te pregunte si deseas continuar, presiona la tecla Enter para continuar.

14. Qwik

Navega al directorio en el que deseas crear tu aplicación de Angular.
```
cd ~
```
Crea una aplicación de Qwik
```
npx create-qwik
```
Cuando se te solicite que ingreses tus preferencias, presiona la tecla Enter para aceptar los valores predeterminados.
Navega a la carpeta del proyecto nuevo que creaste.
```
cd qwik-app
```
Agrega el adaptador de Qwik para Cloud Run
```
npm run qwik add cloud-run
```
Implemente la aplicación
```
gcloud run deploy --allow-unauthenticated
```
Cuando se te solicite que ingreses 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 nueva pestaña del navegador para ver la aplicación implementada.

Captura de pantalla de la aplicación de Qwik

Limpieza opcional

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

15. ¡Felicitaciones!

¡Felicitaciones por completar el codelab!

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

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 involuntarios (por ejemplo, si este servicio de Cloud Run se invoca de forma involuntaria más veces que tu asignación mensual de invocaciones 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 todo el proyecto, 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 de proyecto en el SDK de Cloud. Para ver la lista de todos los proyectos disponibles, ejecuta gcloud projects list.