Desplegar Vue app + AWS ECS

Luis Eduardo Jiménez Robles — Thu, 26 Mar 2020 05:08:34 +0000

Este post surgió debido a las ganas de aprender nuevas tecnologías y herramientas pues durante 5 años he utilizado mayormente Angular y mi opción estándar para despliegue de aplicaciones en la nube siempre ha sido Google Cloud. En esta ocasión me propuse adentrarme un poco en AWS, especificamente Elastic Container Service o (ECS) y pues de ello salió este tutorial, espero les guste.✨

A continuación encontrarán vínculos a las páginas de instalación y/o configuración de las distintas herramientas

Se espera que ya esté instalado y configurado lo anterior. En caso de AWS dar de alta su tarjeta para que les permita utilizar ECS.

Una vez ya instalado lo anterior (docker, vue, vue cli) comenzaremos 🚀

Vue

Para la parte de Vue, generamos un proyecto de Vue mediante la cli denominado
hello-world-vue escribiendo en la consola dentro de la carpeta deseada:

vue create hello-world-vue

que nos desplegará la siguiente ventana:

donde seleccionaremos la opción Default (babel, eslint) dependiendo de preferencias. En mi caso, la opción Manually select features
pues requiero:

Typescript
Linter / Formatter
Babel

Para más información de opciones sobre la creación de un proyecto click aquí

después del habilitado de features y/o haber seleccionado Default en la siguiente ventana nos preguntan Use class-style component syntax?(Y/n) la cual para fines prácticos tecleamos n

arrojándonos una ventana como la siguiente en la cual tecleamos y

posterior, nos pregunta la configuración del linter/formatter lo cual seleccionamos ESLint with error prevention only como a continuación

seguido nos pregunta sobre la configuración del linter

seleccionando Lint on save y continuamos a seleccionar dónde nos gustaría guardar la configuración por lo que seleccionamos In dedicated config files como a continuación:

y por último nos pregunta si queremos guardar la configuración para futuros proyectos. En mi caso teclee n

Nota: toda la selección anterior de configuración la hice de acuerdo a mis necesidades, en caso de necesitar alguna distinta sí puede utilizarse.

Una vez finalizada la configuración, procedemos a agregar un archivo Dockerfile en la raíz del proyecto. Este archivo sirve como punto de inicio para que Docker genere una imagen de nuestro proyecto a desplegar. conocer más sobre Dockerfile

El contenido del archivo es el siguiente:

# Getting alpine version of node   
FROM node:lts-alpine
# Installing https://www.npmjs.com/package/http-server
RUN npm install -g http-server
# Creating app/
WORKDIR /app
# Copying compiled files
COPY dist/ .
# Exposing port 8080
EXPOSE 8080
CMD ["http-server" ]

Nota: este dockerfile funciona una vez hecho el building de la aplicación pues busca la carpeta dist/

Ya teniendo el archivo Dockerfile guardado, procedemos a generar el build del proyecto escribiendo en nuestra terminal:

npm run build

dicho comando lo que realmente va a ejecutar será

vue-cli-service build

generando pues, la carpeta /dist en la raíz del proyecto.

Docker

procedemos ahora a la creación de la imagen de Docker, para ello, previamente necesitaremos una cuenta en DockerHub pues haremos login a ella mediante la consola introduciendo el comando docker login para ingresar después nuestras credenciales.

Posterior haremos el build de la imagen con el comando

docker build . -t <username>/hello-world-vue

username corresponde al generado en DockerHub. Para conocer más sobre el comando build click aquí.

y si exitosamente hacemos el build obtendremos algo similar:

Sending build context to Docker daemon  180.5MB
Step 1/6 : FROM node:lts-alpine
 ---> 927d03058714
Step 2/6 : RUN npm install -g http-server
 ---> Using cache
 ---> 074475e54368
Step 3/6 : WORKDIR /app
 ---> Using cache
 ---> 8c6551a57c4e
Step 4/6 : COPY dist/ .
f ---> 8898c0140bc9
Step 5/6 : EXPOSE 8080
 ---> Running in 5376aa103b41
Removing intermediate container 5376aa103b41
 ---> 41282d6c5a48
Step 6/6 : CMD ["http-server" ]
 ---> Running in 4981b6a63db7
Removing intermediate container 4981b6a63db7
 ---> e4fb5aefd78c
