Publicar un sitio web con angular en GCP AppEngine Standard

- febrero 19, 2023

Si lo que queremos es desplegar un frontend web (ya sea de forma estática o generado por un framework) de forma rápida y de forma muy económica (incluso cero costo) una opción a tener en cuenta es usar Google Cloud AppEngine Standard.

Como se menciona en la página del proveedor cloud, el usar este tipo de soluciones administradas provee de una serie de ventajas, entre las que podemos destacar el uso de lenguajes populares, diagnosticos avanzado de aplicaciones para el monitoreo del estado y el rendimiento de la aplicación, gestion de versiones así como la seguridad, entre otros.

Sin más preambulos, comencemos con lo necesario para poder desplegar nuestra página web en AppEngine.

Paso 1. Configurar un proyecto en AppEngine en Google Cloud

Para ello es necesario haber realizado los pasos indicados en esta guía detallada.

Tal como indica la guia, debemos configurar el proyecto con el lenguaje Python con el environment Estandar. De seleccionarse otro lenguaje, los pasos indicados en esta guía no funcionarán correctamente.

Paso 2. Configurar nuestro proyecto local

Para ello es necesario incorporar en la carpeta del proyecto local dos archivos imprescindibles que se requerirán para poder desplegar nuestro frontend creado en Angular.

app.yaml

El archivo app.yaml es un descriptor de implementacion que requiere Google Cloud para poder realizar la publicación en el entorno AppEngine. Para mayor información pueden consultar la referencia del proveedor.

runtime: python37
service: default

handlers:
- url: /(.*\.(js|css|svg|png|jpg|eot|ttf|json|pdf|woff|woff2)(|\.map))$
  static_files: dist/\1
  secure: always
  upload: dist/(.*)(|\.map)
- url: /(.*)
  static_files: dist/index.html
  secure: always
  upload: dist/*

.gcloudignore

El archivo .gcloudignore es usado para especificar que archivos deben excluirse de la carga a Google AppEngine. Para el caso de Angular, por ejemplo, excluimos la carpeta /node_modules/ y demás archivos que no forman parte del compilado que queremos publicar. Para mayor información pueden consultar la referencia del proveedor.

# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
#   $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
.angular

# Python pycache:
__pycache__/
# Ignored by the build system
/setup.cfg
# Node.js dependencies:
/node_modules/
*~

Paso 3: Publicar el sitio web mediante Cloud SDK

Para ello, necesitamos instalar el cliente de Google Cloud en nuestro ordenador. Aquí dejo un enlace del proveedor cloud con las instrucciones.

Una vez que tenemos el cliente instalado abrimos la shell de Google Cloud SDK, nos ubicamos en la carpeta del proyecto y ejecutamos las siguientes instrucciones:

Para compilar el proyecto Angular:

npm install
npm run build

Asegurarse que el CLI esté configurado para desplegar en el proyecto adecuado. Para ello, ejecutar el siguiente comando

gcloud info

Salida de la ejecucion del comando gcloud info desde la linea de comandos

Para el ejemplo, verifico que el valor del campo project corresponde con el valor “deployfrontendweb”, el cual es el nombre del proyecto que creé en Google Cloud.

NOTA: Sólo en caso las configuraciónes no sean las adecuadas o esté referenciando a un proyecto incorrecto, se debe ejecutar el comando gcloud init y seleccionar la opción “Re-Initialize this configuration with new settings”.

Salida de la ejecución del comando gcloud init desde la linea de comandos

Una vez que ya compilamos el proyecto y ya verificamos que el CLI de google cloud está referencindo al proyecto adecuado, ejecutamos los siguientes comandos:

gcloud app deploy

En la shell de Google Cloud SDK confirmaremos con la tecla “Y” y al finalizar el proceso se mostrará la confirmación de que el servicio ha sido deployado correctamente, indicando además las url de acceso.