S3 Adapater tutorial for Digital Ocean Spaces

joelcorey

2 months ago

13

import { buildConfig } from 'payload/config';
import path from 'path';
import Categories from './collections/Categories';
import Posts from './collections/Posts';
import Tags from './collections/Tags';
import Users from './collections/Users';
import Media from './collections/Media';
import ServiceCategories from './collections/ServiceCategories';
import { cloudStorage } from '@payloadcms/plugin-cloud-storage';
import { s3Adapter } from '@payloadcms/plugin-cloud-storage/s3';

const adapter = s3Adapter({
  config: {
    forcePathStyle: true,
    region: process.env.S3_REGION,
    endpoint: process.env.S3_ENDPOINT, // Configure for your provider
    credentials: {
      accessKeyId: process.env.S3_ACCESS_KEY_ID,
      secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    },
  },
  bucket: process.env.S3_BUCKET,
})

export default buildConfig({
  serverURL: 'http://localhost:3000',
  admin: {
    user: Users.slug,
  },
  collections: [Categories, Posts, Tags, Users, Media, ServiceCategories],
  typescript: {
    outputFile: path.resolve(__dirname, 'payload-types.ts'),
  },
  graphQL: {
    schemaOutputFile: path.resolve(__dirname, 'generated-schema.graphql'),
  },
  plugins: [
    cloudStorage({
      collections: {
        'media': {
          adapter
        },
      },
    }),
  ],
})

S3_ENDPOINT=https://somethinghere.sfo3.digitaloceanspaces.com
S3_BUCKET=somebucketname
S3_ACCESS_KEY_ID=keynamehere
S3_SECRET_ACCESS_KEY=DO1234
S3_REGION=sfo3

• 

  notchr

  2 months ago

  @joelcorey Good afternoon! Do you get a specific error back? Happy to help resolve!

• 

  joelcorey

  2 months ago

  "InvalidAccessKeyId"

  
  

  
  

  my key name is "blah" or something similar... DO only give you an endpoint, a key name, and then the actual key

  
  

  
  

  "It should just work" but I am dumb haha

• 

  paulpopus

  2 months ago

  Here is my config:

  
  
  

  s3 adapter

  
  

  const adapter = s3Adapter({
    config: {
      credentials: {
        accessKeyId: process.env.S3_ACCESS_KEY_ID,
        secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
      },
      endpoint: process.env.S3_ENDPOINT,
      region: process.env.S3_REGION,
    },
    bucket: process.env.S3_BUCKET,
  })

  
  

  which looks the same as yours

  
  

  
  

  OHH for your endpoint it should be just

  https://sfo3.digitaloceanspaces.com
  

  
  

  @joelcorey maybe it was your endpoint that was wrong?

  
  

  
  

  DO doesnt mention this very clearly 🙄

• 

  joelcorey

  2 months ago

  Same error with the updated endpoint

  
  

  
  

  Can the key id be text? Does it have to be a number?

• 

  paulpopus

  2 months ago

  the key id is a long generated alphanumeric string

  
  

  
  

  shorter than the secret but similar otherwise

  
  

  
  

  in all caps

• 

  joelcorey

  2 months ago

  Oh. I am for sure doing that wrong then. I put the keyname in. Where do I find the key id in Digital Ocean? I don't see it anywhere. I am aware that this is now not a problem with Payload.

• 

  paulpopus

  2 months ago

  let me crack open that old lawnmower

  
  

  
  

  click on API in the menu on the left

  
  

  
  

  then spaces keys

  
  

  
  

  then you have a list of named key secretKey value pairs

  
• 

  joelcorey

  2 months ago

  so the key id is the key name?

• 

  paulpopus

  2 months ago

  the name is just for your info

  
  

  
  

  no, the key ID is a generated one

  
  

  
  

  id share it but its private haha

  
  

  
  

  let me gen one

• 

  joelcorey

  2 months ago

  I understand lol. I see the actual key "DO005..." but no actual id field anywhere

• 

  paulpopus

  2 months ago

  you gen a new one and your interface looks like this

  
  

  
  

  yeah so DO is your access ID and the string underneath is the secret, you can only see the secret upon initial generation

  
  

  
  

  but you can always regenerate it

  
• 

  joelcorey

  2 months ago

  ooooooooooooooooooooh

  
  

  
  

  Yep. 100% I am dumb.

  
  

  
  

  Thanks!!

  
  

  
  

  Next dumb question: How do I flare this as answered?

• 

  paulpopus

  2 months ago

  very top, next to search bar 3 dots -> edit tags