(Infura.io) `전용` 게이트웨이를 사용하여 IPFS에 이미지를 업로드하는 방법 ⛓️

Infura.io 공개 게이트웨이를 통해 IPFS에 업로드하는 동안 이전에 이 오류가 발생한 적이 있습니까?



이 오류는 단순히 8월 10일 이후 공개 API 게이트웨이의 사용 중단으로 인해 발생합니다.



이 자습서에서는 업로드하는 동안 이전 공용 API에서 전용 API로의 마이그레이션을 처리합니다.

1. Infura.io에서 새 계정 생성

계정을 생성한 후 내부에서 프로젝트를 생성하려면 활성 신용 카드를 추가해야 합니다infura.io.

NOTE: The core plan will be fair enough for you as a developer and nothing will be deducted from your bank account.

2. 새 프로젝트 만들기

새 프로젝트를 생성하는 동안 프로젝트에 대해 network를 선택하라는 메시지가 표시됩니다. 이 경우 IPFS를 선택하십시오. 그런 다음 프로젝트 이름을 선택합니다.



그러면 프로젝트 세부 정보로 리디렉션됩니다. 우리는 각 섹션을 함께 논의할 것입니다.

프로젝트 요약
이 섹션에는 Project ID 및 API Secret key가 포함됩니다.
이 기사에서 사용할 subdomain 부분을 기억하십시오.



전용 게이트웨이
이 섹션을 활성화한 다음 파일을 저장한 링크가 될 고유한 하위 도메인을 입력해야 합니다.



할당량
이 섹션은 이 특정 프로젝트에 대한 한도를 설정하는 데 매우 중요하며 MAX LIMIT를 얻지 않고 Infura.io에서 요금을 청구하는 데 도움이 됩니다. 핵심 계획의 MAX LIMIT는 5 GB입니다.



이제 프로젝트 생성이 끝났습니다.

3. 코드에서 파일 업로드.

보안상의 이유로 .env 및 Project ID를 저장할 API Secret key 파일을 만들어야 합니다.
내 경우에는 Next.js 프로젝트에서 작업 중이므로 파일 이름을 .env.local로 지정하고 환경 변수 접두사를 NEXT_PUBLIC_로 지정했습니다.



그런 다음 코드에서 이 명령을 실행하여 ipfs-http-client를 설치해야 합니다.
npm install --save ipfs-http-client
그런 다음 공용 게이트웨이에 대해 이 작업을 수행하는 대신 ↓.

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

이 코드 ↓를 작성할 것입니다.

import { create as ipfsHttpClient } from 'ipfs-http-client';

const projectId = process.env.NEXT_PUBLIC_IPFS_PROJECT_ID;
const projectSecret = process.env.NEXT_PUBLIC_API_KEY_SECRET;
const auth = `Basic ${Buffer.from(`${projectId}:${projectSecret}`).toString('base64')}`;

const client = ipfsHttpClient({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https',
  headers: {
    authorization: auth,
  },
});

infura의 문서에서 말한 대로 진행한 이 코드에 실망하지 마십시오. See the docs for more infoI used proccess.env for accessing environment variables without making them exposed to the code due to security reasons.
그런 다음 ↓ 파일을 업로드하기 위해 생성한 client 변수를 사용합니다.

const uploadToIPFS = async (file) => {
   const subdomain = 'https://an-nft-marketplace.infura-ipfs.io';
   try {
    const added = await client.add({ content: file });
    const URL = `${subdomain}/ipfs/${added.path}`;
    return URL;
  } catch (error) {
    console.log('Error uploading file to IPFS.');
  }
};

subdomain 변수가 이전에 상단의 Dedicated gateways 섹션에서 만든 동일한 하위 도메인과 같아야 합니다.


그리고 그게 다야 !! 이제 파일을 IPFS에 업로드했으며 이제 URL 변수를 통해 액세스할 수 있습니다.

이 문제가 저를 너무 괴롭혔기 때문에 이 기사가 이 문제를 해결하는 데 도움이 되었기를 바랍니다. 🤍