文档

学习

v.Latest

Documentation

使用Digital Ocean Spaces的媒体

在TinaCMS中管理Digital Ocean Spaces媒体资产。

以下指南依赖于NextJS的API功能来验证第三方媒体交互。我们希望很快能记录一种与框架无关的方法。

安装

使用Yarn

yarn add next-tinacms-dos

使用NPM

npm install next-tinacms-dos

连接Digital Ocean Spaces

您需要Digital Ocean Spaces提供的一些凭据来正确设置。如果您还没有账户，可以在这里注册。

将以下变量添加到.env文件中。

SPACES_ENDPOINT=<您的Digital Ocean Spaces端点：例如 https://fra1.digitaloceanspaces.com> （不包括空间名称）

SPACES_NAME=<您的Digital Ocean Spaces名称：例如 my-spaces>

SPACES_KEY=<您的Digital Ocean Spaces访问密钥>

SPACES_SECRET_KEY=<您的Digital Ocean Spaces访问密钥>

注册媒体存储

您可以通过loadCustomStore属性注册Digital Ocean Space媒体存储。

loadCustomStore属性可以在tina/config.{js,ts,tsx}中配置。

//tina/config.{ts,js}
//...

export default defineConfig({
  //...
  media: {
    loadCustomStore: async () => {
      const pack = await import('next-tinacms-dos')
      return pack.TinaCloudDOSMediaStore
    },
  },
})

设置API路由

Tina的“外部媒体提供商”支持需要一个轻量级的后端媒体处理器，需要由用户设置/托管。有多种方法可以做到这一点，包括与框架无关的Netlify Functions实现。

注意： 此步骤将向您展示如何为Next.js设置API路由。如果您使用的是不同的框架，则需要设置自己的API路由。

Next.js示例

在Next.js应用的pages目录中设置一个新的API路由，例如pages/api/dos/[...media].ts。然后为媒体添加一个新的捕获所有API路由。

调用createMediaHandler来设置路由并将您的媒体存储实例连接到Digital Ocean Spaces。

从"@tinacms/auth"导入isAuthorized。

authorized键将使得只有TinaCloud中的授权用户才能上传和编辑媒体。

// pages/api/dos/[...media].ts

import {
  mediaHandlerConfig,
  createMediaHandler,
} from 'next-tinacms-dos/dist/handlers'

import { isAuthorized } from '@tinacms/auth'

export const config = mediaHandlerConfig

export default createMediaHandler({
  config: {
    endpoint: process.env.SPACES_ENDPOINT,
    credentials: {
      accessKeyId: process.env.SPACES_KEY || '',
      secretAccessKey: process.env.SPACES_SECRET_KEY || '',
    },
    region: 'us-east-1',
  },
  bucket: process.env.SPACES_NAME || '',
  authorized: async (req, _res) => {
    if (process.env.NODE_ENV === 'development') {
      return true
    }
    try {
      const user = await isAuthorized(req)

      return user && user.verified
    } catch (e) {
      console.error(e)
      return false
    }
  },
})

对于Netlify的使用案例，请阅读如何设置Netlify Functions 这里

使用自定义URL

如果您为Digital Ocean Spaces存储桶使用自定义URL，可以将cdnUrl值传递给createMediaHandler。

export default createMediaHandler({
  config: ...,
  bucket: ...,
  authorized: ...,
},
{
 cdnUrl: "https://my-custom-domain.com"
}
)

更新Schema

现在媒体存储已注册并且媒体的API路由已设置，让我们在您的schema中添加一个图像。

在您的schema中为图像添加一个新字段，例如：

 {
  name: 'hero',
  type: 'image',
  label: 'Hero Image',
 }

现在，当编辑您的网站时，图像字段将允许您通过媒体存储连接到Digital Ocean Spaces来管理您的媒体资产。

安装
- 使用Yarn
- 使用NPM
连接Digital Ocean Spaces
注册媒体存储
设置API路由
- Next.js示例
- 使用自定义URL
更新Schema

文档

学习

文档

学习

Join the Herd!