部署到 Vercel
创建一个新项目
要在您的团队中创建一个新项目,导航到“添加新项目”按钮,系统会提示您导入您的 GitHub 仓库。
选择后,您需要配置构建设置。
构建配置
首次部署新项目时,您将在部署之前看到构建配置页面,但您可以在 设置 | 常规 | 构建和开发设置 中更新您的构建配置。
Figure: Vercel 构建设置
如果您的 package.json 中有一个类似tinacms build && <your-site-build-cmd>的 "build" 脚本,这可能不需要更改。如果您的 Vercel 配置没有运行自定义构建脚本(例如next build而不是npm run build),您需要将其更改为tinacms build && next build
环境变量
无论您在本地 .env 文件中定义了什么环境变量,都需要复制到您的 Vercel 项目中。您可以随时通过转到 设置 | 环境变量 来更新这些变量。
必需的环境变量包括 NEXT_PUBLIC_TINA_CLIENT_ID 和 TINA_TOKEN,您可以在您的 TinaCloud 项目 中找到这两个变量。
tinacms build需要在构建时提供环境变量,如TINA_TOKEN和NEXT_PUBLIC_TINA_CLIENT_ID。确保这些变量在 Vercel 的环境设置中配置好。如果您使用像 Turborepo 这样的 monorepo 工具,您可能还需要显式地转发这些变量(例如,通过turbo.json中的env键)——否则即使它们在 Vercel 中设置了,tinacms build也可能无法接收到它们。详情请参阅 环境变量参考。
您的首次部署
准备好后,选择 Deploy 并等待您的首次构建运行。成功后,通过选择 Inspect Deployment 访问您的新 TinaCMS 站点。
如果出现任何错误,请参考构建日志并相应地解决。
条件部署配置
默认情况下,每次您进行更改时,TinaCMS 都会推送一个带有更改的提交。这也意味着每次您进行更改时,Vercel 都会创建一个部署。这对于快速发布内容更改而无需手动部署的额外努力非常有用。如果这种工作流程不适合您,请按照以下步骤配置 Vercel 的部署行为。
在 Vercel 中,转到您的项目的 设置 | Git。您会找到与 Deploy Hooks 和 Ignore Build Step 相关的选项。
您需要为您的主分支(例如,main)禁用推送时的自动部署。具体设置可能会根据您的 Vercel 计划或最近的 UI 更新略有不同,但目标是阻止 Vercel 直接监听您的 Git push 事件。以下指南概述了使其工作的 Ignore Build Step 选项。
两个选项的重要限制:由于 Vercel 的内部配置方式,跟踪分支的每次提交仍将计入您的配额和并发构建计数。
不建议同时使用两个选项。这可能导致竞争条件或不良行为。
如果您能处理复杂性,推荐使用高级选项。对于大多数自定义用例,它是一个更灵活和可扩展的解决方案。
简单选项
使用 Vercel 的内置功能但有条件地忽略构建 - 请按照 忽略构建步骤指南 定义一个 Bash 或 Node 脚本以有条件地拒绝部署某些构建。
将您的 Ignore Build Step 设置为 Run my Bash script 或 Run my Node script。
Figure: 运行 Bash 脚本的忽略构建步骤
将您的脚本放在您的仓库中,并为命令提供路径,例如 bash my-deployment-conditions.sh。您的文件将类似于下面的文件,它仅部署生产版本。
高级选项
完全禁用 Vercel 的自动部署,并通过 GitHub Actions 获得完全控制。
如果您的用例更复杂,将构建和部署过程委托给 GitHub Actions 工作流会更容易。它们有更多的自定义选项,允许您调整流程以完全符合您的需求。
简而言之,我们要做的是:
- 阻止 Vercel 自动部署
- 从 Vercel 获取运行我们自定义解决方案所需的信息
- 创建一个 GitHub Actions 工作流来构建项目并将其部署到 Vercel
- 调整它以便在目标分支的最后一次提交后 5 分钟部署最新更改
这些步骤只是一个示例。请随意更改工作流以适应您的特定需求。
停止自动构建
在 Vercel 中,导航到您的项目 设置 | Git | Ignore Build Step 并将其设置为 Don't build anything。这将完全禁用自动部署。如果这不是您想要的,您可能需要探索其他选项。
Figure: 停止所有自动部署的忽略构建步骤
收集所需的 Vercel 集成数据
在 Vercel 中,导航到 我的账户 | 账户设置 | 令牌,创建一个具有您项目 Scope 和适当过期时间的令牌。给它一个描述性的名称。在提示时复制令牌,您将在下一步中需要它,并且您将无法再次看到它。
Figure: 令牌创建屏幕
然后导航到您的项目 设置 | 常规 | 项目 ID 并从那里复制 Project ID。
Figure: 要复制的项目 ID 位置
接下来,导航到您的项目并复制站点 URL,例如 https://mycoolblog.vercel.app/。
Figure: 要复制的项目 URL 位置
最后,导航到 我的账户 | 账户设置 | 常规 | 用户 ID 并从那里复制 User ID。稍后将其用作组织 ID。
Figure: 要复制的用户 ID 位置
设置用于工作流的仓库密钥
导航到您的 GitHub 个人资料 | 您的项目 | 设置 | 安全 | 密钥和变量 | 操作 | 仓库密钥。
使用从 Vercel 获得的相应数据创建以下密钥:
变量名称必须完全匹配才能使工作流正常工作。
- VERCEL_TOKEN
- VERCEL_PROJECT_ID
- VERCEL_URL
- VERCEL_ORG_ID
Figure: GitHub 仓库密钥创建页面
在项目中设置工作流
在项目的根目录下,创建以下文件夹结构:
将以下代码添加到创建的文件中。它将创建一个 GitHub Actions 工作流,当距离最后一次提交到 main 分支 5 分钟后进行部署。请按照注释了解我们如何处理去抖动。
📝 关于 monorepos 的注意事项:您可能需要在工作流步骤中添加working-directory
现在将文件推送到您的 GitHub 仓库。GitHub 将自动创建工作流。
转到您的 GitHub 仓库 | Actions 并验证您的工作流是否正在运行。
Figure: 成功和失败的 GitHub Actions
如果一切正常,您应该能够对您的仓库进行更改,并在系列的最后一次提交推送后大约 5 分钟看到它们被部署。
🛠️ 故障排除
- 工作流未运行? 检查 GitHub 密钥名称是否完全匹配(VERCEL_TOKEN, VERCEL_PROJECT_ID 等)
- 构建失败? 检查 GitHub Actions 日志和 Vercel 部署日志
- 两个系统都在部署? 确保 Vercel 中的
Ignore Build Step设置正确