js提取指定网站内容(本文开发官网(/)的搭建思路，分享云开发结合流行框架与工具的实战经验)

　　js提取指定网站内容(本文开发官网(/)的搭建思路，分享云开发结合流行框架与工具的实战经验)

　　关于作者：

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

　　本文内容：

　　简介

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

　　

　　本文从云开发团队开发者+能力用户的角度，以搭建云开发官网的思路（/）为例，分享结合流行框架和工具的云开发实践经验。

　　涉及的知识点有：

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

　　系统设计图：

　　

　　背景介绍

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

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

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

　　我们使用“cms扩展”、“基础云开发能力”、“Next.js”、“CI工具”来解决以上问题。在实现网站内容动态的同时，保证SEO，运营同学也可以通过cms可视化管理内容。

　　安装cms

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

　　在配置扩展时，有两种类型的帐户：管理员帐户和操作员帐户。管理员账户具有更高的权限，可以创建新的数据集合；而operator账号只能对已有的数据集进行增删改查。

　　

　　注意：

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

　　安装成功后，云数据库会自动创建3个合集，分别是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/目录下：

　　

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

　　

　　在浏览器中访问对应链接（/tcb-cms/）查看cms系统：

　　

　　至此，无需任何开发成本，cms内容管理系统正式上线~

　　使用cms创建动态内容

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

　　

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

　　name: 课程名称

time: 课程时间

cover: 课程封面

url: 课程链接

level: 课程难度

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

　　注意：

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

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

　　推荐：

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

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

　　

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

　　

　　图片、链接等内容向运营商展示更友好。

　　项目建设

　　按照 Next.js Docs 的指南创建 Next.js 项目：

　　npm i --save next react react-dom

　　因为我们要部署网站到“静态托管”，所以需要用到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”。访问静态网站托管的链接：/，效果如下：

　　

　　借助成熟的 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等。

　　探索功能、多样化想法并以较低的成本开发高度可用的网络服务。云开发绝对是您的最佳选择！

　　更多信息：