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:
Top comments (0)