DEV Community: Ecudevs

Configuración de ambiente de producción para una aplicación en Node.Js

Thian Lopez Zambrano — Mon, 10 Jun 2019 04:37:46 +0000

Este es un post que originalmente publiqué en medium.

Esta semana tuve que cambiar de servidor a una pequeña aplicación que tengo, pasé de la nube de Google (App Engine) a la nube de Amazon (EC2) y obviamente tuve que configurar el servidor desde cero, me alejé de esa comodidad que te ofrecen plataformas como App Engine o Heroku y me puse manos a la obra a la configuración. Me topé con ciertas cosas que son muchas veces dificiles de encontrar solución en internet por lo que decidí hacer este tutorial.

Para este tutorial voy a trabar en una instacia Ec2 de Amazon tipo t2.micro, con un sistema operativo Ubuntu Server 16.04 LTS, conseguí esta intancia gratis registrándome en AWS.

Me conectaré a la instancia de Amazon vía SSH con putty.

Instalamos Node.JS

Lo primero que haremos es intalar Node.Js desde el package manager del sistema operativo. Para hacerlo vamos a la página oficial de Node.js en la parte de Installing Node.js via package manager y elegimos el sistema operativo con el que estás trabajando. En mi caso yo elijo: Debian and Ubuntu based Linux distributions.

Ejecuto los comandos:

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Y adicionalmente para nuestro caso, instalamos ciertos addon que necesita NPM:

sudo apt-get install -y build-essential
node -v

Instalamos Git

Sí, para nuestro caso puntual vamos a instalar Git herramienta con la cual vamos clonar el repositorio de nuestro aplicativo, tambien puedes usar un cliente SFTP para llevar tu código fuente hacia el servidor.

Vamos a usar nuevamente nuestro package manager. ¡Sí! porque no vamos a usar otro tipo de método teniendo esta hermosa herramienta, así que vamos a la documentación oficial de Git y en la parte de instalar en linux copiamos la siguiente línea y la ejecutamos como usuario root:

sudo apt-get install git

Para comprobar que todo salió bien y ver que versión se instaló ejecutamos:

git --version

Instalamos PM2

Pm2 es una herramienta para ambientes de producción de aplicaciones de Node.Js, básicamente esta herramienta nos sirve para levantar nuestra aplicación como un servicio demonio en nuestro servidor aparte nos ayuda a que este siempre arriba en caso de que se produzca un error, ejecutamos el siguiente comando como usuario root:

sudo npm install pm2 -g

No olvides la opción -g que indica que instalaremos la librería de manera global

Instalamos nuestra aplicación

Por el momento no necesitamos nada más que nuestro fuente, vamos a clonar nuestro repositorio con Git, te dejo un fuente de ejemplo. Este ejemplo es una simple página web y Api que corre sobre Express.js.

mkdir apps
cd apps
git clone https://github.com/thianlopezz/tuto-node-prod.git

Creamos un nuevo directorio sobre la raíz llamado “apps”, entramos en el directorio y clonamos nuestro repositorio

cd tuto-node-prod
npm install

Entramos en nuestro fuente y lo instalamos

Automáticamente se va a levantar nuestro servidor con Nodemon en el puerto 5002.

En teoría en este momento ya se puede acceder a nuestro sitio, poniendo la IP o el public DNS de nuestro servidor seguido del puerto.

Para nuestro caso que estamos utilizando una instancia de EC2 de Amazon debemos abrir el puerto 5002 para que sea accedido desde cualquier lugar, en nuestra consola vamos a la parte de seguridad de nuestra instacia, seleccionamos nuestro grupo de seguridad y en la pestaña de inbound damos en editar.

Se despliega un modal, le damos en Add Rule y configuramos el registro de la siguiente manera:

Guardamos e ingresamos a nuestra página.

Pero bien, como dijimos, debemos crear un demonio con PM2 asi que paramos el servidor y ejecutamos el siguiente comando:

sudo pm2 start API/server.js --name hola-mundo

Apuntamos a nuestro archivo que tiene la configuración de nuestro servidor Express.Js, la bandera name es para darle nombre a nuestro servicio que quedará corriendo, si no usas esta bandera el nombre del servicio será el mismo que el de tu archivo.

PM2 tiene opciones interesantes puedes ver más en su documentación oficial.

Instalamos Nginx

Es recomendable instalar un Reverse Proxy, lo haremos con Nginx para que básicamente haga lo siguiente:

