Привет, я некоторое время работаю над своим пет проектом, где в основном занимаюсь фронтом, а для данных использую headless CMS под названием strapi.io. В какой-то момент у меня появилась потребность вынести медиа хранилище из локальной папки в облако. А так-как основной проект уже находился долгое время на серверах Selectel, я решил воспользоваться их объектным хранилищем и подключится к нему с помощью плагина “@strapi/provider-upload-aws-s3“. И в этой статье я вам опишу краткий гайд как это сделать.
Для начала у вас уже должно быть strapi приложение, версии приближенной к 4.20.0, и аккаунт в Selectel. Открываем личный кабинет, ищем в сайдбаре раздел “Облачные услуги” и открываем вкладку “Объектное хранилище”. Кликаем кнопку “Создать контейнер” и видим следующий интерфейс.
Напишите имя, оно станет названием контейнера для s3, так что рекомендую использоваться только английские буквы и тире. Тип - публичный, ибо изображения будут доступны на сайте. И адресация - галочка на Virtual-Hosted, ниже пояснение из доки плагина.
AWS SDK V3 adopts the virtual-hosted–style URI format for S3 URLs. This format is recommended by AWS and is likely to become required in the near future, as the path-style URI is being deprecated. More details on this format can be found in the AWS User Guide.
Далее отправляемся в “Профиль и настройки”, там ищем вкладку "Управление пользователями” и нажимаем кнопку “Добавить пользователя”.
Переключаем тип на “Сервисный пользователь”, выбираем роль “Пользователь объектного хранилища” и указываем проект в котором мы создали контейнер. Добавляем пользователя и заходим в него, листаем до заголовка “S3 ключи”, нажимаем “Добавить ключ”, снова выбираем проект и генерируем Access key и Secret key.
Чтобы не потерять ключи, предлагаю сразу их добавить в переменную окружения.
# .env
AWS_ENDPOINT=https://s3.storage.selcloud.ru
AWS_REGION=ru-1
AWS_ACCESS_KEY_ID=<Access key>
AWS_ACCESS_SECRET=<Secret key>
AWS_BUCKET=<Название контейнера>В проект strapi устанавливаем “@strapi/provider-upload-aws-s3“, добавляем конфигурацию провайдера.
// path: ./config/plugins.ts
export default ({ env }) => ({
upload: {
config: {
provider: "aws-s3",
providerOptions: {
s3Options: {
endpoint: env("AWS_ENDPOINT"),
credentials: {
accessKeyId: env("AWS_ACCESS_KEY_ID"),
secretAccessKey: env("AWS_ACCESS_SECRET"),
},
params: {
Bucket: env("AWS_BUCKET"),
},
},
},
},
},
})Возвращаемся в Selectel, нам осталось выдать новому пользователю права на доступ к конкретному контейнеру. Переходим в нашем контейнере, во вкладку “Политика доступа” и нажимаем “Создать политику доступа”.
Пользователи - выбираем авторизованные и находим нового сервисного пользователя, набор действий - редактор. И добавим еще одно правило, для авторизованного пользователя панели со всеми доступными действиями, чтобы мы могли управлять контейнером из личного кабинета Selectel.
Нажимаем “Сохранить” и возвращаемся в интерфейс Strapi, чтобы протестировать загрузку.
Загрузка работает, но изображение не отображается, и над этим вопросом я долго ломал голову, но после крупного обновления личного кабинета Selectel решение нашлось очень быстро. В самом начале мы указали тип контейнера - публичный, и соответственно во вкладке “Домены” мы находим публичный домен для доступа к загруженным файлам. Добавляем его в файл окружения и прописываем в конфиге провайдера.
# .env
CDN_URL=<Публичный домен контейнера>// path: ./config/plugins.ts
provider: "aws-s3",
providerOptions: {
baseUrl: env("CDN_URL"),
s3Options: {
...А так же нам нужно подправить конфигурацию Content Security Policy (CSP), пример взят из доки провайдера.
// path: ./config/middlewares.ts
export default ({ env }) => [
...
{
name: "strapi::security",
config: {
contentSecurityPolicy: {
useDefaults: true,
directives: {
"connect-src": ["'self'", "https:"],
"img-src": [
"'self'",
"data:",
"blob:",
"https://strapi.io",
"https://market-assets.strapi.io",
env("CDN_URL"),
],
"media-src": [
"'self'",
"data:",
"blob:",
"https://strapi.io",
"https://market-assets.strapi.io",
env("CDN_URL"),
],
upgradeInsecureRequests: null,
},
},
},
},
...Удаляем тестовое изображение и загружаем заново. Теперь все работает.
Вместо публичного домена Selectel так же предлагает подключить свой собственный или воспользоваться услугой CDN. Но в этой статье на этом все. До встречи!
