Using Digital Ocean Spaces as Strapi Storage

So recently, I migrated a website from WordPress to Strapi + NextJS.

The client didn’t want Strapi’s own cloud service and wanted to stick with Digital Ocean, as he already knew that well.

So, I set up Strapi on Digital Ocean using their app service, which is, I would say, not " beginner-friendly” but should be easy enough for someone technical.

The problem

So after I uploaded a couple of content with images. They worked pretty well.

But as soon as I added a new field to a new collection or do anything that triggers a new build the images were gone.

The Issue

The problem was that strapi, by default, uses a local upload provider. A local provider means the images are stored on the machine.

Every time you build — the machine restarts, and the images are gone.

Solution

The solution is to use persistent storage. In fact, Strapi provides several options.

Upload | Strapi Documentation

Now, here is another problem. Strapi’s official documentation supports

• Amazon S3

• Cloudinary

But my client wanted to stick to Digital Ocean. So what to do?

Comes the Digital ocean spaces

Digital Ocean Spaces is actually an S3-compatible storage provider, which means it only provides a wrapper on top of the S3.

To use this, First, create a digital ocean space using the following guide How to Create a Spaces Bucket | DigitalOcean Documentation

Then, get the access key and the secret access key using this guide. How to Manage Administrative Access to Spaces | DigitalOcean Documentation

Install AWS provider

Now, go to the Strapi application and install s3 provider

npm i @strapi/provider-upload-aws-s3

Then open up your plugins.ts file and add the following code.

export default ({ env }) => ({
  // ... other configs,
  upload: {
    config: {
  provider: "aws-s3",
      providerOptions: {
        credentials: {
          accessKeyId: env("DO_SPACE_ACCESS_KEY"),
          secretAccessKey: env("DO_SPACE_SECRET_KEY"),
        },
        region: env("DO_SPACE_REGION"),
        endpoint: env("DO_SPACE_ENDPOINT"),
        params: {
          Bucket: env("DO_SPACE_BUCKET"),
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
});

Then, add the following values to the .env file.

DO_SPACE_ACCESS_KEY=___
DO_SPACE_SECRET_KEY=___
DO_SPACE_ENDPOINT=https://fra1.digitaloceanspaces.com
DO_SPACE_BUCKET=YOUR_BUCKET_NAME
DO_SPACE_REGION=REGION_NAME (in this case fra1)

Notice several things.

The space endpoint can’t have the bucket name at the beginning. This is a very common mistake that is not mentioned in the docs.

So if your Origin Endpoint looks like this

https://any-bucket-name.fra1.digitaloceanspaces.com

Your DO_SPACE_ENDPOINT value should be

https://fra1.digitaloceanspaces.com

And obviously, the region will be fra1

Modify Middleware

You are not done yet. Although this will work, when you visit the CMS, you will see that the previews are not loading.

To fix this, we have to allow Strapi access to the S3 bucket.

Let’s do that…

Now open the middlewares.ts file and add the following

export default [  
// ...others 
{
    name: "strapi::security",
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          "connect-src": ["'self'", "https:"],
          "img-src": [
            "'self'",
            "data:",
            "blob:",
            "strapi.io",
            "{BUCKET_NAME}.s3.{REGION}.amazonaws.com",
            "https://{BUCKET_NAME}.s3.{REGION}.amazonaws.com"
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "strapi.io",
            "{BUCKET_NAME}.s3.{REGION}.amazonaws.com",
            "https://{BUCKET_NAME}.s3.{REGION}.amazonaws.com"
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
];

Notice a few things

Replace the BUCKET_NAME and the REGION values in the middlewares.ts.

Then restart your Strapi server, and you should be able to upload images to the digital ocean spaces.

This configuration should fix the issues, and you will see the previews.

Upload an image and check the spaces to verify that it’s working. Also, don’t forget to add the .env variables to your digital ocean dashboard.

Thank you for reading this far! Have a great day!

Have something to say? Get in touch with me via LinkedIn