Nos va a ayudar para que nuestra aplicación no sea accedida directamente desde el tráfico de internet, sino que pase por Nginx y este se encargue de poner en ruta la petición al puerto que se configure, de esta manera también optimizamos el uso de nuestro servidor, si quieres saber más este post esta muy bueno.

Ejecutamos el siguiente comando para instalar Nginx :

sudo apt-get install nginx

Para comprobar que se instaló de manera correcta y ver la versión:

nginx -v

Abrimos el archivo de configuración de Nginx para editarlo:

sudo nano /etc/nginx/nginx.conf

Agregamos la siguiente configuración:

Con esta configuración seteamos el puerto 443 para https y 80 para http, en las líneas 9 y 10 hacemos referencia a nuestros archivos de nuestro certificado SSL.

Con el comando nano entramos en una especie de editor, agregamos la configuración, presionamos ctrl+x luego Y y enter.

Verificamos que el archivo nginx.conf este correcto con:

sudo nginx -t

Para actualizar la nueva configuración reiniciamos el servicio de Nginx con:

sudo service nginx reload

Ya podemos acceder a nuestro sitio mediante nuestra URL.

Última configuración en la consola de Amazon

Para terminar con la configuración en Amazon debemos asignar una dirección IP fija a nuestra instancia EC2, para esto vamos a en la sección de NETWORK & SECURITY e ingresamos en Elastic IP y damos en la opción Allocate new address.

Luego solo damos en Allocate.

Ahora configuremos el destino, asociamos la dirección IP a nuestra instancia.

No te olvides de eliminar el acceso al puerto 5002 en las reglas de servidor en la consola de Amazon, esta regla ya no es necesaria debido a que con esta configuración Nginx se encarga de redirigir las llamadas desde el puerto 443 hacia el 5002 internamente

Conclusiones

A lo largo de mi investigación me tope con muchos tutoriales pero ninguno se ajustaba exactamente a mi caso, todos recomendaban Nginx para terminar una configuración correcta pero yo quise saltarme este paso, consideraba a Nginx como una herramienta que no me iba a aportar mucho en lo que estoy enfocado, pero una vez que comprendí su concepto me pareció una herramienta muy poderosa. Con esta configuración tenemos listo nuestro ambiente para nuestra aplicación en Node.Js no te olvides de dejar tus aplausos y comentarios. Cuéntame como te va.

Integrando Ionic Framework 4 con Google maps

Thian Lopez Zambrano — Fri, 31 May 2019 07:07:20 +0000

Este es mi primer post en Dev.to, y es un complemento al curso de Ionic Framework que dicto en Ecudevs.

En esta ocasión vamos a integrar nuestra aplicación hecha en Ionic Framework con el api de Google Maps. Debido a que este post va como refuerzo al curso vamos a trabajar con el código fuente resultante de la pequeña aplicación que desarrollamos en el transcurso del mismo, por lo que puedes clonar el siguiente repositorio:

ecudevs / ionic-5

Clase 5 Ionic Framework Ecudevs

Código fuente de la clase 5 de Ionic Framerk en

Ecudevs

Una vez clonado el repositorio ejecuta: npm install y luego ionic serve --lab

View on GitHub

Esta es una pequeña app que realiza el mantenimiento de una colección de una base de datos de MongoDB.

Una vez clonado nuestro repositorio y haber instalado todas las dependencias nos ponemos manos a la obra.

1. Obtén un api key de Google

Lo primero que debes hacer es obtener un Api Key de Google Maps y esto lo hacemos desde el Cloud Console de Google, accede con tu cuenta de Google y crea un nuevo proyecto.

Después de haber creado tu proyecto accede a la biblioteca de APIs en el menú lateral.

Aquí busca y selecciona la opción Maps SDK for Android y habilita esta API.

Luego, en el apartado de credenciales, damos clic en "Crear credenciales" y seleccionamos la opción API key.

Automáticamente este proceso nos genera un key el cual por el momento lo vamos a guardar en un lugar seguro para luego utilizarlo, por lo que finalmente vamos a cerrar el cuadro de dialogo que se desplegó.

2. Integración con Ionic Native

Ionic Native es una herramienta que sirve para agregar funcionalidad nativa a nuestra aplicación de Ionic a través de Cordova.

En este caso, nosotros, para los mapas de google vamos a usar un plugin llamado ionic-native-google-maps, el cual lo podemos instalar a través de npm e Ionic CLI con los siguientes comandos:

npm install @ionic-native/core@beta @ionic-native/google-maps@beta


ionic cordova plugin add https://github.com/mapsplugin/cordova-plugin-googlemaps#multiple_maps

