Panduan Pemula untuk Melabuhkan Projek Vite dApp

Anda mungkin tertanya-tanya apa itu DOCKERIZE . Ini bermakna menggunakan Docker untuk menyimpan projek dApp anda.

Docker ialah platform terbuka untuk membangunkan, menghantar dan menjalankan aplikasi. Docker membolehkan anda memisahkan aplikasi anda daripada infrastruktur anda supaya anda boleh menghantar perisian dengan cepat.

• Aplikasi termasuk apl web, API, apl mudah alih dan perkhidmatan hujung belakang. Ia termasuk kod yang anda tulis, pustaka yang anda gunakan dan konfigurasi yang diperlukan untuk menjalankannya.
• Infrastruktur seperti sistem pengendalian(OS), tetapan Rangkaian, pelayan web, pangkalan data dan perkhidmatan lain yang berinteraksi dengan aplikasi anda. Ia juga melibatkan perkakasan atau mesin maya tempat aplikasi anda dijalankan.

Docker membenarkan anda membungkus dan menjalankan aplikasi anda sebagai satu entiti dalam persekitaran terpencil yang dikenali sebagai CONTAINER.

bekas

Bekas adalah ringan dan mengandungi semua yang diperlukan untuk menjalankan aplikasi, jadi anda tidak perlu bergantung pada apa yang dipasang pada hos. Anda boleh berkongsi bekas semasa anda bekerja dan pastikan semua orang yang anda kongsi mendapat bekas yang sama yang berfungsi dengan cara yang sama.

Contohnya, anda dan rakan sekerja anda sedang mengusahakan projek dApp yang menggunakan Node.js dan Hardhat. Pada mulanya, anda menyediakan projek pada mesin tempatan anda, dengan mengetahui bahawa sebelum rakan sekerja anda boleh menjalankan aplikasi secara tempatan, mereka perlu memasang Node.js dan Hardhat pada sistem mereka. Sekarang, mari bayangkan salah seorang rakan sekerja anda menggunakan mesin yang tidak serasi dengan Node.js dan Hardhat. Bagaimana anda akan menyelesaikan masalah ini?

Dengan Docker, anda boleh membungkus aplikasi anda, bersama-sama dengan semua kebergantungannya, ke dalam satu bekas yang boleh dijalankan pada mana-mana sistem pengendalian. Ini menyelesaikan isu memasang perisian atau kebergantungan secara berasingan pada mesin yang berbeza.

Imej

Selepas anda menyimpan aplikasi anda, bagaimanakah anda boleh menjalankannya?

Sebagai pembangun bahagian hadapan, apabila memulakan apl React baharu, anda biasanya menjalankan npx create-react-app atau npm init vite@latest . Untuk projek sedia ada, anda biasanya akan menjalankan git pull diikuti dengan npm install untuk menjalankannya secara setempat. Begitu juga, untuk menjalankan bekas, anda memerlukan sesuatu yang dipanggil imej bekas .

Imej bekas ialah pakej piawai yang merangkumi semua fail, binari, perpustakaan dan konfigurasi yang diperlukan untuk menjalankan aplikasi anda di dalam bekas. Ia seperti mempunyai segala-galanya disatukan supaya ia boleh berjalan secara konsisten merentasi mana-mana persekitaran.

Lihat di bawah untuk imej bekas:

Praktikal

Dalam bahagian ini, anda akan belajar cara menyimpan dan berkongsi apl anda.

Prasyarat

1. Anda telah memasang versi terkini Docker Desktop .
2. Anda telah memasang klien Git .
3. Anda mempunyai IDE atau editor teks untuk mengedit fail. Docker mengesyorkan menggunakan Visual Studio C ode.

Simpan aplikasi anda

1. Dalam direktori root anda, mulakan docker menggunakan command prompt ini:

    docker init

2. Berikan jawapan kepada gesaan

    ? 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. Anda akan melihat tiga fail tambahan dalam direktori anda, iaitu .dockerignore , compose.yaml dan DockerFile

   

• Dockerfil : Dockerfile ialah dokumen teks yang mengandungi semua arahan yang boleh dipanggil oleh pengguna pada baris arahan untuk memasang imej.
• compose.yaml : Fail Karang, atau fail compose.yaml mengikut peraturan yang disediakan oleh Spesifikasi Karang dalam cara mentakrifkan aplikasi multi -bekas.
• .dockerignore : Fail ini mengecualikan fail dan direktori daripada konteks binaan.

4. Di dalam Dockerfile , kosongkan fail dan tambah yang berikut:

    # 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. Bina imej bekas anda menggunakan ini:

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

6. Untuk melihat imej bekas anda, pergi ke desktop docker anda, klik pada Images , seperti yang ditunjukkan di bawah

   

   atau anda boleh menggunakan command prompt ini,

    docker images

7. untuk melihat imej bekas anda dalam terminal anda

   

8. Jalankan imej:

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

Anda sepatutnya melihat output seperti ini:

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

Berkongsi Aplikasi

1. Daftar atau Log masuk ke Docker Hub.

2. Pilih butang Cipta Repositori .

   

3. Namakan repositori anda dengan nama imej bekas yang sama. Pastikan Keterlihatan adalah Umum .

4. Pilih Buat .

5. Log masuk ke Docker Hub menggunakan baris arahan

    docker login -u <YOUR USERNAME>

6. Masukkan Kata Laluan anda

   Kata laluan anda tidak akan kelihatan semasa menaip

   

7. Gunakan arahan docker tag untuk memberikan imej getting-started nama baharu. Gantikan YOUR-USER-NAME dengan ID Docker anda:

   

   Anda mungkin menghadapi ini denied: requested access to the resource is denied semasa menolak.

   Untuk membetulkan ini,

   1. log masuk semula menggunakan docker login , tekan enter.
   2. Selepas itu, anda akan dilayari ke penyemak imbas anda,
   3. salin OTP terminal anda dan masukkannya,
   4. tekan CONFIRM
   5. menolak imej itu

   

   Anda akan melihat output seperti:

   

Ini menunjukkan imej anda telah dibina dan ditolak ke dalam pendaftaran. Pasukan anda kini boleh menarik imej ini dan menjalankan aplikasi pada mesin tempatan mereka.

Anda boleh menyemak dengan mencari imej kontena anda pada bar carian pada desktop docker atau hab docker anda.

Menyelesaikan masalah

• Konflik Pelabuhan :

  • Ralat : jika port telah digunakan.

  • Penyelesaian : Mengenal pasti proses menggunakan port dan menamatkannya menggunakan arahan berikut:

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

    

  • Sebagai alternatif, anda boleh menjalankan bekas Docker pada port yang berbeza:

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

• Kemas kini Aplikasi

  Apa-apa sahaja yang anda kemas kini apl anda contohnya anda menukar sintaks atau fungsi,

  1. Hentikan desktop docker anda, klik pada Containers

  2. Hentikan port dan klik pada padam

     

  3. Bina semula Aplikasi menggunakan arahan docker build

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

  4. Jalankan semula apl

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

Kesimpulan

Dengan mengikuti panduan ini, anda boleh membungkus aplikasi anda dan kebergantungannya dengan mudah ke dalam bekas, berkongsi dengan pasukan anda dan menjalankannya dengan mudah pada mana-mana mesin. Ini bukan sahaja meningkatkan kerjasama tetapi juga mengurangkan isu yang berkaitan dengan persediaan dan keserasian persekitaran.