IPFS 및 분산 스토리지 소개.

IPFS은 InterPlanetary 파일 시스템으로 파일, 웹 사이트, 미디어 및 애플리케이션을 저장하고 액세스하는 데 사용되는 피어 투 피어 분산형 스토리지 네트워크로 설명할 수 있습니다.

파일에 서버의 위치가 아닌 일반적으로 토큰이라고 하는 콘텐츠 주소를 부여하여 작동합니다.

이 기술의 주요 특징은 정보가 여러 노드에 저장되고 생성된 주소를 사용하여 언제든지 액세스할 수 있음을 의미하는 분산 파일 시스템이라는 사실입니다.


중앙 집중식 파일 시스템



분산 파일 시스템

중앙 집중식 NFS(네트워크 파일 시스템) 및 https(하이퍼 텍스트 전송 프로토콜)와 어떻게 다른지 논의해 보겠습니다.

네트워크 파일 시스템은 네트워크를 사용하여 여러 디스크 및 디렉토리에서 데이터에 액세스하고 데이터를 검색하는 프로토콜입니다. 이 설명은 해시 참조/주소로 데이터를 식별하는 절차를 가진 IPFS와 구별되는 서버 및 중앙 집중식 관리자의 사용을 나타냅니다. 주소는 특정 데이터의 사용자 간에 공유됩니다.

하이퍼 텍스트 전송 프로토콜 : 인터넷은 유명한 클라이언트-서버 프로토콜과 같은 특정 프로토콜을 따라 정보를 교환합니다. http 방법을 사용하면 데이터가 있는 특정 서버의 디렉토리/주소를 기반으로 데이터를 찾아야 하며 해당 서버가 다운되면 데이터에 액세스할 수 없습니다. ipfs는 암호화 해시를 생성하여 이 모든 것을 해결하고 데이터 주소를 여러 노드에 복사하므로 서버 충돌의 영향을 받지 않습니다. 또한 ipfs 서버는 http 서버에 비해 무료입니다.

React js를 사용하여 ipfs에 이미지를 업로드하는 dapp 구축

분산형 앱은 이미지를 ipfs 서버에 업로드합니다. 요구 사항: react Js에 대한 기본 지식

우리는 truffle unbox 패키지를 사용할 것입니다. 블록체인 서버에서 호스팅하거나 스마트 계약을 사용하지 않기 때문에 ganache 또는 로컬 블록체인을 다운로드할 필요가 없을 수 있습니다.

npm install -g truffle
truffle unbox react
npm install ipfs-http-client

이것은 당신의 작업을 위한 web3 dapp 상용구를 설정하고, 브라우저에서 메타마스크 플러그인에 연결되는 dapp을 자동으로 설정합니다.

cd client && npm run start

그런 다음 src로 이동하여 app.js를 다음으로 재구성합니다.

import React, { useState } from "react";
import { create } from "ipfs-http-client";

const App = () =>{
  return(
  <div className="App">
My dapp
  </div>
  )
}

이 작업을 완료하면 npm run start를 사용하여 프로그램을 시작할 수 있으며 연결을 시작합니다.

    import React, { useState } from "react";

    const App = () =>{
  return(

  <div className="App">
                 <form>  
     <input type="file"/> //This  button collects the image for upload         
    <button type="submit">Submit</button>//Submit collected image to ipfs
        </form>

  </div>
  )
}

가장 먼저 필요한 것은 파일 입력과 제출 버튼입니다.

다음은 업로드를 위한 기능을 빌드해야 한다는 것입니다. fileCapture는 <input type="file"/>에서 데이터를 가져옵니다. reader는 Javascrip이 준비 상태를 얻기 위해 onloadend 함수를 트리거한 후 파일의 내용을 읽는 데 도움이 됩니다.

import React, { useState } from "react";

const App = () => {
    const [file, captureFile] = useState(null); // state for file upload

    const fileCapture = (e) =>{
        const data = e.target.files[0];
        const reader = new window.FileReader();
        reader.readAsArrayBuffer(data) 

        reader.onloadend = () =>{
          captureFile(Buffer(reader.result))
        }

        e.preventDefault()
      }

return (
   <div className="App">
    <form>
        <input type="file" onChange={fileCapture} />
          <button type="submit">Submit</button>
     </form>

   </div>
)
}

여기에는 Infura, Pinata 및 Fleek과 같은 ipsf 게이트웨이를 사용하여 연결하여 ipfs에 이미지를 업로드하는 기능이 있지만 무료이고 읽기 및 쓰기 액세스를 제공하는 Infura를 사용할 것입니다.

URL에 추가할 경로 또는 해시를 반환하는 함수와 infura를 연결하는 데 사용되는 설치된 ipfs-http-client에서 가져오기를 만듭니다. 이 URL은 이미지를 표시하는 배열에 매핑됩니다.

import React, { useState } from "react";
import { create } from "ipfs-http-client";

const client = create("https://ipfs.infura.io:5001/api/v0");

const App = () => {
 const [url, setUrl] = useState([])

const handleSubmit = async (e) => {
        e.preventDefault();

        try{
          const created = await client.add(file);
          const url = `https://ipfs.infura.io/ipfs/${created.path}`;
          console.log(url)
          setUrl((nextUrl) => [nextUrl, url])
        }catch(error){
          console.log(error.message)
        }
      }

 return (
      <div className="App">
        <form onSubmit={handleSubmit}>
        <input type="file" onChange={fileCapture} />
          <button type="submit">Submit</button>
        </form>
     </div>
)
}

다음 단계는 UI에서 이미지를 다시 렌더링하는 것입니다. 이는 다음 코드를 사용하여 수행할 수 있습니다.

const App = () => {
return(
    <div className="App">
        <div className="display">
          {url.length !== 0 ? url.map((el) => <img src={el} alt={url} />)
          : <h3>Post Image to Ipfs</h3>}
        </div>
     </div>
)
}

전체 코드는 다음과 같습니다.

import React, { useState } from "react";
import { create } from "ipfs-http-client";


const client = create("https://ipfs.infura.io:5001/api/v0");

const App = () => {
    const [file, captureFile] = useState(null);
    const [url, setUrl] = useState([])

    const fileCapture = (e) =>{
        const data = e.target.files[0];
        const reader = new window.FileReader();
        reader.readAsArrayBuffer(data) 

        reader.onloadend = () =>{
          captureFile(Buffer(reader.result))
        }

        e.preventDefault()
      }


      const handleSubmit = async (e) => {
        e.preventDefault();

        try{
          const created = await client.add(file);
          const url = `https://ipfs.infura.io/ipfs/${created.path}`;
          console.log(url)
          setUrl((nextUrl) => [nextUrl, url])
        }catch(error){
          console.log(error.message)
        }
      }



    return (
      <div className="App"> 
                 <form onSubmit={handleSubmit}>  
     <input type="file" onChange={fileCapture} /> //This  button collects the image for upload         
    <button type="submit">Submit</button>//Submit collected image to ipfs
        </form>

        <div className="display">
          {url.length !== 0 ? url.map((el) => <img src={el} alt={url} />)
          : <h3>Post Image to Ipfs</h3>}
        </div>
      </div>
    );
}

export default App;

그런 다음 당신은 그것을 실행

npm run start

브라우저에 로드되고 사진을 업로드합니다. 이 방법으로 분산형 p2p 파일 관리 시스템을 사용했습니다.



IPFS에는 여러 가지 용도가 있으며 다양한 것을 구축할 수 있습니다. 댓글에서 피드백과 질문을 받고 싶습니다.