Недавно я познакомился с сервисом Strapi и почти сразу получил задачу "Настроить отправку файлов в S3 из Strapi". Это мой первый опыт в работе со Strapi, но не первое подключение к S3.

В данной записи я хотел бы поделиться своим опытом и показать пару кастомных скриптов для работы с облачным хранилищу S3.

Коротко о Strapi

Strapi JS — это популярная открытая система управления контентом (CMS) на основе Node.js. Она предназначена для быстрого создания и управления бэкенд-серверами и API. Strapi обеспечивает гибкость в разработке благодаря своей модульной архитектуре и возможностям кастомизации.

Чуть короче обо мне

Я Backend разработчик, который до текущего момент работал в основном с PHP и в редких случаях с JS (в основном с вёрсткой). Есть опыт работы с различными API и немного понимаю в настройке серверов.

Это я к тому, что я в данной записи постараюсь всё расписать со стороны дилетанта в области Node.js, поэтому прошу строго не судить!

Начнём настройку подключения к S3

Для начала нам конечно нужно получить доступы к облачному хранилищу S3, а именно:

accessKeyId - это публичный ключ (аналог логина), предоставляемый провайдером облака. Он используется для идентификации пользователя или приложения, которое обращается к хранилищу.
secretAccessKey - это приватный ключ (аналог пароля), который используется совместно с accessKeyId для аутентификации запросов. Его нельзя разглашать, так как он предоставляет полный доступ к ресурсам.
region - определяет регион (географическое расположение) хранилища.
endpoint - указывает URL для доступа к S3-совместимому хранилищу.
bucket - Название S3-бакета, с которым вы работаете. Бакет — это контейнер для хранения объектов (файлов, данных).

Все эти доступы вам должен предоставить ваш провайдер.

Далее вам нужно установить npm модуль для работы с облачными хранилищами S3. Существует большое количество публичных модулей, я лично остановился на strapi/provider-upload-aws-s3.

Для установки модуля, переходим в проект и запускаем команду в консоли.

npm install @strapi/provider-upload-aws-s3

Вторым этапом необходимо изменить конфигурацию Strapi и добавить в неё параметры подключения к облачному хранилищу.

Для удобства, я рекомендую занести доступы в .env файл.

...
S3_ACCESS_KEY_ID="accessKeyId"
S3_SECRET_ACCESS_KEY="secretAccessKey"
S3_ENDPOINT_URL="endpoint"
S3_REGION='region'
S3_BUCKET_NAME='test_bucket'
...

Теперь переходим в /config/plugins.js и прописываем в него следующий код.

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: '@strapi/provider-upload-aws-s3',
      providerOptions: {
        credentials: {
          accessKeyId: env('S3_ACCESS_KEY_ID'),
          secretAccessKey: env('S3_SECRET_ACCESS_KEY'),
        },
        region: env('S3_REGION'),
        endpoint: env('S3_ENDPOINT_URL'),
        params: {
          Bucket: env('S3_BUCKET_NAME'),
        },
      },
    },
  }
});

Теперь необходимо перезагрузить проект и проверить подключение через раздел "Медиа-библиотека", отправив пару файлов.

Решения для типичных ошибок

Туториал конечно простой, но для достижения цели мне пришлось изрядно покапаться и в процессе я написал несколько полезных скриптов, которые могут вам пригодиться.

Не отображаются превью картинки в "Медиа-библиотеке"

Если перейдя в "Медиа-библиотеку" изображения помечаются как "не найденные", а по факту файлы загрузились, то вам необходимо внести правки в config/middlewares.js для добавления источника.

