paint-brush
Guía para principiantes sobre cómo dockerizar un proyecto de dApp de Vite por@ileolami
697 lecturas
697 lecturas

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

por Ileolami
Ileolami HackerNoon profile picture

Ileolami

@ileolami

I am a front-end developer, a Guidance Counsellor,and technical...

6 min read2024/09/24
Read on Terminal Reader
Read this story in a terminal
Print this story
tldt arrow
es-flagES
Lee esta historia en Español!
en-flagEN
Read this story in the original language, English!
vi-flagVI
Đọc bài viết này bằng tiếng Việt!
ja-flagJA
この物語を日本語で読んでください!
sw-flagSW
Soma hadithi hii kwa kiswahili!
am-flagAM
ይህንን ታሪክ በአማርኛ ያንብቡ!
qu-flagQU
Ñawinchay kay willakuyta en quechua!
ti-flagTI
ነዚ ዛንታ ኣብ ትግርኛ ኣንብብዎ!
tk-flagTK
Bu hekaýany türkmenlerde okaň!
ka-flagKA
წაიკითხეთ ეს ამბავი ქართულად!
gl-flagGL
Le esta historia en galego!
ne-flagNE
यो कथा नेपालीमा पढ्नुहोस्!
ms-flagMS
Baca cerita ini dalam bahasa Melayu!
ES

Demasiado Largo; Para Leer

Docker es una plataforma abierta para desarrollar, enviar y ejecutar aplicaciones. Docker le permite empaquetar y ejecutar su aplicación como una sola entidad en un entorno poco aislado llamado **CONTENEDOR. Los contenedores son livianos y contienen todo lo necesario para ejecutar la aplicación. Puede compartir contenedores mientras trabaja y estar seguro de que todos con quienes comparte obtienen el mismo contenedor que funciona de la misma manera.
featured image - Guía para principiantes sobre cómo dockerizar un proyecto de dApp de Vite
Ileolami HackerNoon profile picture
Ileolami

Ileolami

@ileolami

I am a front-end developer, a Guidance Counsellor,and technical writer

0-item

STORY’S CREDIBILITY

Guide

Guide

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.


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:

Captura de pantalla de una interfaz de administración de imágenes de Docker llamada "web3-dapp:latest".

Captura de pantalla de una interfaz de administración de imágenes de Docker llamada "web3-dapp:latest".

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

    image

  • 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.
  1. 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"]
  2. Crea tu imagen de contenedor usando esto:

     docker build -t <your-image-name> .
  3. Para ver la imagen de su contenedor, vaya a su escritorio Docker, haga clic en Images , como se muestra a continuación

    image

    o puedes usar este símbolo del sistema,

     docker images
  4. Para ver la imagen de tu contenedor en tu terminal

    Captura de pantalla de una ventana de terminal que muestra la salida del comando "docker images"

    Captura de pantalla de una ventana de terminal que muestra la salida del comando "docker images"

  5. Ejecutar la imagen:

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

Deberías ver un resultado como este:

 > vite-project@0.0.0 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 .

    image

  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 .

image

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

     docker login -u <YOUR USERNAME>
  2. Ingresa tu contraseña

    Tu contraseña no será visible mientras la escribes

    image

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

    image

    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

    image

    Verás un resultado como el siguiente:

    image

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> 

      image

    • 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

      image

    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.

L O A D I N G
. . . comments & more!

About Author

Ileolami HackerNoon profile picture
Ileolami@ileolami
I am a front-end developer, a Guidance Counsellor,and technical writer

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN...

Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite