Как настроить плагин Amazon S3 Upload Provider для вашего приложения Strapi App

В этом руководстве вы настроите плагин Amazon S3 Upload Provider Plugin для вашего приложения Strapi App для работы с ведрохранилищем Amazon S3.

Автор: Марк Муньяка

В этом руководстве я покажу вам, как настроить плагин Amazon S3 Upload Provider Plugin для вашего приложения Strapi App. Сначала вы установите и настроите ведро хранения S3 для вашего приложения. Затем вы создадите приложение Strapi App, используя один из стартеров, предоставленных командой Strapi Team. Затем вы установите и настроите плагин Amazon S3 Upload Provider Plugin. Наконец, вы протестируете плагин, загрузив несколько изображений в бэкенд Strapi. К концу этого урока вы сможете использовать плагин Amazon S3 Upload Provider Plugin в любом проекте Strapi.

Содержание

Что такое Strapi?
Что такое Amazon S3?
Предварительные условия
Аппаратные предпосылки
Дополнительные условия
Настройка Strapi
Установите плагин ‘@strapi/provider-upload-aws-s3’.
Настройте плагин
Настройка AWS
Создайте учетную запись AWS
Создание пользователя и группы администратора IAM Admin
Создание пользователя IAM для вашего приложения Strapi App
Настройка разрешений для Amazon S3
Добавить теги
Получение учетных данных ‘ID ключа доступа’ и ‘Секретный ключ доступа’
Создайте ведро хранения Amazon S3
Тестирование демонстрационного приложения
Обновление бэкенда Strapi
Загрузка изображения
Удаление изображения
Заключение
Что дальше?

Что такое Strapi?

Strapi — это ведущая система управления контентом (CMS) с открытым исходным кодом без головы. Она на 100% состоит из Javascript, основана на Node.js и используется для создания RESTful API и GraphQL.

Strapi позволяет разработчикам быстрее создавать проекты, предоставляя настраиваемый API из коробки и давая им свободу использовать свои любимые инструменты. Контент-команды используют Strapi для автономного управления всеми типами контента и его распространения из одной CMS по любым каналам, будь то веб-сайты, мобильные приложения или подключенные устройства.

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

Иногда вам может понадобиться разместить медиафайлы вашего приложения в другом месте, нежели то, где размещено ваше приложение Strapi. Это полезно для экономии ресурсов хранения, памяти и вычислительных ресурсов. Кроме того, вы можете использовать облачные решения, такие как сети доставки контента (CDN) и облачные хранилища для более быстрой и надежной загрузки ваших медиа-активов.

Что такое Amazon S3?

Amazon AWS является крупнейшим облачным провайдером. Он предлагает Amazon S3 — облачную службу хранения, которую можно использовать для размещения медиа-активов. Amazon S3 является масштабируемым, надежным, безопасным и производительным. Команда Strapi Team создала плагин Amazon S3 Upload Provider Plugin, который поможет загрузить ваши медиа-активы в ведро хранения S3.

Предварительные условия

Чтобы следовать этому руководству, вам необходимо следующее:

A. Необходимые знания:

Javascript
Node.js
Shell (Bash)
Strapi, следуйте краткому руководству по началу работы, чтобы ознакомиться с Strapi.
Git

B. Программное обеспечение Необходимые условия:

Операционная система (поддерживается любая из следующих):
- Ubuntu >= 18.04 (LTS-Only)
- Debian >= 9.x
- CentOS/RHEL >= 8
- macOS Mojave или новее (ARM не поддерживается)
- Windows 10 или 11
- Docker — docker repoЯ использовал Ubuntu 20.04 LTS для этого руководства.
Node v14.x.x или v16.x.x

Нечетные версии Node не поддерживаются (например, v13, v15). Загрузите Node со страницы Download | Node.js. Я использовал Node v16.14.2.
npm или yarn

Я использовал npm v8.5.0. npm поставляется вместе с вашей установкой Node. Если вы предпочитаете yarn, установите его как пакет npm. Проверьте установку | Yarn.
Strapi v4.x.x

Я использовал Strapi v4.3.2. Вы установите Strapi с помощью npm или yarn.
Текстовый редактор по вашему выбору
Git для контроля версий [Загрузите Git со страницы Git — Downloads].
Git Bash (для пользователей Windows)

Git Bash поставляется вместе с загруженным Git’ом. В учебнике используются команды оболочки Unix. Git Bash может запускать команды оболочки UNIX в Windows.
Веб-браузер (любой браузер на базе Chromium)

