loading...

Desplegar Vue app + AWS ECS

luisejrobles profile image Luis Eduardo Jiménez Robles ・6 min read

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:

Vue Project Init

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

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

class-style components

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

Babel alongside Typescript

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

Linter / Formatter config

seguido nos pregunta sobre la configuración del linter
Lint on save

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:

Config files selection

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

Preset for projects

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

ECS Welcome page

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

ECS Config

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

Alt Text

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

Container config

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

Task definition

Damos click en Next la cual nos arroja

Cluster config

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

Config review

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

ECS ready

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 ✨

Vue 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:

Posted on by:

luisejrobles profile

Luis Eduardo Jiménez Robles

@luisejrobles

Computer Engineer with Master's Degree in Project Management. Current GitHub Campus Expert and GitKraken Ambassador, former GDG Leader, Global Shapers member focused in helping tech students.

Discussion

markdown guide