云优cms文章采集(安装CMS进入云开发扩展能力控制台，业余时间出没在。)

　　云优cms文章采集(安装CMS进入云开发扩展能力控制台，业余时间出没在。)

　　关于作者：

　　云开发CloudBase团队研发工程师董元新，专注于前端工程和节点服务开发。他在业余时间在这里。

　　本文目录：

　　介绍

　　随着腾讯云开发能力的逐步提升，经验丰富的工程师可以独立完成一个产品的开发和上线。但是，与在线云开发相关的实战却很少文章。很多开发者都知道云开发的能力，但是不知道在现有的开发体系下如何引入云开发。

　　

　　本文从云开发团队开发者+能力用户的角度出发，以云开发官网()为例，结合流行的框架和工具，分享云开发的实践经验。

　　涉及的知识点有：

　　React 框架：Next.jsCI 自动构建概述

　　系统设计图：

　　

　　背景介绍

　　随着云开发团队业务的快速发展，团队需要一个官方网站，更加直观、即时地向开发者展示云开发的相关能力，包括但不限于工具链、SDK、技术文档等。

　　同时，为了降低开发者的启动成本，积累行业优秀的实践经验，官网还承载着营造社区氛围、聚合重要信息、增强用户粘性的重任。

　　我们最初使用 VuePress 作为静态 网站 工具，遇到了一些痛点：

　　我们使用“cms Extensions”、“Basic Cloud Development Capabilities”、“Next.js”、“CI Tools”很好地解决了上述问题。在实现网站动态内​​容的同时，保证了SEO，运维同学也可以通过cms对内容进行可视化管理。

　　安装cms

　　进入云开发扩展能力控制台，按照提示安装cms内容管理系统。

　　配置分机时，有两种账户：管理员账户和操作员账户。管理员账户具有较高的权限，可以创建新的数据集；而操作员账户只能添加、删除和修改现有的数据集。

　　

　　注意：

　　安装时间有点长，请耐心等待

　　安装成功后，云数据库会自动创建三个集合，分别是 tcb-ext-cms-contents、tcb-ext-cms-users、tcb-ext-cms-webhooks ，分别存放cms 系统配置信息和内容数据。会自动创建三个云函数，分别是tcb-ext-cms-api、tcb-ext-cms-init、tcb-ext-cms-auth，它们封装了初始化，数据流的认证和相关逻辑。

　　输入“Static 网站 Hosting”，可以看到cms系统的静态文件已经自动部署到tcb-cms/目录下：

　　

　　点击上方的“基本配置”查看域名信息。

　　

　　在浏览器中访问对应的链接()可以看到cms系统：

　　

　　至此，在没有任何开发成本的情况下，一个cms内容管理系统正式上线啦~

　　使用 cms 创建动态内容

　　对于动态数据内容，我们将其划分为不同的模块。每个内容模块对应一个cms系统的数据集合。例如，在“云开发官网”-“社区页面”中，推荐课程的内容是动态的。

　　

　　从图中可以看出，每门课程都有多个属性。在云数据库中，每门课程对应一个文档，课程属性对应文档的字段。字段类型和含义如下：

　　name: 课程名称

time: 课程时间

cover: 课程封面

url: 课程链接

level: 课程难度

　　以管理员身份登录cms系统，在内容设置页面新建内容。在cms中，支持多种高级数据类型，如url、image、markdown、富文本、标签数组、email、URL等，这些类型都智能识别，显示更友好。

　　注意：

　　cms 自带图床功能。当数据类型为“图片”时，图片会自动上传到当前云开发环境中的云存储中。以 cloud:// 开头的用于图像信息的特殊链接存储在数据集合中。

　　创建新内容时，默认情况下，cms 会自动填充 4 个字段：name、order、createTime、updateTime。您可以根据自己的需要删除不必要的字段。

　　建议：

　　预留order字段，可用于数据排序。对于操作者来说，数据的顺序值越大，在cms系统中显示的位置就越高；对于开发者来说，搜索可以按照顺序进行排序。这保证了经验和逻辑的一致性。

　　根据字段创建集合后， cms 您将在系统左侧看到“推荐课程”。其对应的内容存放在云数据库的推荐课程（创建时指定）集合中，其字段信息存放在云数据库的tcb-ext-cms-contents（cms创建在初始化期间））在集合中。

　　

　　根据设置添加新课程内容后，再次进入“推荐好课程”，如下图：

　　

　　图片、链接等内容显示给操作者更友好。

　　项目建设

　　按照 Next.js 文档创建 Next.js 项目：

　　npm i --save next react react-dom axios

　　由于我们将 网站 部署到“静态托管”，我们将使用 Next.js 的静态导出功能。package.json 中的打包脚本更新为：

　　"scripts": {

"dev": "next",

"build": "next build && next export",

"start": "next start"

}

　　为了快速部署静态网站，发布云功能。需要全局安装@cloudbase/cli：

　　npm install -g @cloudbase/cli

　　安装后，添加两个脚本：

　　"scripts": {

"deploy:hosting": "npm run build && cloudbase hosting:deploy out -e jhgjj-0ae4a1",

"deploy:function": "echo y | cloudbase functions:deploy --force"

}

　　注意：

