您需要选择一个Git提供商、数据库适配器和认证提供商。您可以使用我们创建的任何提供商,或者您可以创建自己的。在下面的示例中,我们将使用GitHub、Vercel KV和TinaCMS Auth.js提供商。
如果您需要的Git提供商、数据库适配器或认证提供商不可用,您可以选择创建自己的。有关此过程的帮助,请参阅自托管解决方案的文档,其中提供了详细的指导。
yarn add tinacms @tinacms/datalayer
yarn add --dev @tinacms/cli
安装您选择的git提供商、数据库适配器和认证提供商的任何依赖项(这可能会根据您的选择有所不同)
yarn add tinacms-gitprovider-github tinacms-authjs upstash-redis-level @upstash/redis
在项目的tina
文件夹中创建一个名为database.{js,ts}
的文件。此文件将用于创建数据库。
tina/database.{ts,js}
import { createDatabase, createLocalDatabase } from '@tinacms/datalayer'// 更改为您选择的git提供商import { GitHubProvider } from 'tinacms-gitprovider-github'// 更改为您选择的数据库适配器import { Redis } from '@upstash/redis'import { RedisLevel } from 'upstash-redis-level'// 在您的CI/CD管道中管理此标志,并确保在生产环境中将其设置为falseconst isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'const branch =process.env.GITHUB_BRANCH || process.env.VERCEL_GIT_COMMIT_REF || 'main'if (!branch) {throw new Error('未找到分支。请确保已设置GITHUB_BRANCH或process.env.VERCEL_GIT_COMMIT_REF环境变量。')}export default isLocal? // 如果我们在本地运行,使用一个在内存中存储数据并在保存时写入本地文件系统的本地数据库createLocalDatabase(): // 如果我们不在本地运行,使用一个在redis中存储数据并将数据保存到github的数据库createDatabase({// 可能会根据您的git提供商有所不同gitProvider: new GitHubProvider({repo: process.env.GITHUB_REPO || process.env.VERCEL_GIT_REPO_SLUG,owner: process.env.GITHUB_OWNER || process.env.VERCEL_GIT_REPO_OWNER,token: process.env.GITHUB_PERSONAL_ACCESS_TOKEN,branch,}),// 可能会根据您的数据库适配器有所不同databaseAdapter: new RedisLevel<string, Record<string, any>>({redis: new Redis({url:(process.env.KV_REST_API_URL as string) || 'http://localhost:8079',token: (process.env.KV_REST_API_TOKEN as string) || 'example_token',}),debug: process.env.DEBUG === 'true' || false,namespace: branch,}),})
您将需要一个后端端点来托管GraphQL和认证API端点。
在此示例中,我们将展示如何在Vercel上托管GraphQL API。您可以使用任何您想要的托管提供商(代码可能需要根据您选择的框架进行调整)。
// pages/api/tina/[...routes].{ts,js}import { TinaNodeBackend, LocalBackendAuthentication } from '@tinacms/datalayer'import { TinaAuthJSOptions, AuthJsBackendAuthentication } from 'tinacms-authjs'import databaseClient from '../../../tina/__generated__/databaseClient'const isLocal = process.env.TINA_PUBLIC_IS_LOCAL === 'true'const handler = TinaNodeBackend({authentication: isLocal? LocalBackendAuthentication(): AuthJsBackendAuthentication({authOptions: TinaAuthJSOptions({databaseClient: databaseClient,secret: process.env.NEXTAUTH_SECRET,}),}),databaseClient,})export default (req, res) => {// 如果需要,可以在这里修改请求return handler(req, res)}
更多信息请参见后端托管
更新TinaCMS配置以使用您在上一步中创建的GraphQL API。
// tina/config.{js,ts}export default defineConfig({// 确保将此设置为您的GraphQL API的URLcontentApiUrlOverride: '/api/tina/gql',authProvider: // 添加您的认证提供商。请参阅您选择的认证提供商的文档。//...})
现在您应该能够运行您的站点并使用TinaCMS编辑您的内容。有关如何自托管TinaCMS的更多信息,请参阅配置组件的文档。