strapi-provider-upload-aws-s3-use-cdn v1.0.3

strapi-provider-upload-aws-s3-use-cdn

Resources

• LICENSE

Links

• Strapi website
• Strapi documentation
• Strapi community on Discord
• Strapi news on Twitter

Installation

# using yarn
yarn add strapi-provider-upload-aws-s3-use-cdnv

# using npm
npm install strapi-provider-upload-aws-s3-use-cdn

Configuration

• provider defines the name of the provider
• providerOptions is passed down during the construction of the provider. (ex: new AWS.S3(config)). Complete list of options
• actionOptions is passed directly to the parameters to each method respectively. You can find the complete list of upload/ uploadStream options and delete options

See the documentation about using a provider for information on installing and using a provider. To understand how environment variables are used in Strapi, please refer to the documentation about environment variables.

Two new environment variables have been added. AWS_CDN_DOMAIN is the base URL for the CDN you serve your images from and should include the protocol AND the trailing slash, such as https://www.your-cdn-url.com/. AWS_BUCKET_SUBDIRECTORY allows you to specify the directory within your S3 bucket that you used for storing the uploads. These two values will be combined to form the entire URL besides the file name and should also include the trailing '/'. If I set the AWS_BUCKET_SUBDIRECTORY to uploads/ then the URL structure for images would be https://www.your-cdn-url.com/uploads/<uploaded-image-file-name-given-by-strapi.jpg>. This will save in your database properly for use in the API, and these URLs will begin to be used inside the Strapi admin to serve the image previews!

Provider Configuration

./config/plugins.js

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

Configuration for S3 compatible services

This plugin may work with S3 compatible services by using the endpoint option instead of region. Scaleway example: ./config/plugins.js

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: 'aws-s3-use-cdn',
      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: {},
      },
      cdnDomain: env('AWS_CDN_DOMAIN'),
      bucketSubDirectory: env('AWS_BUCKET_SUBDIRECTORY')
    },
  }
  // ...
});

Security Middleware Configuration

Due to the default settings in the Strapi Security Middleware you will need to modify the contentSecurityPolicy settings to properly see thumbnail previews in the Media Library. You should replace strapi::security string with the object bellow instead as explained in the middleware configuration documentation.

./config/middlewares.js

module.exports = [
  // ...
  {
    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,
        },
      },
    },
  },
  // ...
];

If you use dots in your bucket name, the url of the ressource is in directory style (s3.yourRegion.amazonaws.com/your.bucket.name/image.jpg) instead of yourBucketName.s3.yourRegion.amazonaws.com/image.jpg. Then only add s3.yourRegion.amazonaws.com to img-src and media-src directives.

Required AWS Policy Actions

These are the minimum amount of permissions needed for this provider to work.

"Action": [
  "s3:PutObject",
  "s3:GetObject",
  "s3:ListBucket",
  "s3:DeleteObject",
  "s3:PutObjectAcl"
],