Guía de inicio rápido: Implementa un servicio de SSR de Angular en Cloud Run

Guía de inicio rápido: Implementa un servicio de SSR de Angular en Cloud Run

Aprende a crear una aplicación simple de Hello World, empaquetarla en una imagen de contenedor, subirla a Artifact Registry y, luego, implementarla en Cloud Run.

Antes de comenzar

1. Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.

2. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

3. Make sure that billing is enabled for your Google Cloud project.

4. Install the Google Cloud CLI.

5. To initialize the gcloud CLI, run the following command:

   gcloud init

   Note: If you installed the gcloud CLI previously, make sure you have the latest version by running gcloud components update.

6. In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

   Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

   Go to project selector

7. Make sure that billing is enabled for your Google Cloud project.

8. Install the Google Cloud CLI.

9. To initialize the gcloud CLI, run the following command:

   gcloud init

   Note: If you installed the gcloud CLI previously, make sure you have the latest version by running gcloud components update.
10. A fin de configurar el proyecto predeterminado para tu servicio de Cloud Run, haz lo siguiente:

     gcloud config set project PROJECT_ID

    Reemplaza PROJECT_ID por el nombre del proyecto que creaste para esta guía de inicio rápido.
11. Si no tienes instalado Node.js 20 o una versión superior, instala Node.js.

12. Si estás bajo una política de la organización de restricción de dominios que restringe las invocaciones no autenticadas para tu proyecto, deberás acceder al servicio implementado como se describe en Prueba servicios privados.

13. Habilita la API de Cloud Run Admin y la API de Cloud Build:

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

    Después de habilitar la API de Cloud Run Admin, se crea de forma automática la cuenta de servicio predeterminada de Compute Engine.

14. Para que Cloud Build pueda compilar tus fuentes, otorga el rol de cuenta de servicio de Cloud Build a la cuenta de servicio predeterminada de Compute Engine mediante la ejecución de lo siguiente:
    gcloud projects add-iam-policy-binding PROJECT_ID \
        --member=serviceAccount:[e-mail] \
        --role=roles/cloudbuild.builds.builder

    Reemplaza PROJECT_NUMBER por el número de tu proyecto de Google Cloud y PROJECT_ID por el ID de tu proyecto de Google Cloud. Para obtener instrucciones detalladas sobre cómo encontrar el ID y el número de tu proyecto, consulta Crea y administra proyectos.

    El otorgamiento del rol de cuenta de servicio de Cloud Build a la cuenta de servicio predeterminada de Compute Engine tarda un par de minutos en propagarse.

    Nota:

    La restricción de la política de la organización iam.automaticIamGrantsForDefaultServiceAccounts evita que el rol Editor se otorgue de forma automática a las cuentas de servicio predeterminadas. Si creaste tu organización después del 3 de mayo de 2024, esta restricción se aplica de forma predeterminada.

    Recomendamos que apliques esta restricción para inhabilitar la concesión automática de roles. Si inhabilitas la concesión automática de roles, debes decidir qué roles se deben otorgar a las cuentas de servicio predeterminadas y, luego, otorgar estos roles a ti mismo.

    Si la cuenta de servicio predeterminada ya tiene el rol de editor, te recomendamos que reemplaces el rol de editor por roles menos permisivos. Para modificar de forma segura los roles de la cuenta de servicio, usa Policy Simulator para ver el impacto del cambio y, luego, otorga y revoca los roles adecuados.

Escribe el servicio de muestra

Para crear e implementar un servicio de Angular SSR, sigue estos pasos:

1. Para crear un proyecto de SSR de Angular llamado helloworld, usa el siguiente comando:

   npx @angular/cli@17.3.6 new helloworld --ssr
   

   Presiona Enter cuando se te solicite aceptar los valores predeterminados.

2. Cambia el directorio a helloworld:

   cd helloworld
   

La app está lista para implementarse.

Implementa en Cloud Run desde la fuente

Importante: En esta guía de inicio rápido, se supone que tienes roles de propietario o de editor en el proyecto que usas para la guía de inicio rápido. De lo contrario, consulta el rol del desarrollador de fuente de Cloud Run para conocer los permisos necesarios para implementar un recurso de Cloud Run desde la fuente.

La implementación desde la fuente compila automáticamente una imagen de contenedor a partir del código fuente y la implementa.

Para implementar desde la fuente, realiza estas acciones:

1. En el directorio del código fuente, implementa la carpeta actual con el siguiente comando:

   gcloud run deploy --source .

   1. Cuando se te solicite el nombre del servicio, presiona Intro para aceptar el nombre predeterminado, por ejemplo, helloworld.

   2. Si se te solicita que habilites las APIs adicionales en el proyecto, por ejemplo, la API de Artifact Registry, presiona y para responder.

   3. Cuando se te solicite la región, selecciona la región que prefieras, por ejemplo, us-central1.

   4. Si se te solicita que crees un repositorio en la región especificada, presiona y para responder.

   5. Si se te solicita permitir invocaciones no autenticadas, responde y. Es posible que no veas este mensaje si hay una política de la organización de restricción de dominio que lo impida. Para obtener más información, consulta la sección Antes de comenzar.

   Luego, espera un momento a que finalice la implementación. Si la operación se completa de forma correcta, la línea de comandos mostrará la URL de servicio.

