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

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

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

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

К концу этого руководства вы сможете использовать плагин Amazon S3 Upload Provider с любым проектом Strapi.

Что такое Страпи?

Strapi — ведущая безголовая система управления контентом (CMS) с открытым исходным кодом. Это 100% JavaScript, основанный на Node.js, который используется для создания RESTful API и GraphQL. У него также есть облачная SAAS, Strapi Cloud — полностью управляемая, компонуемая и совместная платформа для повышения скорости вашего контента!

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

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

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

Что такое Амазон S3?

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

Предпосылки

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

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

• Джаваскрипт
• Node.js
• Шелл (Баш)
• Strapi, следуйте Краткому руководству, чтобы ознакомиться со Strapi.
• Гит

Программное обеспечение:

• Операционная система (поддерживается любая из следующих):
• Ubuntu ›= 20.04 (только LTS)
• Debian ›= 10.x
• CentOS/RHEL ›= 8
• macOS ›= 10,15
• Виндовс 10 или 11
• Для этого руководства я использовал Ubuntu 20.04 LTS.
• Узел v16.x.x или v18.x.x (только LTS)
• Выпуски Node с нечетными номерами не поддерживаются (например, v13, v15). Узел загрузки из раздела Загрузить | Node.js. Я использовал Node v18.16.0
• npm или yarn Я использовал npm v8.5.0. npm поставляется вместе с установкой Node. Если вы предпочитаете пряжу, установите ее как пакет npm. Проверить установку | Пряжа.
• Strapi v4.x.x (Я использовал Strapi v4.10.2. Вы установите Strapi, используя *npm* или *yarn*.)
• Текстовый редактор на ваш выбор
• Git для контроля версий [Скачать Git со страницы Git — Загрузки]
• Git Bash (для пользователей Windows)
• Git Bash поставляется вместе с загрузкой Git. В учебнике используются команды оболочки Unix. Git Bash может запускать команды оболочки UNIX в Windows.
• Веб-браузер (любой браузер на основе Chromium)

Предварительные требования к оборудованию

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

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

Настроить Страпи

Мы начнем с создания приложения Strapi.

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

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

cd $HOME

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

mkdir strapi-aws-s3

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

cd strapi-aws-s3

• Создайте свое приложение Strapi.

npx create-strapi-app backend --quickstart

OR

yarn create strapi-app backend --quickstart

Эта команда создает ваше приложение Strapi в папке с именем backend. Флаг --quickstart настраивает ваше приложение Strapi с базой данных SQLite.

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

.
    ├── 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 не запустился автоматически, выполните следующие команды:

cd backend
    npm run develop

OR

cd backend
    yarn develop

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

При создании нового пользователя вы входите в панель инструментов Strapi.

В левой части панели инструментов Strapi отображается список Диспетчер контента, содержащий ваши типы контента. Параметр ПЛАГИНЫ содержит список подключаемых модулей, установленных в вашем проекте. Подключаемый модуль Content-Type Builder и подключаемый модуль Media Library устанавливаются в вашем приложении Strapi по умолчанию.

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

Установите и настройте поставщика загрузки S3

Установите поставщика AWS S3. Остановите свой сервер stripi, нажав Ctrl+C в своем терминале. Установить @strapi/provider-upload-aws-s3:

cd backend
    npm install @strapi/provider-upload-aws-s3 --save

OR

cd backend
    yarn add @strapi/provider-upload-aws-s3

Настройка поставщика AWS S3

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

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: {
                  ACL: env('AWS_ACL', 'public-read'),
                  signedUrlExpires: env('AWS_SIGNED_URL_EXPIRES', 15 * 60),
                  Bucket: env('AWS_BUCKET'),
                },
              },
              actionOptions: {
                upload: {},
                uploadStream: {},
                delete: {},
              },
            },
          },
    });

Это позволяет плагину работать в вашем приложении.

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

Конфигурация промежуточного программного обеспечения безопасности

Из-за настроек по умолчанию в промежуточном программном обеспечении Strapi Security вам потребуется изменить настройки 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. См. AWS S3 | Strapi Market для получения дополнительной информации о настройке плагина.

Настроить АВС

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

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

Зарегистрируйте учетную запись AWS на странице Консоль AWS — Регистрация, если у вас ее еще нет. Дополнительные сведения о процессе создания учетной записи AWS см. в руководстве Создание и активация учетной записи AWS.

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

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

Следуйте руководству Создание первого пользователя и группы пользователей-администраторов IAM — Управление идентификацией и доступом AWS», чтобы создать пользователя-администратора IAM и группу пользователей, используя свою корневую учетную запись AWS в Консоли управления AWS.

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

Установить сведения о пользователе:

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

• Откройте консоль IAM, выбрав Службы, затем Все службы, прокрутите вниз и выберите IAM или перейдите в Консоль IAM. >».

# ~/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

// ~/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',
    ];

npm run build
    npm run develop

yarn build
    yarn develop

// ~/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',
                `${process.env.AWS_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com`,
              ],
              'media-src': [
                "'self'",
                'data:',
                'blob:',
                'dl.airtable.com',
                `${process.env.AWS_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com`, 
              ],
              upgradeInsecureRequests: null,
            },
          },
        },
      },
      'strapi::cors',
      'strapi::poweredBy',
      'strapi::logger',
      'strapi::query',
      'strapi::body',
      'strapi::session',
      'strapi::favicon',
      'strapi::public',
    ];

[
      {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
      }
    ]