Guía para principiantes sobre cómo dockerizar un proyecto de dApp de Vite

Quizás te preguntes qué es DOCKERIZE . Significa usar Docker para contenerizar tu proyecto de dApp.

Docker es una plataforma abierta para desarrollar, distribuir y ejecutar aplicaciones. Docker le permite separar sus aplicaciones de su infraestructura para que pueda distribuir software rápidamente.

• Las aplicaciones incluyen aplicaciones web, API, aplicaciones móviles y servicios backend. Incluyen el código que escribes, las bibliotecas que utilizas y las configuraciones necesarias para su ejecución.
• Infraestructura como el sistema operativo (OS), la configuración de red, los servidores web, la base de datos y otros servicios con los que interactúa su aplicación. También incluye el hardware o las máquinas virtuales donde se ejecuta su aplicación.

Docker le permite empaquetar y ejecutar su aplicación como una sola entidad en un entorno ligeramente aislado llamado CONTENEDOR.

Recipiente

Los contenedores son livianos y contienen todo lo necesario para ejecutar la aplicación, por lo que no necesita depender de lo que esté instalado en el host. Puede compartir contenedores mientras trabaja y estar seguro de que todos con quienes comparte obtienen el mismo contenedor que funciona de la misma manera.

Por ejemplo, usted y sus colegas están trabajando en un proyecto de dApp que utiliza Node.js y Hardhat. Inicialmente, configura el proyecto en su máquina local, sabiendo que antes de que sus colegas puedan ejecutar la aplicación localmente, necesitarán instalar Node.js y Hardhat en sus sistemas. Ahora, imaginemos que uno de sus colegas está utilizando una máquina que no es compatible con Node.js y Hardhat. ¿Cómo resolvería este problema?

Con Docker, puedes empaquetar tu aplicación, junto con todas sus dependencias, en un único contenedor que puede ejecutarse en cualquier sistema operativo. Esto resuelve el problema de instalar software o dependencias por separado en diferentes máquinas.

Imágenes

Después de haber contenedorizado su aplicación, ¿cómo logra que se ejecute?

Como desarrollador frontend, al iniciar una nueva aplicación React, normalmente ejecutas npx create-react-app o npm init vite@latest . Para un proyecto existente, normalmente ejecutas git pull seguido de npm install para ponerlo en funcionamiento localmente. De manera similar, para ejecutar un contenedor, necesitas algo llamado imagen de contenedor .

Una imagen de contenedor es un paquete estandarizado que incluye todos los archivos, binarios, bibliotecas y configuraciones necesarias para ejecutar la aplicación dentro de un contenedor. Es como tener todo agrupado para que pueda ejecutarse de manera uniforme en cualquier entorno.

Vea a continuación una imagen del contenedor:

Prácticas

En esta sección aprenderá cómo contenerizar y compartir su aplicación.

Prerrequisitos

1. Ha instalado la última versión de Docker Desktop .
2. Has instalado un cliente Git .
3. Tienes un IDE o un editor de texto para editar archivos. Docker recomienda usar Visual Studio Code.

Contenga su aplicación

1. En su directorio raíz, inicialice Docker usando este símbolo del sistema:

    docker init

2. Proporcionar respuestas a las indicaciones

    ? What application platform does your project use? Node ? What version of Node do you want to use? 20.16.0 ? Which package manager do you want to use? npm ? Do you want to run "npm run build" before starting your server? No ? What command do you want to use to start the app? ["npm", "run", "dev"] ? What port does your server listen on? 5173

3. Verá tres archivos adicionales en su directorio, a saber, .dockerignore , compose.yaml y DockerFile

   

• Dockerfil : un Dockerfile es un documento de texto que contiene todos los comandos que un usuario puede llamar en la línea de comandos para ensamblar una imagen.
• compose.yaml : el archivo Compose, o archivo compose.yaml , sigue las reglas proporcionadas por la Especificación Compose sobre cómo definir aplicaciones de múltiples contenedores.
• .dockerignore : este archivo excluye archivos y directorios del contexto de compilación.