Аппаратные предпосылки

Не менее 1 ядра процессора (настоятельно рекомендуется не менее 2)
Не менее 2 ГБ оперативной памяти (умеренно рекомендуется 4)
Минимальный объем дискового пространства, рекомендованный вашей ОС, или 32 ГБ свободного места.

Дополнительные условия

Вам также потребуется учетная запись AWS. Для его открытия требуется кредитная карта. AWS предлагает 12-месячную бесплатную пробную версию для тестирования ведра Amazon S3 с 5 ГБ бесплатного пространства.

Настройка Strapi

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

ПРИМЕЧАНИЕ: Если вы предпочитаете тестировать готовое приложение, вы можете клонировать репозиторий Github.

Мы будем использовать шаблон блога. Шаблон устанавливается с помощью npm.

Откройте терминал и перейдите в домашнюю папку.

    $ cd ~

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Создайте каталог для хранения вашего проекта, назовите его strapi-aws-s3.

    ~$ mkdir strapi-aws-s3

Войдите в полноэкранный режим Выйдите из полноэкранного режима

Измените каталог на только что созданный, strapi-aws-s3.

    ~$ cd strapi-aws-s3

Войти в полноэкранный режим Выход из полноэкранного режима

Включите контроль исходных текстов для вашего проекта, инициализировав git-репозиторий.

    ~/strapi-aws-s3 $ git init

Войти в полноэкранный режим Выйдите из полноэкранного режима

Создайте свое приложение Strapi, используя шаблон блога.

    ~/strapi-aws-s3 $ npx create-strapi-app backend --quickstart --template @strapi/template-blog@1.0.0 blog

    # OR

    ~/strapi-aws-s3 $ yarn create strapi-app backend --quickstart --template @strapi/template-blog@1.0.0 blog

Войти в полноэкранный режим Выход из полноэкранного режима

Эта команда создает ваше приложение Strapi в папке с именем backend. Флаг --quickstart устанавливает ваше приложение Strapi с базой данных SQLite. Флаг --template извлекает конкретный шаблон для установки в ваше приложение. В данном случае мы извлекли template-blog версии 1.0.0, размещенный strapi на GitHub.

Структура ваших папок в strapi-aws-s3 после установки Strapi должна выглядеть примерно так:

    ~/strapi-aws-s3 $ tree -L 2 -a
    .
    ├── backend
    │   ├── build
    │   ├── .cache
    │   ├── config
    │   ├── data
    │   ├── database
    │   ├── .editorconfig
    │   ├── .env
    │   ├── .env.example
    │   ├── .eslintignore
    │   ├── .eslintrc
    │   ├── favicon.ico
    │   ├── .gitignore
    │   ├── node_modules
    │   ├── package.json
    │   ├── public
    │   ├── README.md
    │   ├── src
    │   ├── .strapi-updater.json
    │   ├── .tmp
    │   └── yarn.lock
    ├── .git
    ├── LICENSE
    └── README.md

Войти в полноэкранный режим Выйти из полноэкранного режима

После установки ваше приложение должно запуститься автоматически. Посетите сайт http://localhost:1337/admin в браузере и зарегистрируйте свои данные в форме регистрации администратора Strapi.

ПРИМЕЧАНИЕ: Если Strapi не запустился автоматически, выполните следующие команды:

    ~/strapi-aws-s3 $ cd backend

    ~/strapi-aws-s3/backend $ npm run develop 
    # OR
    ~/strapi-aws-s3/backend $ yarn develop

Войти в полноэкранный режим Выйти из полноэкранного режима

npm run develop запускает сервер разработки вашего проекта Strapi в режиме watch. Изменение режима просмотра в вашем проекте Strapi вызовет перезапуск сервера.

Создание нового пользователя позволяет войти в Strapi Dashboard.

Шаблон блога для нашего проекта Strapi поставляется с предустановленными следующими компонентами:

Плагин Content-Type Builder
- 4 типа коллекции (Статья, Категория, Пользователь и Писатель)
- 2 одиночных типа (Глобальный и Домашняя страница)
- 2 компонента (Sections и Shared)
Плагин медиатеки
- 10 активов изображений
Плагин разрешений для пользователей (публичные роли)
- Разрешения для типов Collection и Single уже настроены так, чтобы разрешить доступ READ любому публичному пользователю, не прошедшему аутентификацию.

