Hướng dẫn cho người mới bắt đầu về Dockerizing một dự án dApp Vite

Bạn có thể thắc mắc DOCKERIZE là gì. Nó có nghĩa là sử dụng Docker để chứa dự án dApp của bạn.

Docker là một nền tảng mở để phát triển, vận chuyển và chạy các ứng dụng. Docker cho phép bạn tách biệt các ứng dụng của mình khỏi cơ sở hạ tầng để bạn có thể phân phối phần mềm nhanh chóng.

• Ứng dụng bao gồm ứng dụng web, API, ứng dụng di động và dịch vụ phụ trợ. Nó bao gồm mã bạn viết, thư viện bạn sử dụng và cấu hình cần thiết để chạy.
• Cơ sở hạ tầng như hệ điều hành (OS), thiết lập mạng, máy chủ web, cơ sở dữ liệu và các dịch vụ khác mà ứng dụng của bạn tương tác. Nó cũng liên quan đến phần cứng hoặc máy ảo nơi ứng dụng của bạn chạy.

Docker cho phép bạn đóng gói và chạy ứng dụng của mình như một thực thể duy nhất trong một môi trường tách biệt lỏng lẻo gọi là CONTAINER.

Thùng chứa

Container nhẹ và chứa mọi thứ cần thiết để chạy ứng dụng, do đó bạn không cần phải dựa vào những gì được cài đặt trên máy chủ. Bạn có thể chia sẻ container trong khi làm việc và đảm bảo rằng mọi người bạn chia sẻ đều có cùng một container hoạt động theo cùng một cách.

Ví dụ, bạn và các đồng nghiệp đang làm việc trên một dự án dApp sử dụng Node.js và Hardhat. Ban đầu, bạn thiết lập dự án trên máy cục bộ của mình, biết rằng trước khi các đồng nghiệp có thể chạy ứng dụng cục bộ, họ sẽ cần cài đặt Node.js và Hardhat trên hệ thống của họ. Bây giờ, hãy tưởng tượng một trong những đồng nghiệp của bạn đang sử dụng một máy không tương thích với Node.js và Hardhat. Bạn sẽ giải quyết vấn đề này như thế nào?

Với Docker, bạn có thể đóng gói ứng dụng của mình, cùng với tất cả các phần phụ thuộc, vào một container duy nhất có thể chạy trên bất kỳ hệ điều hành nào. Điều này giải quyết vấn đề cài đặt phần mềm hoặc phần phụ thuộc riêng biệt trên các máy khác nhau.

Hình ảnh

Sau khi bạn đã chứa ứng dụng của mình, làm thế nào để chạy nó?

Là một nhà phát triển front-end, khi bắt đầu một ứng dụng React mới, bạn thường chạy npx create-react-app hoặc npm init vite@latest . Đối với một dự án hiện có, bạn thường chạy git pull theo sau là npm install để chạy cục bộ. Tương tự như vậy, để chạy một container, bạn cần một thứ gọi là container image .

Container image là một gói chuẩn hóa bao gồm tất cả các tệp, tệp nhị phân, thư viện và cấu hình cần thiết để chạy ứng dụng của bạn bên trong một container. Giống như việc đóng gói mọi thứ lại với nhau để có thể chạy nhất quán trên mọi môi trường.

Xem bên dưới để biết hình ảnh container:

Thực hành

Trong phần này, bạn sẽ học cách chứa và chia sẻ ứng dụng của mình.

Điều kiện tiên quyết

1. Bạn đã cài đặt phiên bản mới nhất của Docker Desktop .
2. Bạn đã cài đặt một máy khách Git .
3. Bạn có IDE hoặc trình soạn thảo văn bản để chỉnh sửa tệp. Docker khuyên bạn nên sử dụng Visual Studio Code .

Đóng gói ứng dụng của bạn

1. Trong thư mục gốc của bạn, hãy khởi tạo docker bằng dấu nhắc lệnh này:

    docker init