module.exports = ({ env }) => (
  [
    "strapi::logger",
    "strapi::errors",
    "strapi::cors",
    "strapi::poweredBy",
    "strapi::query",
    "strapi::body",
    "strapi::session",
    "strapi::favicon",
    "strapi::public",
    {
      name: 'strapi::security',
      config: {
        contentSecurityPolicy: {
          useDefaults: true,
          directives: {
            'connect-src': ["'self'", 'https:'],
            'img-src': [
              "'self'",
              'data:',
              'blob:',
              'market-assets.strapi.io',
              'https://'+env('S3_BUCKET_NAME')+'.obs.'+env('S3_REGION')+'.hc.sbercloud.ru',
            ],
            'media-src': [
              "'self'",
              'data:',
              'blob:',
              'market-assets.strapi.io',
              'https://'+env('S3_BUCKET_NAME')+'.obs.'+env('S3_REGION')+'.hc.sbercloud.ru',
            ],
            upgradeInsecureRequests: null,
          },
        },
      },
    }
  ]
);

Формирование домена в вашем случае может отличаться от моего. Данную информацию вы можете посмотреть получив полный путь к любому файлу, добавленному в ваше облачное хранилище.

Тестирования соединения с S3

К сожалению, модуль strapi/provider-upload-aws-s3 поддерживает подключение к S3, только из системы Strapi и не позволяет писать кастомные скрипты.

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

Для тестирования работы подключения к S3 можно использовать дополнительный модуль aws-sdk. С помощью данного модуля вы можете проверить подключение и корректность отправки файлов.

Для установки пропишите команду:

npm install aws-sdk

Проверка подключения к S3

Немного кастыльный метод, но к счастью рабочий - проверка подключения через кастомный скрипт.

Для этого, в корне проекта создайте файл test-s3-connection.js и занесите в него следующий код:

// Подключение переменных окружения из .env
require('dotenv').config();

const AWS = require('aws-sdk');

// Настройка клиента S3
const s3 = new AWS.S3({
  accessKeyId: process.env.S3_ACCESS_KEY_ID,
  secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  endpoint: process.env.S3_ENDPOINT_URL,
  s3ForcePathStyle: true, // Использовать путь стиля для S3-совместимых хранилищ
  signatureVersion: 'v4',
});

// Функция для проверки подключения
s3.listBuckets((err, data) => {
  if (err) {
    console.error('Ошибка подключения к S3:', err.message);
    console.error('Подробности:', err);
  } else {
    console.log('Подключение к S3 успешно.');
    console.log('Список bucket-ов:', data.Buckets);
  }
});

Для запуска скрипта, пропишите следующий код в консоли:

node test-s3-connection.js

Если подключение будет успешным, то вы увидите список bucket-ов.

Проверка загрузки файлов

Для проверки загрузки файлов можно использовать кастомный скрипт, который я назвал test-s3-upload.js:

// Подключение переменных окружения из .env
require('dotenv').config();

const AWS = require('aws-sdk');
const fs = require('fs');

// Настройки S3
const s3 = new AWS.S3({
  accessKeyId: process.env.S3_ACCESS_KEY_ID,
  secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
  endpoint: process.env.S3_ENDPOINT_URL,
  s3ForcePathStyle: true, // Использовать путь стиля для S3-совместимых хранилищ
  signatureVersion: 'v4',
});

// Имя bucket
const bucketName = 'bucket-name'; // Замените на имя вашего bucket

// Тестовый файл для загрузки
const fileName = 'test-file.txt';

// Создание тестового файла
fs.writeFileSync(fileName, 'Hello, S3! This is a test file.');

// Параметры загрузки
const uploadParams = {
  Bucket: bucketName,
  Key: fileName,
  Body: fs.createReadStream(fileName),
  ContentType: 'text/plain',
};

// Загрузка файла
s3.upload(uploadParams, (err, data) => {
  if (err) {
    console.error('Ошибка загрузки:', err);
  } else {
    console.log('Файл успешно загружен:', data.Location);
  }

  // Удаление локального тестового файла
  fs.unlinkSync(fileName);
});

Для запуска скрипта, пропишите следующий код в консоли:

node test-s3-upload.js

Таким образом вы можете отследить ошибки, если такие имеются, а также можете использовать данные скрипты для автоматического тестирования.

Вот так я настраивал подключение к S3 в Strapi!

Спасибо за внимание!

Как я настраивал S3 в Strapi? Больно, но не сильно