Una vez instaladas las dependencias para nuestro mapa de Google, tenemos que ir a nuestro archivo config.xml y justo después del último nodo de preferencias pegamos lo siguiente reemplazando el valor de el API KEY que obtuvimos en el primer paso:

<preference name="GOOGLE_MAPS_ANDROID_API_KEY" value="NUESTRO_API_KEY" />

Y nuestro código debería quedar algo así:

Con nuestras configuraciones listas, vamos a lo que verdaderamente nos concierne, a nuestro código.

3. A programar nuestro mapa

Nuestro proyecto extiende del template de tipo Tabs que nos ofrece Ionic CLI al momento de generarlo, y toda la programación hasta este momento se centra en solo un tab que es el tab1, nuestro mapa de Google lo vamos a programar en el tab2.

Lo primero que debemos hacer es darle forma a nuestra vista por lo que nos vamos a centrar en los archivos html y scss de nuestro componente tab2, y dentro de la etiqueta <ion-content> vamos a ubicar lo siguiente.

  <div id="map_canvas"></div>
  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button color="danger" (click)="localizar()">
      <ion-icon name="pin"></ion-icon>
    </ion-fab-button>
  </ion-fab>

Nuestro código debería quedar algo parecido a esto:

El primer div que agregamos a nuestra vista se refiere al espacio donde nuestro mapa será renderizado. A este div debemos configurar ciertos estilos para en este caso estos estilos que vamos agregar harán que nuestro mapa ocupe la totalidad de la pantalla, entonces para eso vamos a el archivo scss de este componente y agregamos lo siguiente:

#map_canvas {
  width: 100%;
  height: 100%;
}

No olvides configurar estos estilos, ya que, si no, el mapa no se va a mostrar en la pantalla.

Regresando a nuestra vista, el siguiente elemento que agregamos después del div que contiene al mapa, es un simple ion-fab que ejecutará el método localizar() del componente, esta función hará que se muestre nuestra ubicación en el mapa.

Es el turno de trabajar en el controlador de esta vista, vamos al archivo tab2.page.ts en donde deberemos agregar el siguiente código:

import { Component, OnInit } from "@angular/core";

import {
  GoogleMaps,
  GoogleMap,
  GoogleMapsEvent,
  Marker,
  GoogleMapsAnimation,
  MyLocation
} from "@ionic-native/google-maps";

import { Platform, LoadingController, ToastController } from "@ionic/angular";

@Component({
  selector: "app-tab2",
  templateUrl: "tab2.page.html",
  styleUrls: ["tab2.page.scss"]
})
export class Tab2Page implements OnInit {
  map: GoogleMap;
  loading: any;

  constructor(
    public loadingCtrl: LoadingController,
    public toastCtrl: ToastController,
    private platform: Platform
  ) {}

  async ngOnInit() {
    // Debido ngOnInit() inicia antes del evento
    // deviceready, debemos detectar cuando este evento se
    // ejecute para en ese momento cargar nuestro mapa sin problema alguno
    await this.platform.ready();
    await this.loadMap();
  }

  loadMap() {
    // Esta función inicializa la propiedad de clase
    // map
    // que va a contener el control de nuestro mapa de google

    // Para crear nuestro mapa debemos enviar como parametros
    // el id del div en donde se va a renderizar el mapa (paso anterior)
    // y las opciones que configuran nuestro mapa
    this.map = GoogleMaps.create("map_canvas", {
      camera: {
        target: {
          lat: -2.1537488,
          lng: -79.8883037
        },
        zoom: 18,
        tilt: 30
      }
    });
  }

  async localizar() {
    // Limpiamos todos los elementos de nuestro mapa
    this.map.clear();

    // Creamos un componente de Ionic para mostrar un mensaje
    // mientras obtenemos esperamos que termine el proceso de
    // obtener la ubicación
    this.loading = await this.loadingCtrl.create({
      message: "Espera por favor..."
    });

    // Presentamos el componente creado en el paso anterior
    await this.loading.present();

    // Ejecutamos el método getMyLocation de nuestra propiedad de clase
    // map
    // para obtener nuestra ubicación actual
    this.map
      .getMyLocation()
      .then((location: MyLocation) => {
        // Una vez obtenida la ubicación cerramos el mensaje de diálogo
        this.loading.dismiss();

        // Movemos la camara a nuestra ubicación con una pequeña animación
        this.map.animateCamera({
          target: location.latLng,
          zoom: 17,
          tilt: 30
        });

        // Agregamos un nuevo marcador
        let marker: Marker = this.map.addMarkerSync({
          title: "Estoy aquí!",
          snippet: "This plugin is awesome!",
          position: location.latLng,
          animation: GoogleMapsAnimation.BOUNCE
        });

        // Mostramos un InfoWindow
        marker.showInfoWindow();

        // Podemos configurar un evento que se ejecute cuando
        // se haya dado clic
        marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => {
          this.showToast("clicked!");
        });
      })
      .catch(error => {
        // En caso de que haya un problema en obtener la
        // ubicación
        this.loading.dismiss();
        this.showToast(error.error_message);
      });
  }

  // Función que muestra un Toast en la parte inferior
  // de la pantalla
  async showToast(mensaje) {
    let toast = await this.toastCtrl.create({
      message: mensaje,
      duration: 2000,
      position: "bottom"
    });

    toast.present();
  }
}

