Unha guía para principiantes para dockerizar un proxecto Vite dApp

Podes estar a se preguntar que é DOCKERIZE . Significa usar Docker para contener o seu proxecto dApp.

Docker é unha plataforma aberta para desenvolver, enviar e executar aplicacións. Docker permíteche separar as túas aplicacións da túa infraestrutura para que poidas entregar software rapidamente.

• As aplicacións inclúen aplicacións web, API, aplicacións móbiles e servizos de backend. Inclúe o código que escribe, as bibliotecas que usa e as configuracións necesarias para que se execute.
• Infraestrutura como o sistema operativo (SO), a configuración de rede, os servidores web, a base de datos e outros servizos cos que interactúa a súa aplicación. Tamén implica o hardware ou as máquinas virtuais onde se executa a súa aplicación.

Docker permítelle empaquetar e executar a súa aplicación como unha única entidade nun ambiente pouco illado chamado CONTAINER.

Recipiente

Os contedores son lixeiros e conteñen todo o necesario para executar a aplicación, polo que non necesitas confiar no que está instalado no host. Podes compartir contedores mentres traballas e asegúrate de que todos os que compartas teñan o mesmo contedor que funciona da mesma forma.

Por exemplo, vostede e os seus colegas están a traballar nun proxecto dApp que usa Node.js e Hardhat. Inicialmente, configura o proxecto na súa máquina local, sabendo que antes de que os seus compañeiros poidan executar a aplicación localmente, necesitarían instalar Node.js e Hardhat nos seus sistemas. Agora, imaxinemos que un dos teus colegas está a usar unha máquina que non é compatible con Node.js e Hardhat. Como resolverías este problema?

Con Docker, pode empaquetar a súa aplicación, xunto con todas as súas dependencias, nun único contedor que se pode executar en calquera sistema operativo. Isto resolve o problema de instalar software ou dependencias por separado en diferentes máquinas.

Imaxes

Despois de que a aplicación conten en contenedores, como podes executala?

Como desenvolvedor frontend, ao iniciar unha nova aplicación React, normalmente executas npx create-react-app ou npm init vite@latest . Para un proxecto existente, normalmente executarías git pull seguido de npm install para facelo funcionar localmente. Do mesmo xeito, para executar un contedor, necesitas algo chamado imaxe de contenedor .

Unha imaxe de contedor é un paquete estandarizado que inclúe todos os ficheiros, binarios, bibliotecas e configuracións necesarias para executar a súa aplicación dentro dun contedor. É como ter todo agrupado para que poida funcionar de forma consistente en calquera ambiente.

Vexa a continuación unha imaxe do contedor:

Prácticas

Nesta sección, aprenderás a almacenar e compartir a túa aplicación en contedores.

Requisitos previos

1. Instalou a última versión de Docker Desktop .
2. Instalou un cliente Git .
3. Tes un IDE ou un editor de texto para editar ficheiros. Docker recomenda usar Visual Studio C ode.

Containeriza a túa aplicación

1. No seu directorio raíz, inicialice docker usando este símbolo do sistema:

    docker init

2. Proporcione respostas ás solicitudes

    ? 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ás tres ficheiros adicionais no teu directorio, a saber .dockerignore , compose.yaml e DockerFile

   

• Dockerfil : un Dockerfile é un documento de texto que contén todos os comandos que un usuario pode chamar na liña de comandos para montar unha imaxe.
• compose.yaml : o ficheiro Compose ou o ficheiro compose.yaml segue as regras proporcionadas pola Especificación de Compose sobre como definir aplicacións de contedores múltiples .
• .dockerignore : este ficheiro exclúe ficheiros e directorios do contexto de compilación.

4. Dentro de Dockerfile , borra o ficheiro e engade o seguinte:

    # 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. Constrúe a imaxe do teu recipiente usando isto:

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

6. Para ver a imaxe do teu contedor, vai ao teu escritorio docker e fai clic en Images , como se mostra a continuación

   

   ou pode usar este indicador de comandos,

    docker images

7. para ver a imaxe do teu contedor no teu terminal

   

8. Executar a imaxe:

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

Deberías ver unha saída como esta:

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

Compartindo a aplicación

1. Rexístrate ou inicia sesión en Docker Hub.

2. Seleccione o botón Crear repositorio .

   

3. Nomea o teu repositorio co mesmo nome da imaxe do contenedor. Asegúrate de que a visibilidade sexa pública .

4. Seleccione Crear .

5. Inicia sesión en Docker Hub mediante a liña de comandos

    docker login -u <YOUR USERNAME>

6. Introduza o seu contrasinal

   O teu contrasinal non estará visible ao escribir

   

7. Use o comando docker tag para darlle un novo nome á imaxe getting-started . Substitúe YOUR-USER-NAME polo teu ID de Docker:

   

   Podes atopar isto denied: requested access to the resource is denied ao presionar.

   Para solucionar isto,

   1. reinicie sesión usando docker login , prema Intro.
   2. Despois diso, navegarás ata o teu navegador,
   3. copia o teu terminal OTP e introdúceo,
   4. prema CONFIRMAR
   5. rexeitar a imaxe

   

   Verá unha saída como:

   

Isto mostra que a túa imaxe foi construída e introducida nun rexistro. Agora o teu equipo pode tirar desta imaxe e executar a aplicación na súa máquina local.

Podes comprobalo buscando a imaxe do teu contedor na barra de busca do teu escritorio ou docker hub .

Resolución de problemas

• Conflito portuario :

  • Erro : se o porto xa estaba en uso.

  • Solución : identificou o proceso mediante o porto e rematouno usando os seguintes 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> 

    

  • Como alternativa, pode executar o contedor Docker nun porto diferente:

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

• Actualizar unha aplicación

  Calquera cousa que actualices a túa aplicación, por exemplo, cambias unha sintaxe ou unha función,

  1. Detén o teu escritorio docker, fai clic en Containers

  2. Detén o porto e fai clic en eliminar

     

  3. Reconstruír a aplicación usando o comando docker build

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

  4. Volve executar a aplicación

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

Conclusión

Seguindo esta guía, pode empaquetar facilmente a súa aplicación e as súas dependencias nun contedor, compartila co seu equipo e executala facilmente en calquera máquina. Isto non só mellora a colaboración, senón que tamén mitiga os problemas relacionados coa configuración e compatibilidade do ambiente.