Strapi plugin logo for Cloudflare R2 & CDN

Cloudflare R2 & CDN

This upload provider will make it possible to use Cloudflare R2 via Cloudflare CDN public access endpoint.

npm version

strapi-provider-cloudflare-r2

Installation

# using yarn
yarn add strapi-provider-cloudflare-r2

# using npm
npm install strapi-provider-cloudflare-r2 --save

# using pnpm 
pnpm add strapi-provider-cloudflare-r2

Configuration

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.

Provider Configuration

./config/plugins.js or ./config/plugins.ts for TypeScript projects:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: "strapi-provider-cloudflare-r2",
      providerOptions: {
        accessKeyId: env("CF_ACCESS_KEY_ID"),
        secretAccessKey: env("CF_ACCESS_SECRET"),
        /**
         * `https://<ACCOUNT_ID>.r2.cloudflarestorage.com`
         */
        endpoint: env("CF_ENDPOINT"),
        params: {
          Bucket: env("CF_BUCKET"),
        },
        /**
         * Set this Option to store the CDN URL of your files and not the R2 endpoint URL in your DB.
         * Can be used in Cloudflare R2 with Domain-Access or Public URL: https://pub-<YOUR_PULIC_BUCKET_ID>.r2.dev
         * This option is required to upload files larger than 5MB, and is highly recommended to be set.
         * Check the cloudflare docs for the setup: https://developers.cloudflare.com/r2/data-access/public-buckets/#enable-public-access-for-your-bucket
         */
        cloudflarePublicAccessUrl: env("CF_PUBLIC_ACCESS_URL"),
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
  // ...
});

Where to find the configuration options
You can find all needed values in the Cloudflare dashboard unter R2. All your buckets, your account ID and the access keys can be found there.

  • endpoint: https://<ACCOUNT_ID>.r2.cloudflarestorage.com
  • accessKeyId: You need to click on Manage R2 API Tokens to create a new token.
  • secretAccessKey: You need to click on Manage R2 API Tokens to create a new token.

Security Middleware Configuration

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

./config/middlewares.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = ({ env }) => [
  // ...
  {
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            env("CF_PUBLIC_ACCESS_URL").replace(/^https?:\/\//, ""),
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            env("CF_PUBLIC_ACCESS_URL").replace(/^https?:\/\//, ""),
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  // ...
];

aws-sdk configuration and AWS_... env variables

As the Clouflare R2 spec follows the AWS S3 spec we make use of aws-sdk package to communicate with Cloudflare R2. Because of this dependency all AWS_... env variables used to configure the aws-sdk are still beeing pulled in by this dependency. If you do not want to configure any special functionality of the aws-sdk then make sure to remove all AWS_... env variables in you deployment.

Bucket CORS Configuration

Do not forget to configure your R2 Endpoint CORS settings as described here: https://developers.cloudflare.com/r2/buckets/cors/

The simplest configuration is to allow GET from all origins:

1
2
3
4
5
6
[
  {
    "AllowedOrigins": ["*"],
    "AllowedMethods": ["GET"]
  }
]

More safe would be to only allow it from your Strapi deployment Origins (better for production):

1
2
3
4
5
6
[
  {
    "AllowedOrigins": ["YOUR STRAPI URL"],
    "AllowedMethods": ["GET"]
  }
]

Sponsors

Strapi Plugin developed and maintained by trieb.work cloud consulting

Install now

npm install strapi-provider-cloudflare-r2

STATS

14 GitHub stars617 weekly downloads

Last updated

118 days ago

Strapi Version

Unavailable

Author

github profile image for Tilman Marquart | trieb.work
Tilman Marquart | trieb.work

Related plugin

Documentation

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.