　　准备两个云环境，防止静态部署时文件覆盖。envId为jhgjj-0ae4a1的云环境仅用于部署Next.js的静态导出文件。envId为pagecounter-d27cfe的云环境用于部署cms系统。

　　获取 cms 内容

　　借助 CloudBase 的 Node SDK-@cloudbase/node-sdk，我们可以在 Next.js 的 getStaticProps() 方法中读取云数据库中的数据。

　　为了让逻辑更清晰，我们将获取外部数据的方法统一封装到一个单独的文件中。以获取“推荐课程”为例：

　　// provider.js

const cloudbase = require("@cloudbase/node-sdk");

const config = {

secretId: "your secretId", // 前往「腾讯云控制台」-「访问密钥」获取

secretKey: "your secretKey", // 前往「腾讯云控制台」-「访问密钥」获取

env: "your envid" // 前往「腾讯云控制台」-「云开发 CloudBase」获取

};

const app = cloudbase.init(config);

/**

* 获取云数据库数据

*/

async function getCourses() {

const db = app.database();

const result = await db.collection("recommend-course").get();

if (result.code) {

throw new Error(

`获取「推荐课程」失败, 错误码是${result.code}: ${result.message}`

);

}

return result.data.map(item => {

if (item.createTime instanceof Date) {

item.createTime = item.createTime.toLocaleString();

}

if (item.updateTime instanceof Date) {

item.updateTime = item.updateTime.toLocaleString();

}

item.cover = getBucketUrl(item.cover); // 处理云存储的特殊链接

return item;

});

}

　　如上所述，cms自带图床功能，拖拽上传的图片会存储在同一环境的云存储中，获取图片的链接会存储在采集中。云存储的链接是一个以cloud://开头的特殊链接，需要在前端进行专门的识别和处理。

　　例如图片存储链接为：cloud://pagecounter-d27cfe.7061-pagecounter-d27cfe-1255463368/uploads/04.png。把它变成一个可访问的 http 链接：.

　　转换思路是：识别envid背后的信息，与tcb.qcloud.la域名重新拼接：

　　// provider.js

/**

* 获取云存储的访问链接

* @param {String} url 云存储的特定url

*/

function getBucketUrl(url) {

if (!url.startsWith("cloud://")) {

return url;

}

const re = /cloud:\/\/.*?\.(.*?)\/(.*)/;

const result = re.exec(url);

return `https://${result[1]}.tcb.qcloud.la/${result[2]}`;

}

　　注意：

　　云存储的“权限设置”应该是：所有用户可读，只有创建者和管理员可写。否则无法访问链接。

　　推荐：

　　除了内置的图床功能，开发者还可以根据自己的需要使用其他稳定的图床服务，比如微博图床。如果使用其他图床，对应的字段类型不能设置为“图像”，可以是“字符串”或“超链接”。

　　到目前为止，我们已经使用 SDK 获取了云数据库数据，剩下要做的就是将其注入到 Next.js 页面组件的 props 中：

　　// pages/index.js

const HomePage = ({ courses }) => {

return (

// 尽情使用数据吧...

)

}

export async function getStaticProps() {

const { getCourses } = require('./../provider')

return {

props: {

courses: await getCourses()

}

}

}

export default HomePage

　　打开浏览器，输入：3000/，可以看到效果如下：

　　

　　输入view-source::3000/，可以看到网页的html源码中收录了课程数据，解决了SEO的问题：

　　

　　注意：

　　Next.js 的一些方法会在双方都运行，但 getStaticProps() 只会在服务端运行

　　自动构建和部署

　　至此，开发工作基本结束。执行 npm run build 命令，将 网站 静态文件打包到 out/ 目录下：

　　

　　执行 npm run deploy:hosting 将 out/ 目录下的文件上传到“static网站hosting”。访问静态 网站hosted link: ，效果如下：

　　

　　借助成熟的 CI 工具，例如 Travis、Circle 等，可以定期触发构建工作。这样，内容和开发就完全分开了。

　　在构建和发布时，您需要使用 CloudBase CLI 工具。在 CI 工具中，不要使用 cloudbase login 进行交互式输入登录，而是使用以下密钥登录： cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY 。

　　注意：

　　前往 Cloud API Key 获取 TCB_SECRET_ID 和 TCB_SECRET_KEY 的值

　　在 CI 工具的控制台中，配置 TCB_SECRET_ID 和 TCB_SECRET_KEY。并在 package.json 中添加一个新脚本：

　　"scripts": {

"login": "echo N | cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY"

}

　　综上所述，CI构建流程为：

　　如果需要紧急修改数据，可以在本地手动触发构建，也可以在 CI 工具控制台中手动触发构建。

　　最后

　　借助云开发cms，可以实现评论系统、预约系统、博客发帖等各种内容模板，从而快速搭建网站。在现有的开发体系下，合理使用云开发可以大大降低人工成本、开发成本和运维成本。真正实现前后端穿梭，形成“闭环”。

　　本文实战只是一个指导，涉及到部分云开发能力。还有更多有趣的东西等着你去探索，比如使用云功能实现SSR，托管后端服务，镜像服务，以及全方位的SDK。

　　探索功能、发散想法并以更低的成本开发高可用性 Web 服务。云开发绝对是您的最佳选择！

　　更多信息：