Как загружать изображения в IPFS с помощью (Infura.io) `выделенных` шлюзов ⛓️

Сталкивались ли вы с этой ошибкой при загрузке изображений в IPFS через публичный шлюз Infura.io?

Эта ошибка возникает из-за того, что с 10 августа публичный API, шлюз устарел.

В этом руководстве мы рассмотрим миграцию со старого публичного API на специальный API при загрузке.

Содержание

1. Создайте новый аккаунт в Infura.io
2. Создайте новый проект
3. Загрузка файла из кода.

1. Создайте новый аккаунт в Infura.io

После создания аккаунта вы должны добавить активную кредитную карту, чтобы иметь возможность создавать проекты внутри infura.io.

ПРИМЕЧАНИЕ: План core будет достаточно справедливым для вас как для разработчика, и с вашего банковского счета ничего не будет списываться.

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. См. документацию для получения дополнительной информации

Затем мы будем использовать переменную 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.

Надеюсь, эта статья помогла вам справиться с этой проблемой, потому что меня она тоже беспокоила. 🤍