В левой части приборной панели Strapi перечислены менеджеры контента, содержащие ваши типы контента. В опции PLUGINS перечислены плагины, установленные в вашем проекте. Content-Type Builder Plugin и Media Library Plugin установлены по умолчанию в вашем приложении Strapi. Выберите Media Library, чтобы увидеть активы изображений, загруженные с шаблоном блога.

Плагин Media Library Plugin — это то, что вы будете использовать для загрузки изображений в ведро Amazon S3. Если плагин Amazon S3 Upload Provider Plugin работает, изображения, загруженные в медиатеку, должны появиться в вашем ведре S3 автоматически.

Установите плагин ‘@strapi/provider-upload-aws-s3’.

Остановите ваш сервер strapi, нажав Ctrl плюс C в терминале. Установите @strapi/provider-upload-aws-s3:

    ~/strapi-aws-s3/backend $ npm install @strapi/provider-upload-aws-s3 --save
    # OR
    ~/strapi-aws-s3/backend $ yarn add @strapi/provider-upload-aws-s3

Войдите в полноэкранный режим Выйти из полноэкранного режима

Настройте плагин

A. Конфигурация провайдера

Создайте файл с именем plugins.js в папке config.

    ~/strapi-aws-s3/backend $ touch config/plugins.js

Войдите в полноэкранный режим Выйти из полноэкранного режима

Добавьте этот код конфигурации в plugins.js:

    // ~/strapi-aws-s3/backend/config/plugins.js

    module.exports = ({ env }) => ({
      upload: {
        config: {
          provider: 'aws-s3',
          providerOptions: {
            accessKeyId: env('AWS_ACCESS_KEY_ID'),
            secretAccessKey: env('AWS_ACCESS_SECRET'),
            region: env('AWS_REGION'),
            params: {
              Bucket: env('AWS_BUCKET'),
            },
          },
          actionOptions: {
            upload: {},
            uploadStream: {},
            delete: {},
          },
        },
      },
    });

Войти в полноэкранный режим Выйти из полноэкранного режима

Это позволит плагину работать в вашем приложении. AWS_ACCESS_KEY_ID, AWS_ACCESS_SECRET, AWS_REGION и AWS_BUCKET являются переменными окружения. Позже вы присвоите их значения в файле .env для вашего проекта Strapi после настройки ведра Amazon S3.

B. Конфигурация промежуточного ПО безопасности
Из-за настроек по умолчанию в Strapi Security Middleware вам необходимо изменить параметры contentSecurityPolicy, чтобы правильно отображать предварительный просмотр миниатюр в медиатеке. Вам следует заменить строку strapi::security на объект ниже, как объясняется в документации по конфигурации промежуточного ПО.

