Single Blog

Google Cloud Run es una plataforma excepcional para ejecutar tus aplicaciones de manera serverless. Ofrece escalado automático y costos muy bajos. Además, su nivel gratuito es bastante generoso. Lo mejor de Cloud Run es que es una plataforma basada en contenedores, lo que significa que puedes implementar directamente imágenes de contenedores sin necesidad de cambiar el código ni realizar configuraciones adicionales.

Por otro lado, Angular es una plataforma de código abierto desarrollada por un equipo en Google. Es una herramienta extremadamente poderosa para crear sitios web modernos. Sin importar qué tipo de sitio web estés construyendo o qué herramientas utilices, al final siempre necesitarás un lugar para alojarlo o ejecutarlo. Angular y Cloud Run son una combinación perfecta para crear y ejecutar cualquier sitio web. En este tema, veremos cómo desplegar Angular en Cloud Run en menos de 5 minutos.

Preparativos iniciales

Primero, asumimos que ya tienes tu aplicación Angular construida. El resultado de la construcción se almacena por defecto en la carpeta dist/application-name. Durante el desarrollo, probablemente estés usando el comando ng serve para simular un servidor local. Sin embargo, esto no funcionará en Cloud Run.

Afortunadamente, existen muchas herramientas que nos permiten crear un servidor web simple con facilidad. En este caso, utilizaremos Node.js y Express para crear el servidor. Nota: Si aún no los tienes configurados en tu entorno de Google Cloud Shell, puedes seguir pasos rápidos disponibles en la documentación oficial para instalarlos Documentación de Cloud Shell.

Creación del servidor

Crea un archivo index.js con el siguiente contenido. Ten en cuenta que debes reemplazar dist/APPLICATION-NAME por el nombre de tu aplicación. El puerto puede ser cualquiera, ya que realizaremos la asignación de puertos más adelante. En este ejemplo, utilizaremos el puerto 4200.

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'dist/APPLICATION-NAME')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/APPLICATION-NAME/index.html'));
});

const PORT = 4200;
app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

Para probar el servidor, ejecuta el siguiente comando:

node index.js

Creación del contenedor

Para construir el contenedor, necesitamos un archivo Dockerfile. A continuación, se muestra un ejemplo simple:

# Usa una imagen base de Node.js
FROM node:17-slim

# Establece el directorio de trabajo
WORKDIR /app

# Copia los archivos de la aplicación al contenedor
COPY . .

# Instala las dependencias
RUN npm install

# Expone el puerto definido en index.js
EXPOSE 4200

# Comando para iniciar el servidor
CMD ["node", "index.js"]

La estructura de tu proyecto debería verse similar a esta:

/dist
  /application-name
index.js
Dockerfile
package.json

Para construir el contenedor, utiliza el siguiente comando (reemplaza PROJECT-NAME y YOUR-APPLICATION por los valores correspondientes):

gcloud builds submit --tag gcr.io/PROJECT-NAME/YOUR-APPLICATION

Este comando construirá la imagen del contenedor y la subirá al Google Container Registry.
Nota: Si ya tienes la imagen del contenedor, puedes omitir todos los pasos anteriores y simplemente subir la imagen al registro.

Despliegue en Cloud Run

Ahora estamos listos para implementar en Cloud Run. Aunque normalmente es más sencillo usar la consola de Google Cloud, también podemos realizar el despliegue desde la CLI con el siguiente comando:

gcloud run deploy --image gcr.io/PROJECT-NAME/YOUR-APPLICATION --port 4200

Durante el proceso, se te pedirá elegir la región y si deseas permitir acceso sin autenticación. Responde según tus necesidades. Lo más importante aquí es que el puerto 4200 coincida con el que expusimos en el contenedor.

¡Y eso es todo! En menos de 5 minutos hemos podido desplegar Angular en Cloud Run. La URL de tu aplicación estará disponible en la vista de detalles de Cloud Run. Solo haz clic en ella para abrir tu aplicación. Este enfoque es ideal para un despliegue rápido, eficiente y sin complicaciones. ¡Disfruta desarrollando y desplegando tus proyectos con Angular y Cloud Run!

Si necesitas ayuda con este proceso o tienes alguna inquietud sobre este tema, no dudes en ponerte en contacto con nosotros Sedix