Successfully built e4fb5aefd78c
Successfully tagged luisejrobles/hello-world-vue

para subirlo a DockerHub procedemos a ejecutar el comando

docker push <username>/hello-world-vue

Para conocer más del comando Push click aquí.

Si todo sale bien en nuestra cuenta de Docker Hub tendremos dicha imagen. 🏁

AWS ECS

Para la parte final, nos encargaremos de desplegar la imagen subida en Docker Hub a Elastic Container Service 💯

Con ello, procedemos a ingresar a nuestra consola de amazon con nuestra cuenta mediante console.aws.amazon.com. Una vez dentro, en la sección de Containers seleccionamos Elastic Container Service en la cual obtendremos una ventana como la siguiente

dando así Get started desplegándonos una imagen como a continuación

en la cual en la sección Container definition damos click en Configure en el recuadro de Custom lo que nos desplega

lo cual llenamos de la siguiente manera:

Container image: hello-world-app
Image: docker.io//hello-world-vue

Memory limit:
- Soft: 300
- Hard: 400

Port mappings: 8080

Nota: username se refiere al de Docker Hub

Recordando pues, nuestra imagen de docker está configurada para exponer el puerto 8080 _(mediante EXPOSE 8080)_de nuestra aplicación y es por ello que en Port mapping seleccionamos dicho puerto quedando la configuración similar a

Procedemos a seleccionar Update lo cual nos regresa a la pantalla principal para poder seleccionar Next desplegando

Damos click en Next la cual nos arroja

En la cual en Cluster definition procedemos a poner hello-world-vue y damos Next. Lo anterior, nos despliega la información de nuestra aplicación a ser desplegada como a continuación

y procedemos a darle Create para esperar unos minutos a que AWS despliegue nuestra aplicación. Una vez aprovisionado todo el servicio nos mostrará

Dando pues click en View service

Después en Tasks, seleccionamos el task generado (es alfanumérico) y dentro de ahí en la sección de Network agarramos el Public IP y lo pegamos en nuestro navegador añadiéndole al final :8080
desplegando así en el navegador nuestra app ✨

Con ello, hemos finalizado el despliegue de nuestra app que resultó ser bastante sencillo. Cabe mencionar que ECS utiliza Fargate por detrás por si quieren leer más sobre ello.

Les dejo a continuación los recursos consultados:

Un vistazo a git: aliases

Luis Eduardo Jiménez Robles — Fri, 07 Jun 2019 03:14:16 +0000

Si por alguna razón o determinación estamos en esto de la programación ya te habrás dado cuenta que mucho de lo que se hace en la industria es colaborar contrario a lo que malamente piensa, cuando de ello se trata una de las herramientas indispensables es git. En esta ocasión toca el turno de escribir acerca de git aliases.

¿Qué son los git aliases?

Los aliases o sobrenombres son acrónimos o 'apodos' los cuales asignas a los comandos que ya conocemos de git.

¿Cómo lo hacemos?

Para configurar los acrónimos tenemos que hacerlos por medio del comando

git config

y para ello, tenemos la oportunidad de declararlos de manera global (para hacer uso de ellos en cualquier carpeta versionada) agregándole la bandera --global o de manera local (aliases por carpeta versionada).

Si no queremos hacer uso del comando git config podemos configurar dichos aliases por medio de .git/config local o ~/.gitconfig global

Ejemplo

Queremos configurar un acrónimo para commit de manera local, la manera de hacerlo es:

git config alias.co commit

Si queremos configurarlo de manera global sería:

git config --global alias.co commit

¿Recuerdan que les comenté de la bandera --global?
😉

Ahora con ello ya podemos hacer uso de nuestro nuevo acrónimo así:

git co -m '¡nuevo commit utilizando aliases!'

¿Qué pasa si también nos es molesto escribir el -m?

Bueno, podemos tambien concatenar banderas de la siguiente forma:

git config alias.com 'commit -m'

Así de sencillo es hacer uso de dicha funcionalidad dejando a su imaginación los diferetes acrónimos que pueden crear con el fin de agilizar y ahorrar tiempo a la hora de programar. 🤙

¡Espero les haya gustado y nos estaremos leyendo en el siguiente post que será publicado el día jueves!

Feedback es bienvenido ✨

DEV Community: Luis Eduardo Jiménez Robles