Pinata로 IPFS 사용해보기

시중에 IPFS 서비스를 제공하는 서비스가 여러 개 있는데 (Pinanta, Temporal, Eternum 등)

Pinata를 사용해서 리액트에서 이미지를 등록해보기로 하겠습니다.

 

 

Pinanta

Pinata | Your Home for NFT Media

 

 

Pinanta 가격표

여러 플랜이 있으나 저는 무료 플랜으로 시작하겠습니다.

로그인을 하면 위와 같이 피나타 홈페이지에서도 이미지를 등록할 수 있습니다. 

 

파란 Upload 버튼을 클릭후 한번 이미지를 업로드해보겠습니다.

 

업로드 후 파일 내역이 업데이트되고 이름을 클릭하면 이미지를 확인할 수 있습니다.

 

이제 리액트에서 API를 이용해 파일을 업로드해보겠습니다.

 

먼저 API Key를 생성합니다.

Admin을 체크하고 생성해줍니다.

 

생성된 키를 메모장이나 다른 곳에 적어두신 후 리액트로 돌아갑니다.

 

API 요청을 주고받기 위해 axios를 설치합니다.

npm install --save axios

 

정상적으로 연결이 잘 되는지 테스트 엔드포인트로 요청을 보내 응답으로 200을 받는지 확인해보겠습니다.

 

 axios.get("https://api.pinata.cloud/data/testAuthentication", {
      headers: {
        "Authorization": "Bearer JWT_TOKEN"
      }
    })

헤더 Authorization에는 아까 발급받은 JWT 토큰 앞에 "Bearer " (공백 필수)를 포함해서 입력하시면 됩니다.

응답

알맞게 입력했다면 응답으로 200과 메시지로 축하한다는 메시지를 받게 됩니다.

 

이제 리액트에서 파일을 업로드하기 위해 폼을 작성하겠습니다.

 

 <div>
      <form onSubmit={upload_image_to_ipfs}>
        <input type="file" onChange={(e) => setImg(e.target.files[0])} required />
        <button type='submit'>upload</button>
      </form>
    </div>

const [img, setImg] = useState(null);

const upload_image_to_ipfs = async (e) => {
    e.preventDefault();
    if(img) {
      const formData = new FormData();
      formData.append("file", img);
      
      const response = await axios({
        method: "post",
        url:'https://api.pinata.cloud/pinning/pinFileToIPFS',
        headers: {
          "Content-Type": "multipart/form-data",
          "Authorization": "Bearer JWT_TOKEN"
        },
        data: formData
      });

      console.log(response);
      
    }
  }

 

다음과 같이 작성 후 이미지를 업로드해보겠습니다.

응답이 위와 같이 오면 정상적으로 업로드된것입니다. 

ipfsHash를 복사한 후 

 

다시 pinata의 마이페이지로 돌아가면 파일이 정상적으로 업로드 된 것을 확인할 수 있습니다.

 

피나타 공식문서