Отредактируйте файл middlewares.js в папке config:

    // ~/strapi-aws-s3/backend/config/middlewares.js

    module.exports = [
      'strapi::errors',
      /* Replace 'strapi::security', with this snippet */
      /* Beginning of snippet */
      {
        name: 'strapi::security',
        config: {
          contentSecurityPolicy: {
            useDefaults: true,
            directives: {
              'connect-src': ["'self'", 'https:'],
              'img-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'yourBucketName.s3.yourRegion.amazonaws.com',
              ],
              'media-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'yourBucketName.s3.yourRegion.amazonaws.com',
              ],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      /* End of snippet */
      'strapi::cors',
      'strapi::poweredBy',
      'strapi::logger',
      'strapi::query',
      'strapi::body',
      'strapi::session',
      'strapi::favicon',
      'strapi::public',
    ];

Войти в полноэкранный режим Выйти из полноэкранного режима

Позже вы замените 'yourBucketName.s3.yourRegion.amazonaws.com' на ссылку на ваш S3 bucket. Обратитесь к разделу AWS S3 | Strapi Market для получения дополнительной информации о настройке плагина.

Настройка AWS

Следующим шагом будет настройка AWS как части нашего проекта.

Создайте учетную запись AWS

Зарегистрируйте учетную запись AWS на странице AWS Console — Signup, если у вас ее еще нет. Обратитесь к руководству по созданию и активации учетной записи AWS для получения дополнительной информации о процессе создания учетной записи AWS.

Создание пользователя и группы администратора IAM Admin

Лучшие практики использования служб AWS Amazon предписывают не использовать корневого пользователя учетной записи и вместо него использовать службу IAM (AWS Identity and Access Management). Поэтому ваш корневой пользователь используется только для очень небольшого количества избранных задач. Например, для выставления счетов вы создаете пользователя Administrator и группу для таких задач. Другие рутинные задачи также можно выполнять с помощью обычного пользователя IAM.

Следуйте руководству «Создание вашего первого пользователя и группы пользователей IAM — AWS Identity and Access Management», чтобы создать пользователя и группу пользователей IAM, используя вашу учетную запись AWS root в AWS Management Console.

Создание пользователя IAM для вашего приложения Strapi App

A. Задайте сведения о пользователе:

Выйдите из своей учетной записи root-пользователя и войдите в только что созданную учетную запись администратора.

Зайдите в консоль IAM, выбрав Services, затем All services, прокрутите вниз и выберите IAM или перейдите сюда, чтобы перейти в консоль IAM.

Нажмите на Пользователи в левом меню и выберите Добавить пользователя.

Укажите имя пользователя. Я использовал Strapi-Admin.
Тип доступа: Отметьте как Программный доступ, так и Доступ к консоли управленияAWS.
ВАРИАНТ: Для простоты снимите галочку с пункта Требовать сброса пароля.
Нажмите Следующее: Разрешения.

Настройка разрешений для Amazon S3

Выполните следующие шаги, чтобы настроить разрешения для Amazon S3.

Нажмите Создать группу и дайте ей имя. Затем выберите соответствующие политики в разделе Policy Name:
- Найдите s3 и отметьте AmazonS3FullAccess.
- Нажмите Создать группу.
Нажмите Добавить пользователя в группу и отметьте группу Developers, чтобы добавить нового пользователя.
Нажмите Следующее: Теги.

Нажмите Добавить пользователя в группу и отметьте группу Разработчики, чтобы добавить нового пользователя.

Добавить теги

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

Получение учетных данных ‘ID ключа доступа’ и ‘Секретный ключ доступа’

A. Обзор:
Просмотрите информацию и убедитесь в ее правильности. Используйте Previous, чтобы исправить что-либо. Если информация верна, нажмите Создать пользователя.

B. Запишите учетные данные, относящиеся к вашей учетной записи:
Если вы не выполните эти шаги, вам придется сбросить свои Идентификатор ключа доступа и Секретный ключ доступа позже.

Скачайте файл .csv и сохраните его в надежном месте. Он содержит имя пользователя, ссылку для входа, идентификатор ключа доступа и секретный ключ доступа.

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

Нажмите на ссылку AWS Management Console Access sign-in link. Это приведет к выходу из Administrator.

Для получения дополнительной информации ознакомьтесь со статьей Создание обычного пользователя для создания и управления вашим проектом Strapi.

Создайте ведро хранения Amazon S3

Войдите в вашу консоль управления AWS Management Console как новый пользователь, которого вы только что создали Strapi-Admin.

Перейдите в раздел Services, нажмите All services, прокрутите вниз и выберите S3 Scalable Storage in the Cloud, чтобы открыть Amazon S3 Console.

Нажмите на кнопку Создать ведро в консоли Amazon S3.

Дайте своему ведру уникальное имя. Я назвал свое ведро strapi-aws-s3-images-bucket. Выберите наиболее подходящий регион для вашего ведра.

Для параметра Владение объектом выберите ACLs enabled, чтобы разрешить доступ к ведру S3 из бэкенда Strapi. Выберите Bucket owner preferred, чтобы плагин работал.

В разделе Параметры блокировки публичного доступа для этого ведра сделайте следующее:

Снимите флажок Блокировать весь публичный доступ и установите разрешения следующим образом:
- Снимите флажок Блокировать публичный доступ к ведрам и объектам, предоставляемый через новые списки контроля доступа (ACL) (рекомендуется).
- Снимите флажок Блокировать публичный доступ к ведрам и объектам, предоставленным через любые списки контроля доступа (ACL).
- Установите флажок Блокировать публичный доступ к ведрам и объектам, предоставленный с помощью новых политик публичных ведер
- Установите флажок Блокировать публичный и кросс-аккаунт доступ к ведрам и объектам с помощью любых политик публичных ведер.
Установите флажок Я признаю, что текущие настройки могут привести к тому, что это ведро и объекты в нем станут публичными в соответствии с предупреждением Выключение блокировки всего публичного доступа может привести к тому, что это ведро и объекты в нем станут публичными.

Оставьте остальные настройки без изменений и нажмите кнопку Создать ведро. Теперь ваше новое ведро должно появиться в списке консоли Amazon S3 Console.

Тестирование демонстрационного приложения

Следующий этап заключается в тестировании демонстрационного приложения.

Обновление бэкенда Strapi

Обновите бэкенд Strapi, используя новые учетные данные из только что созданного ведра S3. Обновите .env следующим образом:

    /* ~/strapi-aws-s3/backend/.env */
    /* Add this after the last line */

    AWS_ACCESS_KEY_ID=<Access Key ID>
    AWS_ACCESS_SECRET=<Secret access key>
    AWS_REGION=eu-west-2
    AWS_BUCKET=strapi-aws-s3-images-bucket

Войти в полноэкранный режим Выйти из полноэкранного режима

ПРИМЕЧАНИЕ: Замените и на учетные данные из файла .csv, который вы загрузили после создания роли IAM для вашего ведра S3. Для AWS_REGION введите регион, в котором размещено ваше ведро. Мое ведро размещено на eu-west-2.

Обновите файл middlewares.js в папке config, заменив yourBucketName.s3.yourRegion.amazonaws.com ссылкой на ваш S3 bucket. В моем случае ссылка стала strapi-aws-s3-images-bucket.s3.eu-west-2.amazonaws.com, как показано ниже:

    // ~/strapi-aws-s3/backend/config/middlewares.js

    module.exports = [
      'strapi::errors',
      {
        name: 'strapi::security',
        config: {
          contentSecurityPolicy: {
            useDefaults: true,
            directives: {
              'connect-src': ["'self'", 'https:'],
              'img-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'strapi-aws-s3-images-bucket.s3.eu-west-2.amazonaws.com', // change here
              ],
              'media-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                'strapi-aws-s3-images-bucket.s3.eu-west-2.amazonaws.com', // change here
              ],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      'strapi::cors',
      'strapi::poweredBy',
      'strapi::logger',
      'strapi::query',
      'strapi::body',
      'strapi::session',
      'strapi::favicon',
      'strapi::public',
    ];

Войти в полноэкранный режим Выход из полноэкранного режима

Создайте свой бэкенд и запустите сервер.

    ~/strapi-aws-s3/backend $ npm run build
    ~/strapi-aws-s3/backend $ npm run develop

    #OR

    ~/strapi-aws-s3/backend $ yarn build
    ~/strapi-aws-s3/backend $ yarn develop

Войти в полноэкранный режим Выход из полноэкранного режима

Загрузка изображения

Перейдите на страницу плагина Media Library, http://localhost:1337/admin/plugins/upload. Нажмите + Добавить новые активы. Найдите изображение, которое вы хотите добавить с вашего компьютера, выберите Загрузить 1 актив в библиотеку и наблюдайте, как происходит волшебство.

Через несколько мгновений вы увидите только что загруженное изображение в медиатеке, а также в ведре Amazon S3.

Перейдите по ссылке https://s3.console.aws.amazon.com/s3/buckets/*?region=*, чтобы увидеть новое загруженное изображение в ведро S3.

Удаление изображения

Удалите изображение из медиатеки. Изображение автоматически удаляется из ведра Amazon S3.

Подтвердите удаление, обновив ссылку на свое ведро. Ведро теперь пустое. Удаление изображения из панели управления Strapi Admin Dashboard сработало.

Вы успешно настроили плагин Amazon S3 Upload Provider Plugin.

Заключение

В этом руководстве мы создали проект Strapi на основе шаблона блога. С помощью всего одной команды наш бэкенд уже был настроен как конечная точка REST API.

Мы установили и настроили плагин AWS S3 provider for Strapi uploads (@strapi/provider-upload-aws-s3) в папке нашего проекта Strapi. Затем мы создали ведро Amazon S3 с рекомендованными политиками IAM для управления им.

Наконец, мы протестировали наше приложение и убедились, насколько легко мы можем загружать и удалять изображения в ведро Amazon S3 с помощью медиатеки Strapi Admin. Посмотрите репозиторий проекта на Github.

Что дальше?

Ознакомьтесь с Развертывание Strapi на вашем собственном VPS и другими вариантами развертывания, чтобы узнать, как вы можете развернуть свое приложение. Если вы заинтересованы в создании фронтенда для этого приложения, посмотрите Build a blog with Next (React.js) and Strapi.

Я надеюсь, что это руководство предоставило достаточно информации, чтобы вы могли с полной уверенностью настроить провайдера Amazon S3. Если у вас возникли какие-либо вопросы, не стесняйтесь комментировать. Сообщество Strapi всегда готово помочь в решении любых вопросов.