2. Cung cấp câu trả lời cho các lời nhắc

    ? 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. Bạn sẽ thấy ba tệp bổ sung trong thư mục của mình, cụ thể là .dockerignore , compose.yaml và DockerFile

   

• Dockerfil : Dockerfile là một tài liệu văn bản chứa tất cả các lệnh mà người dùng có thể gọi trên dòng lệnh để lắp ráp một hình ảnh.
• compose.yaml : Tệp Compose hoặc tệp compose.yaml tuân theo các quy tắc do Đặc tả Compose cung cấp về cách xác định các ứng dụng đa container.
• .dockerignore : Tệp này loại trừ các tệp và thư mục khỏi ngữ cảnh xây dựng.

4. Bên trong Dockerfile , xóa tệp và thêm nội dung sau:

    # 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. Xây dựng hình ảnh container của bạn bằng cách sử dụng:

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

6. Để xem hình ảnh container của bạn, hãy vào màn hình docker, nhấp vào Images , như hiển thị bên dưới

   

   hoặc bạn có thể sử dụng dấu nhắc lệnh này,

    docker images

7. để xem hình ảnh container của bạn trong thiết bị đầu cuối của bạn

   

8. Chạy hình ảnh:

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

Bạn sẽ thấy kết quả như thế này:

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

Chia sẻ ứng dụng

1. Đăng ký hoặc Đăng nhập vào Docker Hub.

2. Chọn nút Tạo kho lưu trữ .

   

3. Đặt tên kho lưu trữ của bạn bằng cùng tên hình ảnh chứa. Đảm bảo Visibility là Public .

4. Chọn Tạo .

5. Đăng nhập vào Docker Hub bằng dòng lệnh

    docker login -u <YOUR USERNAME>

6. Nhập mật khẩu của bạn

   Mật khẩu của bạn sẽ không hiển thị khi bạn nhập

   

7. Sử dụng lệnh docker tag để đặt tên mới cho image getting-started . Thay YOUR-USER-NAME bằng Docker ID của bạn:

   

   Bạn có thể gặp denied: requested access to the resource is denied trong khi đẩy.

   Để sửa lỗi này,

   1. đăng nhập lại bằng docker login , nhấn enter.
   2. Sau đó, bạn sẽ được điều hướng đến trình duyệt của mình,
   3. sao chép OTP của bạn vào thiết bị đầu cuối và nhập nó,
   4. nhấn XÁC NHẬN
   5. đẩy lùi hình ảnh

   

   Bạn sẽ thấy kết quả như sau:

   

Điều này cho thấy hình ảnh của bạn đã được xây dựng và đẩy vào sổ đăng ký. Nhóm của bạn hiện có thể kéo hình ảnh này và chạy ứng dụng trên máy cục bộ của họ.

Bạn có thể kiểm tra bằng cách tìm kiếm hình ảnh container của mình trên thanh tìm kiếm trên màn hình docker hoặc docker hub .

Xử lý sự cố

• Xung đột cảng :

  • Lỗi : nếu cổng đã được sử dụng.

  • Giải pháp : Xác định tiến trình sử dụng cổng và chấm dứt tiến trình đó bằng các lệnh sau:

     # 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> 

    

  • Ngoài ra, bạn có thể chạy vùng chứa Docker trên một cổng khác:

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

• Cập nhật ứng dụng

  Bất cứ điều gì bạn cập nhật ứng dụng của mình, ví dụ bạn thay đổi cú pháp hoặc chức năng,

  1. Dừng màn hình docker của bạn, nhấp vào Containers

  2. Dừng cổng và nhấp vào xóa

     

  3. Xây dựng lại ứng dụng bằng lệnh docker build

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

  4. Chạy lại ứng dụng

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

Phần kết luận

Bằng cách làm theo hướng dẫn này, bạn có thể dễ dàng đóng gói ứng dụng và các phụ thuộc của nó vào một container, chia sẻ với nhóm của bạn và chạy nó dễ dàng trên bất kỳ máy nào. Điều này không chỉ tăng cường sự cộng tác mà còn giảm thiểu các vấn đề liên quan đến thiết lập môi trường và khả năng tương thích.