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.

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