Buenas!, en este post me gustaría enseñar cómo podríamos trabajar sobre un proyecto de VSF con una imagen node de Docker, para que se tenga en cuenta especifico las versiones/características del equipo con el que voy a hacerlo:

• Equipo: MacBook Pro (chip Apple M1) (v)macOS Big Sur 11.6
• Docker: v19.03
• Node: trabajaremos con la versión 14

Al lio!, aunque antes explicar una cosa, en este caso, estoy trabajando con el chip de Apple Silicon, antes, en los otros equipos, creábamos la imagen y la subíamos a un servidor el cual nos permitía conectar el volumen y poder crear la imagen en local, de momento con el chip de Apple Silicon no he conseguido que esto funcione, por lo que tiraremos de las imágenes que ya tiene docker para poder descargar. Paso el listado por si alguien quiere utilizar una versión mas concreta o superior/inferior.

Listado de hub.docker/node

Ahora bien, sigamos y vayamos por partes, primero vamos a ver cómo poder crear proyecto de VSF y después veremos cómo crear la imagen node.

1) Crear proyecto VSF

=> Empezamos instalando el CLI (Command Line Interface) de VSF, en este caso mejor lo instalamos de forma global, de esta forma ya lo tendremos disponible para futuros proyectos:

yarn global add @vue-storefront/cli

=> Ahora creamos el proyecto con el siguiente comando:

npx @vue-storefront/cli init <project_name>

El <project_name> es un parámetro opcional para el comando anterior pero obligatorio para el proceso de creación del proyecto, ya que necesita un nombre donde crear el proyecto y crear la carpeta.

=> Una vez tengamos el proyecto haremos un cd <project_name> y nos metemos dentro de la raíz del proyecto.

2) Crear la imagen de Docker Node para VSF

=> Una vez estamos dentro del proyecto, debemos creare un archivo *.yml, un Dockerfile con la información de la imagen que queremos:

touch docker-compose.yml

=> Ahora editaremos ese fichero incluyendo esto:

version: "2"
services:
  node:
    image: "node:14"
    user: "node"
    working_dir: /home/node/app
    environment:
      - VS_ENV=dev
    volumes:
      - ./:/home/node/app
    ports:
      - "3000:3000"
    command: "yarn dev"

Veamos las partes importantes el fichero Dockerfile

image: Aquí especificamos la imagen (versión) del node que queremos usar, aquí entra el listado que he adjuntado al principio, donde podemos poner una imagen del hub de docker. En caso de querer utilizar un volumen ya creado, aquí lo cambiaríamos por nuestro volumen.

user: El usuario que tendrá los permisos para poder trabajar.

working_dir: Aquí se describirán los comandos que puede usar el Dockerfile.

ports: El puerto sobre el que trabajará el docker.

=> Una vez tenemos el Dockerfile listo con nuestros parámetros, lazamos lo siguiente:

docker-compose up -d

=> Si todo ha ido bien, al final veremos algo como esto:

Status: Downloaded newer image for node:14
Creating <image-name> ... done

Aquí se lanzará por último el parámetro command, que en este caso lanzará un yarn dev levantando el proyecto. Y con esto ya lo tendríamos todo.

3) Checkear la imagen de Docker Node para VSF

Antes de finalizar el post, veamos unos comandos para ver si todo a ido bien o si ha ocurrido algo ver el que ha pasado. Si nosotros lanzamos esto:

docker ps | grep node

Si todo está correcto veremos algo así:

494aaf2a887d node:14 "docker-entrypoint.s…" About an hour ago Up About an hour 0.0.0.0:3000->3000/tcp, :::3000->3000/tcp vuestorefront_node_1

Esto es importante, por que esto mismo nos avisa donde se está lanzando el proyecto, en este caso estaría disponible en el host 0.0.0.0:3000.

Si bien nos fijamos, el primer campo será el ID de nuestro contenedor de Node, esto es importante tenerlo, por que como ya sabemos, cuando lanzamos un proyecto de JS, en la consola siempre vemos warnings, errors, logs... entonces para tener el control de esa información tendríamos que ver los log del contenedor de Docker, podemos verlo lanzando lo siguiente:

docker logs --follow