Propiedad `map`

Nuestra clase posee una propiedad map la cual contendrá toda la información y métodos de nuestro mapa de Google como tal, entonces lo primero que debemos hacer es crear una nueva instancia de mapa apenas iniciado nuestro componente, para hacer tal cosa implementamos la interfaz OnInit y al mismo tiempo el método ngOnInit() y es exactamente aquí donde debe ir toda la lógica que crea mi mapa, esta lógica va a ser invocada desde un método llamado loadMap(). Pero bien, antes de la llamada a esta función debemos asegurarnos de que la plataforma que está ejecutando nuestro código está lista y poder invocar funcionalidad nativa, para de esta manera no tener problemas al cargar nuestro mapa, esto lo hacemos mediante un service propio de Ionic llamado Platform, service que posee un método ready() que me va a devolver una promesa cuando nuestra plataforma esté lista.

loadMap()

Este método realiza la creación de nuestro mapa como tal a través del método create de la clase GoogleMaps. El método create recibe como primer parámetro el Id del div donde va a renderizar nuestro mapa y como segundo parámetro un objeto que debe implementar la interfaz GoogleMapOptions, en este caso pasamos a través de este objeto una propiedad camera en donde a su vez configuramos parámetros acerca de donde queremos que se ubique nuestro mapa, es decir la longitud y latitud, también configuramos el zoom y el ángulo de la vista (tilt).

localizar()

En este método vamos a hacer que nuestro mapa obtenga nuestra ubicación actual y mostraremos un pequeño marcador al cual configuraremos un evento que se va a ejecutar cuando demos clic en el mismo.

Primero dejamos limpio nuestro mapa de todos los elementos gráficos que este pudiera tener con el método this.map.clear(), luego mostramos un pequeño diálogo para que nuestro usuario no desespere mientras obtenemos la ubicación.

 this.map.clear();

 this.loading = await this.loadingCtrl.create({
  message: "Espera por favor..."
 });

await this.loading.present();

Luego ejecutamos el método getMyLocation() de nuestro objeto map el cual me va a devolver una promesa cuando se haya obtenido la ubicación.

this.map.getMyLocation()
 .then((location: MyLocation) => {
        ...
  })
 .catch(error => {
        ...
 });

Una vez que obtuvimos la información de nuestra ubicación vamos a movernos en el mapa a través de this.map.animateCamera, método al que debemos enviar información muy parecida a la que le enviamos por default a nuestro mapa, con la diferencia de que la longitud y latitud va a ser la que hemos obtenido.

this.map.animateCamera({
 target: location.latLng,
 zoom: 17,
 tilt: 30
});

Con nuestra vista situada en la ubicación obtenida vamos a dibujar un nuevo marcador, configurando un título, un pequeño texto de descripción, la posición y una pequeña animación GoogleMapsAnimation.BOUNCE la cual hará que al dibjuarse el marcador dispare una animación de rebote.

let marker: Marker = this.map.addMarkerSync({
 title: "Estoy aquí!",
 snippet: "This plugin is awesome!",
 position: location.latLng,
 animation: GoogleMapsAnimation.BOUNCE
});

Y por último configuramos el evento clic en nuestro marcador haciendo que se muestre un toast cuando este se dispare.

marker.on(GoogleMapsEvent.MARKER_CLICK).subscribe(() => { 
 this.showToast("clicked!"); 
});

Conclusión

El uso de los mapas de Google es una práctica muy común hoy en día, la importancia de referenciar ubicaciones, lugares se vuelve parte de nuestro día a día, y es por esta razón que en nuestro programa abarcamos este tema, espero que haya sido de bastante ayuda y no olvides tu like y comentarios, que nos ayudan mucho para mejorar.