Бесшовная доставка изображений с помощью Airtable, Vercel и Cloudflare Images

Как инженеры, мы всегда ищем способы оптимизировать наши рабочие процессы и упростить их. Одна из проблем, возникающих при работе с Airtable, — это проблема обновления типа вложений, особенно в том, что Airtable меняет url вложений каждые два часа. Представьте, что вы используете Next.js и статическую генерацию сайтов, тогда вы можете столкнуться с проблемой нерабочих изображений. Кроме того, даже если вы не используете статическую генерацию сайтов, вы можете превысить лимиты оптимизации изображений Vercel, поскольку url будет часто меняться. В этой статье я расскажу, как мы успешно решили эту проблему, перенеся наши вложения с Airtable на Cloudflare Images, сохранив методы оптимизации изображений Next.js и оптимизировав расходы с помощью Vercel.

Понимание проблемы обновления вложений Airtable

Airtable — это фантастический инструмент для управления данными, включая вложения, такие как изображения и документы. Однако есть одно ограничение — тип поля вложений обновляется каждые два часа. Это может быть проблематично, особенно в приложениях, где происходят статические генерации или инкрементные статические регенерации. Чтобы эффективно решить эту проблему, нам потребовалось решение, которое обеспечивало бы статические ссылки на изображения без ущерба для производительности.

Переход на изображения Cloudflare

Чтобы обойти проблему обновления вложений в Airtable, мы решили перенести все наши вложения на Cloudflare Images. Cloudflare Images предлагает надежную сеть доставки контента (CDN) с возможностью мгновенной очистки кэша. Храня наши вложения в Cloudflare, мы могли гарантировать, что URL-адреса останутся статичными, а любые обновления будут отражаться немедленно, без каких-либо задержек в кэше.

Стратегический подход к процессу перехода

Стремясь решить проблему обновления вложений в Airtable, мы применили стратегический подход, чтобы плавно перевести наши вложения на изображения Cloudflare, сохранив при этом целостность данных и оптимизировав производительность. Вот как мы выполнили процесс переноса:

• Получение изображений из Airtable

Мы начали с получения всех изображений, хранящихся в Airtable, используя его API. Это позволило нам получить полный набор данных вложений, готовых к перемещению.

• Использование библиотеки изображений Cloudflare

Чтобы упростить процесс перехода, сначала мы пытались использовать API Cloudflare. Но некоторых функций не хватало (удаление дубликатов и удаление нескольких изображений), поэтому мы создали и опубликовали соответствующую обертку. Библиотека npm cloudflare-images-client. Эта библиотека предоставила нам необходимые инструменты и функциональные возможности для беспрепятственной загрузки всех изображений в инфраструктуру хранения Cloudflare. Кроме того, эта библиотека дает возможность удалять несколько изображений и при необходимости удалять дубликаты.

• Сопоставление метаданных с записями Airtable

В процессе переноса мы прикрепили метаданные к каждому изображению в Cloudflare Images, включая идентификатор записи из Airtable. Это стратегическое решение позволило нам поддерживать связь 1-1 между изображениями, хранящимися в Cloudflare, и соответствующими им записями в Airtable. Таким образом, мы обеспечили сохранение целостности данных на протяжении всего процесса переноса. Это стратегическое сопоставление позволило нам легко связать изображения с соответствующими записями, что облегчило поиск и обновление данных в будущем.

Пример скрипта переноса

import { CloudflareImagesClient } from “cloudflare-images-client”;

const cloudflareImagesClient = new CloudflareImagesClient({
  accountId: process.env.CLOUDFLARE_ACCOUNT_ID || “”,
  apiToken: process.env.CLOUDFLARE_API_TOKEN || “”,
});

async function migrateImages() {
  await cloudflareImagesClient.deleteDuplicateImages();

  const airtableImages = await findImages();

  for (const image of airtableImages) {
    const response = await cloudflareImagesClient.uploadImageFromUrl({
      url: image?.image?.[0]?.url,
      metadata: {
        uniqueImageId: image.uniqueImageId,
        recordId: image.recordId,
      },
    });

    const CDNimageUrl = response?.result?.variants?.[0];

    await getTable(“airtableImages”).update([
      {
        id: image.recordId,
        fields: {
          cloudflareImage: CDNimageUrl,
        },
      },
    ]);

  }
}

Оптимизация издержек с помощью Vercel

Хотя Cloudflare Images обеспечивал статические url для наших изображений, мы также хотели оптимизировать издержки, связанные с оптимизацией изображений. Vercel, выбранная нами платформа развертывания, предлагает услуги по оптимизации изображений в рамках своей модели тарификации. Однако, используя Cloudflare Images для хранения и доставки, мы смогли избежать дополнительных расходов на ненужные новые адреса при частых новых сборках и развертываниях, что в конечном итоге позволило сэкономить на стоимости хостинга.

Заключение

Перенеся вложения из Airtable в Cloudflare Images и сохранив возможности Next.js для оптимизации изображений, мы успешно решили проблему обновления вложений, оптимизировав расходы на Vercel. Такой подход обеспечил эффективную доставку статического контента без лишних затрат.

Разработчики, столкнувшиеся с аналогичными проблемами при работе с вложениями Airtable, могут рассмотреть такие альтернативы, как Cloudflare Images API, и интегрировать их с такими платформами, как Next.js и Vercel. Применяя инновационные решения и используя возможности современных веб-технологий, вы сможете преодолеть трудности и обеспечить уникальный пользовательский опыт.

Благодарю за прочтение!