Nuxt Studio

同步

了解 Nuxt Studio 如何在您的生产网站和 GitHub 仓库之间同步内容。

本页介绍 Nuxt Studio 如何在浏览器(您的生产网站)和 GitHub 仓库之间保持内容同步。

本节为信息说明。同步在设置后自动进行,无需手动操作。

架构概述

自托管的 Nuxt Studio 模块使用三层存储系统:

生产数据库(SQLite WASM)

当应用在浏览器加载时,Nuxt Content v3 会从服务器下载 SQLite 数据库转储文件并初始化本地 WASM 数据库。:br
该本地数据库包含您已部署分支中 content/ 目录的所有内容。

只要您最近的一次部署构建成功且 CI/CD 管道无错误,此浏览器端数据库就会与 GitHub 保持同步。

草稿存储(IndexedDB)

Studio 使用 unstorage 维护一个独立的草稿层,后端存储为 IndexedDB。:br
当您编辑内容时,变更会被存储为该层中的草稿。:br
每次 Studio 应用加载时,这些草稿会与 SQLite 数据库合并,以渲染您生产网站的草稿版

草稿只存储在您本地浏览器中,不会在编辑者或设备间共享。

GitHub 仓库

发布时,Studio 通过 GitHub API 直接将您的草稿更改提交到 GitHub 仓库。:br
随后您的 CI/CD 管道会自动重建并重新部署您的网站。

部署完成后,您需要等待构建成功完成,然后刷新网站,以使用最新内容更新浏览器数据库。
当检测到新部署时,Studio 模块会自动通知您。

同步工作原理

初始加载

数据库初始化

Nuxt Content 下载构建过程中生成的 SQLite 数据库转储文件。:br
该文件包含您 content/ 目录的所有解析内容。

草稿恢复

Studio 检查 IndexedDB 是否存在之前会话的草稿,将其加载进 SQLite 数据库。

预览

Studio 刷新网站预览,让您直接在生产网站上查看最新草稿和编辑内容。

编辑内容

当您在 Studio 中修改内容时:

草稿修改

变更会立即以状态为 createdmodifieddeleted 的草稿项目形式保存至 IndexedDB。

数据库更新

本地 SQLite 数据库同步更新草稿内容,实现即时视觉预览。

冲突检测

Studio 会将您的草稿内容与 GitHub 上的最新版本进行比较,以检测可能的冲突。

发生冲突的情况包括:

  • 有人推送了修改相同文件的提交,且该版本正在构建中。
  • 部署失败或尚未完成,导致生产数据库过期且与 GitHub 不同步。

发布更改

当您发布编辑内容时:

草稿收集

Studio 收集所有包含变更的草稿项目。

GitHub 提交

通过 GitHub API,Studio 创建包含所有更新文件的新提交。

触发部署

您的 CI/CD 平台检测到提交,自动重建并重新部署网站。

部署等待

发布后,Studio 清除本地草稿,并等待部署完成。:br
此期间显示加载状态,直至生产 SQLite 数据库跟上您最新的提交。

在提交部署前,Studio 会保持待定状态,此时生产数据库尚未更新。