2. Abre la URL de servicio en un navegador web para visitar el servicio implementado.

Ubicaciones de Cloud Run

Cloud Run es regional, lo que significa que la infraestructura que ejecuta los servicios se ubica en una región específica, y Google la administra para que esté disponible de manera redundante en todas las zonas de esa región.

El cumplimiento de los requisitos de latencia, disponibilidad o durabilidad es el factor principal para seleccionar la región en la que se ejecutan los servicios de Cloud Run. Por lo general, puedes seleccionar la región más cercana a los usuarios, pero debes considerar la ubicación de los otros productos de Google Cloud que usa el servicio de Cloud Run. Si usas productos de Google Cloud en varias ubicaciones, la latencia y el costo del servicio pueden verse afectados.

Cloud Run está disponible en las siguientes regiones:

Sujetas a los Precios del nivel 1

• asia-east1 (Taiwán)
• asia-northeast1 (Tokio)
• asia-northeast2 (Osaka)
• europe-north1 (Finlandia) Bajo nivel de CO₂
• europe-southwest1 (Madrid) Bajo nivel de CO₂
• europe-west1 (Bélgica) Bajo nivel de CO₂
• europe-west4 (Países Bajos) Bajo nivel de CO₂
• europe-west8 (Milán)
• europe-west9 (París) Bajo nivel de CO₂
• me-west1 (Tel Aviv)
• us-central1 (Iowa) Bajo nivel de CO₂
• us-east1 (Carolina del Sur)
• us-east4 (Virginia del Norte)
• us-east5 (Columbus)
• us-south1 (Dallas) Bajo nivel de CO₂
• us-west1 (Oregón) Bajo nivel de CO₂

Sujetas a los Precios del nivel 2

• africa-south1 (Johannesburgo)
• asia-east2 (Hong Kong)
• asia-northeast3 (Seúl, Corea del Sur)
• asia-southeast1 (Singapur)
• asia-southeast2 (Yakarta)
• asia-south1 (Bombay, India)
• asia-south2 Delhi (India)
• australia-southeast1 (Sídney)
• australia-southeast2 (Melbourne)
• europe-central2 (Varsovia, Polonia)
• europe-west10 (Berlín) Bajo nivel de CO₂
• europe-west12 (Turín)
• europe-west2 (Londres, Reino Unido) Bajo nivel de CO₂
• europe-west3 (Fráncfort, Alemania) Bajo nivel de CO₂
• europe-west6 (Zúrich, Suiza) Bajo nivel de CO₂
• me-central1 (Doha)
• me-central2 (Dammam)
• northamerica-northeast1 (Montreal) Bajo nivel de CO₂
• northamerica-northeast2 (Toronto) Bajo nivel de CO₂
• southamerica-east1 (São Paulo, Brasil) Bajo nivel de CO₂
• southamerica-west1 (Santiago, Chile) Bajo nivel de CO₂
• us-west2 (Los Ángeles)
• us-west3 (Salt Lake City)
• us-west4 (Las Vegas)

Si ya creaste un servicio de Cloud Run, puedes ver la región en el panel de Cloud Run en la consola de Google Cloud.

Aceptar

¡Felicitaciones! Acaba de implementar una imagen de contenedor del código fuente en Cloud Run. Cloud Run reduce la escala de la imagen de contenedor de forma automática y horizontal para controlar las solicitudes que se reciben y, luego, escala horizontalmente cuando disminuye la demanda. Solo debes pagar por la CPU, la memoria y las herramientas de redes que se utilicen durante la administración de la solicitud.

Limpia

Quita el proyecto de prueba

Si bien Cloud Run no cobra cuando el servicio no se usa, es posible que se te cobre por el almacenamiento de la imagen de contenedor en Artifact Registry. Puedes borrar la imagen de contenedor o borrar el proyecto de Google Cloud para evitar que se apliquen cargos. Si borras tu proyecto de Google Cloud, se dejan de facturar todos los recursos que usaste en ese proyecto.

Precaución: Borrar un proyecto tiene las siguientes consecuencias:
• Se borra todo en el proyecto. Si usaste un proyecto existente para las tareas de este documento, cuando lo borres, también se borrará cualquier otro trabajo que hayas realizado en el proyecto.
• Se pierden los ID personalizados de proyectos. Cuando creaste este proyecto, es posible que hayas creado un ID del proyecto personalizado que desees utilizar en el futuro. Para conservar las URL que utilizan el ID del proyecto, como una URL appspot.com, borra los recursos seleccionados dentro del proyecto en lugar de borrar todo el proyecto.
1. In the Google Cloud console, go to the Manage resources page.

   Go to Manage resources

2. In the project list, select the project that you want to delete, and then click Delete.
3. In the dialog, type the project ID, and then click Shut down to delete the project.

¿Qué sigue?

Para obtener más información sobre cómo compilar un contenedor a partir de código fuente y enviarlo a un repositorio, consulta los siguientes vínculos:

• Cómo desarrollar servicios de Cloud Run
• Compila contenedores
• Prueba un servicio de Cloud Run de forma local
• Implementa a partir del código fuente

Para la integración automática en GitHub y las implementaciones optimizadas con CDN para apps de Angular renderizadas por el servidor, considera usar Firebase App Hosting.