IPFS에 데이터 올리는 방법

목표 : Filecoin을 통해 저장되는 형태로 IPFS에 NFT메타데이터 올리기

1. NFT.storage

https://nft.storage/docs/#using-the-javascript-api

NFT storage는 javascript 예제가 있었으나 mjs 파일로 되어 있었다.

mjs 파일을 처음들어서 살펴보니 ECMAS를 사용하는 경우 명시하는 파일 같았다.

NFT storage 모듈 자체에서 mjs를 가져와서 사용하도록 되어 있기 때문에 node.js와 mjs만 써서 실행을 했을 때는 성공을 했지만 express를 써서 했을 때는 실패를하였다.

https://ui.toast.com/weekly-pick/ko_20190805

Node.js로 ECMAScript 모듈을 사용하는 방법

// Import the NFTStorage class and File constructor from the 'nft.storage' package
import { NFTStorage, File } from 'nft.storage'

// The 'mime' npm package helps us set the correct file type on our File objects
import mime from 'mime'

// The 'fs' builtin module on Node.js provides access to the file system
import fs from 'fs'

// The 'path' module provides helpers for manipulating filesystem paths
import path from 'path'

// Paste your NFT.Storage API key into the quotes:
const NFT_STORAGE_KEY = process.env.NFTSTORE_APIKEY;

/**
  * Reads an image file from `imagePath` and stores an NFT with the given name and description.
  * @param {string} imagePath the path to an image file
  * @param {string} name a name for the NFT
  * @param {string} description a text description for the NFT
  */
export async function storeNFT(imageName, name, description) {
    //imagedirectoryName
    const __dirname = path.dirname(new URL(import.meta.url).pathname);
    console.log("__dirname >>", __dirname);
    // load the file from disk
    const image = await fileFromPath(`${__dirname}/../../../../data/articles/${imageName}`)

    // create a new NFTStorage client using our API key
    const nftstorage = new NFTStorage.NFTStorage({ token: NFT_STORAGE_KEY })
    const response = await nftstorage.store({
      image,
      name,
      description,
    })
    console.log("response is >>", response);
    // call client.store, passing in the image & metadata
    return response
}

/**
  * A helper to read a file from a location on disk and return a File object.
  * Note that this reads the entire file into memory and should not be used for
  * very large files. 
  * @param {string} filePath the path to a file to store
  * @returns {File} a File object containing the file content
  */
async function fileFromPath(filePath) {
    const content = await fs.promises.readFile(filePath)
    const type = mime.getType(filePath)
    return new nftstorage.File([content], path.basename(filePath), { type })
}

해당 경우 예제를 거의 똑같이 사용한 것인데 다음과 같이 작성하면 된다. 해당 예제의 경우 아마 프론트에서 사용하면 잘 될것 같다.

2. Web3.strorage

https://web3.storage/

js 파일이 지원되는 예제를 찾다가 2번째 방안을 찾았다.

사이트에 예제가 나와있어서 바로 시도하기 좋았다. 근데 여기도 mjs를 써서 node.js에 쓰려면 express 대신 아래처럼 직접 커스터마이징 해서 써야 한다.

https://github.com/mondyfy/ipfsupload/tree/main

GitHub - mondyfy/ipfsupload: IPFS upload in NodeJs

3. 직접 구현하기

결국 다른 api가 나와있는 현 상황에서 exrpess를 써서 하는 방식은 직접 구현하는 방법 뿐이다.

예제도 한번 찾아봤다.

https://github.com/gatij10/ipfs-server-setup/blob/master/app.js

접근은 infrua의 엔드 포인트를 써서 한다.

https://app.infura.io/

Ethereum API | IPFS API & Gateway | ETH Nodes as a Service | Infura

이건 신용카드 정보를 등록해야 한다. 5GB까지는 무료라고 한다.

보아하니 ipfs-api 라는 모듈이 있는것 같다.

https://lbm93.tistory.com/21

IPFS 사용법 (nodejs, Ubuntu)

이건 근데 deprecated 되었다고 하고

https://www.npmjs.com/package/ipfs-http-client

ipfs-http-client

ipfs-http-client가 최신이라고한다.

https://github.com/ysheokorea/IPFS-Node.js

GitHub - ysheokorea/IPFS-Node.js

해당 모듈을 사용한 예제도 발견하였다.

import { path } from '../../app';

const ipfsClient = require('ipfs-http-client');
const projectId = process.env.INFURA_ID;
const projectSecret = process.env.INFURA_SECRET_KEY;
const auth =
    'Basic' + Buffer.from(projectId + ':' + projectSecret).toString('base64');
const client = ipfsClient.create({
    host: 'ipfs.infura.io',
    port: 5001,
    protocol: 'https',
    headers: {
        authorization: auth,
    },
});
const __dirname = path.dirname(new URL(import.meta.url).pathname);
const file = await ipfs.add(urlSource(__dirname))


client.add('testing').then((res) => {
  console.log(res);
});

이런식으로 사용을 하면 파일을 올릴 수 있다.

다만 해당 모듈도 ECMAS 환경이 있다보니 예전 버전으로 쓰는것이 좋다고 한다.

 

기타

해당링크에 여러 지원되는 서비스들을 볼 수 있다.

https://ecosystem-wg.notion.site/Getting-Started-With-IPFS-Filecoin-c00526cf97ba4087ba5c3ad5f5337a58

Getting Started With IPFS & Filecoin

https://estuary.tech/

Estuary

const https = require("https");
const fs = require("fs");
const FormData = require("form-data");
const fetch = require("node-fetch");

const key = `YOUR_API_KEY`;

var form = new FormData();
const path = `${__dirname}/YOUR_FILE_ON_YOUR_COMPUTER.mp4`;
form.append("data", fs.createReadStream(path));

const headers = form.getHeaders();
console.log(headers);

fetch("https://upload.estuary.tech/content/add", {
  method: "POST",
  body: form,
  headers: {
    Authorization: `Bearer ${key}`,
    ...headers,
  },
})
  .then(function(res) {
    return res.json();
  })
  .then(function(json) {
    console.log(json);
  });