node.js 및 ipfs-core를 사용하여 IPFS에 이미지를 추가하는 방법

IPFS란?



IPFS는 InterPlanetary File System의 약자로 분산 파일 시스템에서 데이터를 저장하고 공유하기 위한 p2p 프로토콜입니다.

IPFS는 서버에 의존하지 않으므로 분산화됩니다. 배포 및 사용이 쉽습니다. 이것은 분산 프로토콜이기 때문에 web3에 좋은 것입니다.

IPFS는 블록체인 개발자를 위한 것이 아니라 웹 개발자, 콘텐츠 제작자 등을 위한 것입니다.

ipfs에서 사용되는 몇 가지 용어가 있습니다.

노드 -> 서버로 생각하면 모든 노드가 서버이고 모든 사용자가 노드를 실행합니다.

고정 -> 사용자가 콘텐츠 액세스를 항상 사용할 수 있도록 파일을 고정해야 합니다. Pinata 또는 Infura와 같은 고정 서비스가 있습니다. 파일을 고정하지 않으면 특정 시간 후에 파일이 삭제됩니다.

CID(Content ID) ->는 파일의 고유 식별자로, 파일의 해시/지문이라고 생각하면 됩니다.

IPFS에 대해 자세히 알아보려면 (IPFS 설명서)[ https://docs.ipfs.io/concepts/what-is-ipfs/#decentralization ]를 읽어 보시기 바랍니다.

You can contact me by telegram if you need to hire a Full Stack developer or if you need a discord bot for your server

discord Appu#9136으로 저에게 연락할 수도 있습니다.

You can clone the repo if you want.

전제 조건



  • Node.js 설치됨
  • IPFS의 기본 이해
  • 설치 IPFS CLI

  • 프로젝트 생성


  • 터미널을 열고 다음을 입력합니다.
  • mkdir 노드-ipfs-튜토리얼
  • cd 노드-ipfs-튜토리얼
  • npm init --y
  • 코드 .

  • 종속성


  • ipfs-core

  • 종속성을 설치하려면 프로젝트 폴더로 이동하여 터미널을 열고 다음을 입력하십시오.

    npm i ipfs-core
    


    이제 package.json으로 이동하여 이를 추가합니다. 가져오기를 사용하므로 "type": "module"을 추가합니다.

    "type" : "module",
    "scripts": {
      "start": "node ./src index.js"
    },
    


    프로젝트 파일 구조



    노드-ipfs-튜토리얼/
    ├── node_modules/
    ├── 소스/
    │ └── index.js
    └── 패키지.json

    목차


  • Hello World
  • Adding Images
  • Retrieving Data
  • Conclusion

  • 1. 헬로월드

    Let's start with the example from the ipfs-core documentation

    import * as IPFS from 'ipfs-core'
    
    const ipfs = await IPFS.create()
    const { cid } = await ipfs.add('Hello world')
    console.log(cid)
    


    이제 터미널에 npm start를 입력하면 다음과 같이 표시됩니다.



    브라우저를 열고 "https://ipfs.io/ipfs/ "을 입력하면 파일 내용이 표시됩니다.



    2. 이미지 추가

    Now we're going to add some images, for this example i will use free images from unsplash

    따라서 이미지라는 폴더를 만들고 그 안에 이미지를 넣을 것입니다. 저는 3개의 이미지를 추가했습니다.

    ![이미지 폴더( https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cje1i4i61b0klxldihzi.png )

    그래서 파일 및 다른 디렉토리와 함께 작동하기 때문에 fs를 가져올 것입니다. 그런 다음 const에서 이미지 폴더가 있는 위치를 지정하고 읽을 것입니다.

    그런 다음 for 루프를 사용하여 이미지 폴더 내의 각 파일을 읽고 ipfs에 추가합니다.

    이번에는 결과를 사용하여 추가된 파일의 모든 속성을 표시합니다.

    import * as IPFS from 'ipfs-core'
    import fs from 'fs'
    
    const imagesDir = './src/images'
    
    const files = fs.readdirSync(imagesDir)
    
    const ipfs = await IPFS.create()
    
    for(let file of files) {
      const buffer = fs.readFileSync(`${imagesDir}/${file}`)
      const result = await ipfs.add(buffer)
      console.log(result)
    }
    


    당신은 이것과 비슷한 것을 보게 될 것입니다



    3. 데이터 검색

    to simplify the tedious task of copying the cid and pasting it into the browser, and add https://ipfs.io/ipfs/ .

    https://ipfs.io/ipfs/ 을 사용하여 const 게이트웨이를 생성한 다음 console.log(gateway+result.path) 결과를 다음과 같이 얻습니다.

    import * as IPFS from 'ipfs-core'
    import fs from 'fs'
    
    const imagesDir = './src/images'
    
    const files = fs.readdirSync(imagesDir)
    const gateway = 'https://ipfs.io/ipfs/'
    const ipfs = await IPFS.create()
    
    
    for(let file of files) {
      const buffer = fs.readFileSync(`${imagesDir}/${file}`)
      const result = await ipfs.add(buffer)
      console.log(result)
      console.log(gateway+result.path)
    }
    


    이제 이미지를 방문하려면 브라우저를 열고 "https://ipfs.io/ipfs/ "를 입력하거나 Ctrl + 링크를 클릭하면 파일 내용을 볼 수 있습니다.

    이 오류가 발생해도 걱정하지 마십시오.



    https://gateway.pinata.cloud/ipfs/과 같은 다른 게이트웨이와 같은 다른 방법을 사용하여 데이터를 검색할 수 있습니다.



    4. 결론

    We learned how to make add content to IPFS with node.js using ipfs-core. For my next post I plan to make an example using the Pinata API.

    I really hope you have been able to follow the post without any trouble, otherwise i apologize, please leave me your doubts or comments.

    You can contact me by telegram if you need to hire a Full Stack developer.

    You can clone the repo if you want.

    시간 내 주셔서 감사합니다.

    좋은 웹페이지 즐겨찾기