4. Dentro de Dockerfile , borre el archivo y agregue lo siguiente:

    # syntax=docker/dockerfile:1 ARG NODE_VERSION=20.16.0 FROM node:${NODE_VERSION}-alpine # Use development node environment by default. ENV NODE_ENV development WORKDIR /app # Copy package.json and package-lock.json to the working directory COPY package.json package-lock.json ./ # Install dependencies RUN npm install # Copy the rest of the source files into the image COPY . . # Change ownership of the /app directory to the node user RUN chown -R node:node /app # Switch to the node user USER node # Ensure node_modules/.bin is in the PATH ENV PATH /app/node_modules/.bin:$PATH # Expose the port that the application listens on EXPOSE 5173 # Run the application CMD ["npm", "run", "dev"]

5. Crea tu imagen de contenedor usando esto:

    docker build -t <your-image-name> .

6. Para ver la imagen de su contenedor, vaya a su escritorio Docker, haga clic en Images , como se muestra a continuación

   

   o puedes usar este símbolo del sistema,

    docker images

7. Para ver la imagen de tu contenedor en tu terminal

   

8. Ejecutar la imagen:

    docker run -p 5173:5173 <your-image-name>

Deberías ver un resultado como este:

 > [email protected] dev > vite VITE v5.4.2 ready in 222 ms ➜ Local: http://localhost:5173/ ➜ Network: http://172.17.0.2:5173/

Compartir la aplicación

1. Regístrese o inicie sesión en Docker Hub.

2. Seleccione el botón Crear repositorio .

   

3. Asigne a su repositorio el mismo nombre de la imagen del contenedor. Asegúrese de que la visibilidad sea pública .

4. Seleccione Crear .

5. Inicie sesión en Docker Hub mediante la línea de comandos

    docker login -u <YOUR USERNAME>

6. Ingresa tu contraseña

   Tu contraseña no será visible mientras la escribes

   

7. Utilice el comando docker tag para darle un nuevo nombre a la imagen getting-started . Reemplace YOUR-USER-NAME con su ID de Docker:

   

   Es posible que encuentres esto denied: requested access to the resource is denied durante el envío.

   Para solucionar esto,

   1. Vuelva a iniciar sesión usando docker login y presione Enter.
   2. Después de eso, serás dirigido a tu navegador,
   3. Copia tu OTP en la terminal e ingrésalo,
   4. Presione CONFIRMAR
   5. Reply la imagen

   

   Verás un resultado como el siguiente:

   

Esto demuestra que su imagen se ha creado y se ha incluido en un registro. Su equipo ahora puede extraer esta imagen y ejecutar la aplicación en su máquina local.

Puede comprobarlo buscando la imagen de su contenedor en la barra de búsqueda de su escritorio Docker o Docker Hub .

Solución de problemas

• Conflicto portuario :

  • Error : si el puerto ya estaba en uso.

  • Solución : identifiqué el proceso usando el puerto y lo finalicé usando los siguientes comandos:

     # Find the process using port 8000 lsof -i :8000 # Kill the process (replace <PID> with the actual process ID found from the previous command) kill -9 <PID> 

    

  • Alternativamente, puede ejecutar el contenedor Docker en un puerto diferente:

     docker run -p 8001:8000 <your-image-name>

• Actualizar una aplicación

  Cualquier cosa que actualice su aplicación, por ejemplo, si cambia una sintaxis o función,

  1. Detenga su escritorio Docker y haga clic en Containers

  2. Detenga el puerto y haga clic en eliminar

     

  3. Reconstruir la aplicación usando el comando docker build

      docker build -t <your-image-name> .

  4. Vuelva a ejecutar la aplicación

      docker run -p 5173:5173 <your-image-name>

Conclusión

Si sigue esta guía, podrá empaquetar fácilmente su aplicación y sus dependencias en un contenedor, compartirla con su equipo y ejecutarla fácilmente en cualquier máquina. Esto no solo mejora la colaboración, sino que también mitiga los problemas relacionados con la configuración y la compatibilidad del entorno.