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

Недавно я познакомился с сервисом 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!

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