Creación de proyecto base en Angular 8 y despliegue en Google App Engine
ACTUALIZADO AL 20 de Enero del 2020
Uno de los típicos problemas a los que nos vemos enfrentados en un proyecto es el poder realizar un despliegue de una aplicación que funciona perfectamente en local pero que por alguna razón no se puede decir lo mismo al momento de intentar desplegarla en un ambiente productivo.
Google App Engine es una tecnología de Google Cloud Platform que permite crear aplicaciones serverless.
Además, Google App Engine es parte de la capa gratuita de GCP con hasta con 28 horas de instancia gratuita por día.
Si quieres saber más detalles sobre la capa gratuita de GCP, puedes visitar este link: https://cloud.google.com/free/?hl=es-419 o revisar los artículos de Felipe Andrés Velásquez Castro en nuestro Medium del GDG Cloud Santiago: https://medium.com/gdg-cloud-scl
En este tutorial aprenderemos a:
A) Tener lo necesario para comenzar.
B) Crear un proyecto base de Angular8 desde 0.
C) Crear un archivo de configuración de despliegue para Google Cloud App Engine.
D) Preparar los archivos de nuestra aplicación para producción.
E) Desplegar nuestra aplicación en producción gracias a Google Cloud App Engine.
Para poder realizar este tutorial tienes que tener previamente una cuenta y un proyecto creado en Google Cloud Platform: https://cloud.google.com/
A) Tener lo necesario para comenzar
- Ingresar a tu proyecto de Google Cloud Platform:
- Abrir Google Cloud Shell
- Instalar Angular CLI en Google Cloud Shell
npm install -g @angular/cli- Ya estamos listos para comenzar!!!
B) Crear un proyecto base de Angular8 desde 0
- Para crear un proyecto base en Angular 8 con lo mínimo para funcionar se debe ejecutar el siguiente comando:
ng new my-app- Luego seleccionar “y” a Would you like to add Angular routing? (y/N)
- Luego seleccionar “CSS” a Which stylesheet format would you like to use?
- Luego de crear el proyecto base, ingresamos a la raíz del proyecto:
cd my-app- Mediante el siguiente comando instalaremos todas las dependencias necesarias para que nuestro proyecto funcione:
npm installC) Crear un archivo de configuración de despliegue para Google Cloud App Engine
- Crear archivo de configuración para el despliegue en Google App Engine en la raíz del proyecto:
touch app.yaml
nano app.yaml- Cargar la siguiente información en el archivo app.yaml
# [START runtime]
runtime: python27
threadsafe: yes
# [END runtime]handlers:- url: /(.+)
static_files: dist/\1
upload: dist/(.*)- url: /
static_files: dist/index.html
upload: dist/index.htmlskip_files:
- ^(?!dist) # Skip any files not in the dist folder
D) Preparar los archivos de nuestra aplicación para producción
IMPORTANTE: Desde angular-cli > 6 se produjo un cambio en como la carpeta /dist es generada por defecto en relación a las versiones anteriores. Ahora se agrega una carpeta adicional dentro de la carpeta /dist con el nombre del proyecto lo cual está produciendo muchos problemas al momento de realizar los deploys en GAE debido a que la configuración de los handlers del archivo app.yaml que hace referencia a la carpeta /dist ya no era la misma.
Es por esto que recomiendo realizar un paso previo a la preparación de los archivos para así poder generar la carpeta /dist de la misma manera que las versiones anteriores.
- Ir al archivo angular.json en la carpeta raíz de nuestro proyecto, buscar la llave llamada “outputPath” y remplazar el valor por “dist”
ANTES:
"outputPath": "dist/my_project_name",DESPUÉS:
"outputPath": "dist",
- Luego de modificar el archivo angular.json, crear build del proyecto para subirlo a producción
ng build --prod- Debería crearse una carpeta /dist que contenga los siguientes archivos:
Con los pasos A , B ,C y D aprendimos a crear un proyecto en Angular 8 desde 0, crear el archivo de configuración de despliegue y generar un build del proyecto para subirlo posteriormente a producción.
E) Desplegar nuestra aplicación en producción gracias a Google Cloud App Engine.
- Antes de desplegar la aplicación, hay que configurar el id de proyecto en la terminar de Cloud Shell
gcloud config set project PROJECT_ID- Desplegar aplicación en Google Cloud App Engine
gcloud app deploy- Cuando aparezca un mensaje de confirmación, selecciona la opción 13 ( [13] us-east1 (supports standard and flexible) y presiona ENTER.
- Luego, cuando aparezca un mensaje de confirmación, escribir Y y presiona ENTER.
Si realizamos todo correctamente, después de que se suba nuestra aplicación a Google App Engine, se nos desplegará en nuestra terminal de Google Cloud Shell una URL del estilo
Deployed service [default] to: my_google_cloud_project_name.appspot.com
que podremos pegar en nuestro navegador y ver nuestra aplicación base:
Si tienes cualquier feedback o comentario de este tutorial, por favor escríbeme un mensaje y con gusto podremos conversar al respecto.
