基于 Next.js 和云開發(fā) CMS 的內(nèi)容型網(wǎng)站應用實戰(zhàn)開發(fā)

時間：2023-05-30 23:21:02 | 來源：網(wǎng)站運營

時間：2023-05-30 23:21:02 來源：網(wǎng)站運營

基于 Next.js 和云開發(fā) CMS 的內(nèi)容型網(wǎng)站應用實戰(zhàn)開發(fā)：作者簡介：

董沅鑫，云開發(fā) CloudBase 團隊研發(fā)工程師，側(cè)重于前端工程化、node 服務開發(fā)，業(yè)余時間出沒在 http://xin-tan.com。

本文目錄：

• 引言
• 總覽
• 背景介紹
• 安裝 CMS
• 使用 CMS 創(chuàng)建動態(tài)內(nèi)容
• 項目搭建
• 獲取 CMS 內(nèi)容
• 自動構(gòu)建與部署
• 最后

引言

隨著騰訊云云開發(fā)能力的日漸完善，有經(jīng)驗的工程師已經(jīng)可以獨立完成一個產(chǎn)品的開發(fā)和上線。但網(wǎng)上云開發(fā)相關(guān)的實戰(zhàn)文章非常少，很多開發(fā)者清楚云開發(fā)的能力，但是不清楚如何在現(xiàn)有的開發(fā)體系下引入云開發(fā)。

本文從云開發(fā)團隊開發(fā)者+能力使用者的角度，以云開發(fā)官網(wǎng) (http://cloudbase.net/) 的搭建思路為例，分享云開發(fā)結(jié)合流行框架與工具的實戰(zhàn)經(jīng)驗。

涉及到的知識點有：

• 云開發(fā)：
• 擴展能力（CMS 擴展）
• 靜態(tài)托管
• 云數(shù)據(jù)庫
• CloudBase CLI 工具
• React 框架：Next.js
• CI 自動構(gòu)建

總覽

系統(tǒng)設(shè)計圖：

背景介紹

隨著云開發(fā)團隊業(yè)務的迅猛發(fā)展，團隊需要一個官網(wǎng)來更直觀、更即時地向開發(fā)者們展示云開發(fā)的相關(guān)能力，包括但不限于工具鏈、SDK、技術(shù)文檔等。

同時，為了降低開發(fā)者的上手成本，積累業(yè)界的優(yōu)秀實戰(zhàn)經(jīng)驗，官網(wǎng)也承載著營造社區(qū)氛圍、聚合重要資料、增強用戶黏度的重要任務。

我們最初使用 VuePress 作為靜態(tài)網(wǎng)站工具，遇到了一些痛點：

• 問題 1: 每次更新內(nèi)容，都需要配合 git。運營同學對 git 不熟悉
• 問題 2: 學習資料方面的內(nèi)容更新過于頻繁，“污染”了 git 記錄
• 問題 3: 內(nèi)容和網(wǎng)站代碼耦合
• 問題 4: 缺少可視化的內(nèi)容編輯工具

我們使用「CMS 擴展」、「云開發(fā)基礎(chǔ)能力」、「Next.js」、「CI 工具」，很好地解決了以上問題。在實現(xiàn)網(wǎng)站內(nèi)容動態(tài)化的同時，保證了 SEO，運營同學也可以通過 CMS 對內(nèi)容進行可視化管理。

安裝 CMS

進入云開發(fā)擴展能力控制臺，根據(jù)引導，安裝 CMS 內(nèi)容管理系統(tǒng)。

在進行擴展程序配置的時候，有兩種賬號：管理員賬號和運營者賬號。管理員賬號權(quán)限更高，可以創(chuàng)建新的數(shù)據(jù)集合；而運營者賬號只能在已有的數(shù)據(jù)集合上進行增刪改的操作。

注意：
安裝時間有些長，請耐心等待

安裝成功后，云數(shù)據(jù)庫會自動創(chuàng)建 3 個集合，分別是 tcb-ext-cms-contents、tcb-ext-cms-users、tcb-ext-cms-webhooks，存放 CMS 系統(tǒng)配置信息以及內(nèi)容數(shù)據(jù)。會自動創(chuàng)建 3 個云函數(shù)，分別是 tcb-ext-cms-api、tcb-ext-cms-init、tcb-ext-cms-auth，封裝了初始化、身份驗證以及數(shù)據(jù)流的相關(guān)邏輯。

進入「靜態(tài)網(wǎng)站托管」，可以看到 CMS 系統(tǒng)的靜態(tài)文件已經(jīng)自動部署到tcb-cms/目錄下了：

點擊上方的「基礎(chǔ)配置」，就可以查看到域名信息。

在瀏覽器中訪問對應鏈接（http://pagecounter-d27cfe-1255463368.tcloudbaseapp.com/tcb-cms/）即可看到 CMS 系統(tǒng)：

到此為止，無任何開發(fā)成本，一個 CMS 內(nèi)容管理系統(tǒng)就正式上線了～

使用 CMS 創(chuàng)建動態(tài)內(nèi)容

對于動態(tài)化的數(shù)據(jù)內(nèi)容，我們將其劃分為不同的模塊。每個內(nèi)容模塊，對應 CMS 系統(tǒng)的一個數(shù)據(jù)集合。例如「云開發(fā)官網(wǎng)」-「社區(qū)頁」中，推薦好課的內(nèi)容就是動態(tài)的。

從圖中可以看到，每節(jié)課程有著多個屬性。而在云數(shù)據(jù)庫中，每節(jié)課程就對應一個文檔，課程屬性就對應文檔的字段。字段類型與含義如下：

name<string>: 課程名稱time<number>: 課程時間cover<string>: 課程封面url<string>: 課程鏈接level<0 | 1 | 2>: 課程難度以管理員身份登錄 CMS 系統(tǒng)，在「內(nèi)容設(shè)置頁」新建內(nèi)容。在 CMS 中，支持多種高級數(shù)據(jù)類型，例如 url、圖片、markdown、富文本、標簽數(shù)組、郵箱、網(wǎng)址等，并對這些類型進行了智能識別和更友好地展示。

注意：
CMS 自帶圖床功能。當數(shù)據(jù)類型是「圖片」時，圖片會自動上傳到當前云開發(fā)環(huán)境下的云存儲中。圖片信息以 cloud:// 開頭的特殊鏈接，存放在數(shù)據(jù)集合中。

新建內(nèi)容時，默認情況下，CMS 會自動填充 4 個字段：name、order、createTime、updateTime?？梢愿鶕?jù)自身需要，對不需要的字段進行刪除。

建議：
保留 order 字段，它可以被用作數(shù)據(jù)排序。對運營者來說，數(shù)據(jù)的 order 的值越大，在 CMS 系統(tǒng)中展示的位置越靠前；對開發(fā)者來說，可以根據(jù) order 來進行排序搜索。從而保證了體驗和邏輯的一致性。

根據(jù)字段創(chuàng)建集合后，CMS 系統(tǒng)左側(cè)會看到「推薦好課」。它對應的內(nèi)容被保存在云數(shù)據(jù)庫的recommend-course（創(chuàng)建時指定）集合中，它的字段信息保存在云數(shù)據(jù)庫的tcb-ext-cms-contents（CMS 初始化時創(chuàng)建）集合中。

按照設(shè)定添加新的課程內(nèi)容后，再次進入「推薦好課」，如下所示：

圖片、鏈接等內(nèi)容，更友好地展示給運營者。

項目搭建

按照 Next.js Docs 的指引，創(chuàng)建 Next.js 項目：

npm i --save next react react-dom因為我們要將網(wǎng)站部署到「靜態(tài)托管」上，所以要使用 Next.js 的靜態(tài)導出功能。package.json 中的打包腳本更新為：

"scripts": { "dev": "next", "build": "next build && next export", "start": "next start"}為了快速部署靜態(tài)網(wǎng)站，以及發(fā)布云函數(shù)。需要全局安裝 @cloudbase/cli:

npm install -g @cloudbase/cli安裝后，添加兩個腳本：

• deploy:hosting: 將 Next.js 的靜態(tài)導出文件部署到「靜態(tài)托管」
• deploy:function: 發(fā)布項目中的云函數(shù)

"scripts": { "deploy:hosting": "npm run build && cloudbase hosting:deploy out -e jhgjj-0ae4a1", "deploy:function": "echo y | cloudbase functions:deploy --force"}

注意：
準備兩個云環(huán)境，防止靜態(tài)部署時文件覆蓋。envId 為 jhgjj-0ae4a1 的云環(huán)境只用于部署 Next.js 的靜態(tài)導出文件。envId 為 pagecounter-d27cfe 的云環(huán)境用來部署 CMS 系統(tǒng)。

獲取 CMS 內(nèi)容

配合 CloudBase 的 Node 端 SDK-@cloudbase/node-sdk，我們可以在 Next.js 的 getStaticProps() 方法中讀取到云數(shù)據(jù)庫中的數(shù)據(jù)。

為了使邏輯更清晰，我們將獲取外部數(shù)據(jù)的方法統(tǒng)一封裝到單獨文件中。以獲取「推薦課程」為例：

// provider.jsconst cloudbase = require("@cloudbase/node-sdk");const config = { secretId: "your secretId", // 前往「騰訊云控制臺」-「訪問密鑰」獲取 secretKey: "your secretKey", // 前往「騰訊云控制臺」-「訪問密鑰」獲取 env: "your envid" // 前往「騰訊云控制臺」-「云開發(fā) CloudBase」獲取};const app = cloudbase.init(config);/** * 獲取云數(shù)據(jù)庫數(shù)據(jù) */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 自帶圖床功能，拖拽上傳的圖片會被存儲在同一環(huán)境下的云存儲中，并且獲取圖片的鏈接存放在集合中。云存儲的鏈接是以 cloud:// 開頭的特殊鏈接，需要在前端進行識別和特殊處理。

舉個 ，圖片的存儲鏈接是：cloud://pagecounter-d27cfe.7061-pagecounter-d27cfe-1255463368/uploads/1589990230404.png。將其轉(zhuǎn)成可訪問的 http 鏈接：https://7061-pagecounter-d27cfe-1255463368.tcb.qcloud.la/uploads/1589990230404.png。

轉(zhuǎn)換思路是：識別 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]}`;}

注意：
云存儲的「權(quán)限設(shè)置」應為：所有用戶可讀，僅創(chuàng)建者及管理員可寫。否則鏈接無法訪問。
推薦：
除了自帶的圖床功能，開發(fā)者可以根據(jù)自身需求使用其他穩(wěn)定圖床服務，例如微博圖床。如果使用其他圖床，對應字段類型不能設(shè)置為「圖片」，可以是「字符串」或者「超鏈接」。

目前為止，我們使用 SDK 獲取了云數(shù)據(jù)庫數(shù)據(jù)，剩下要做的就是將其注入到 Next.js 頁面組件的 props 上：

// pages/index.jsconst HomePage = ({ courses }) => { return ( // 盡情使用數(shù)據(jù)吧... )}export async function getStaticProps() { const { getCourses } = require('./../provider') return { props: { courses: await getCourses() } }}export default HomePage打開瀏覽器，進入 http://localhost:3000/ ，可以看到效果如下：

進入 view-source:http://localhost:3000/ ，可以看到網(wǎng)頁的 html 源碼中包含了課程數(shù)據(jù)，解決了 SEO 的問題：

注意：
Next.js 的一些方法是雙端都會運行的，但 getStaticProps() 只會在 server 端運行

自動構(gòu)建與部署

目前為止，開發(fā)工作基本結(jié)束。執(zhí)行 npm run build 命令，網(wǎng)站靜態(tài)文件被打包到了 out/ 目錄下：

執(zhí)行 npm run deploy:hosting 將 out/ 目錄下的文件上傳到「靜態(tài)網(wǎng)站托管」。訪問靜態(tài)網(wǎng)站托管的鏈接：https://jhgjj-0ae4a1.tcloudbaseapp.com/ ，效果如下：

借助成熟的 CI 工具，例如 Travis、Circle 等，可以定時觸發(fā)構(gòu)建工作。如此一來，內(nèi)容和開發(fā)徹底分離。

在構(gòu)建發(fā)布的時候，需要用到 CloudBase CLI 工具。在 CI 工具中，不再使用 cloudbase login 進行交互式輸入登錄，而是使用密鑰登錄： cloudbase login --apiKeyId $TCB_SECRET_ID --apiKey $TCB_SECRET_KEY 。

注意：
前往 云 API 密鑰 獲得 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"}總結(jié)來說，CI 構(gòu)建的流程是：

• tcb 密鑰登錄：npm run login
• 獲取最新數(shù)據(jù)，導出靜態(tài)文件：npm run build
• 發(fā)布到「靜態(tài)網(wǎng)站托管」：npm run deploy:function

如果數(shù)據(jù)需要緊急修改上線，可以在本地或者 CI 工具控制臺，手動觸發(fā)構(gòu)建。

最后

借助云開發(fā) CMS，可以實現(xiàn)評論系統(tǒng)、預約系統(tǒng)、發(fā)布博客等各式各樣的內(nèi)容模板，從而快速搭建網(wǎng)站。在現(xiàn)有開發(fā)體系下，合理運用云開發(fā)，使得人力成本、開發(fā)成本以及運維成本大幅度降低。真正實現(xiàn)前后端一把梭，構(gòu)成“閉環(huán)”。

本文實戰(zhàn)僅是拋磚引玉，涉及了云開發(fā)能力的一部分，還有更多好玩的東西等待你的探索，比如使用云函數(shù)實現(xiàn) SSR、托管后端服務、圖像服務、各端 SDK 等。

探索能力，發(fā)散思路，以更低成本開發(fā)高可用的 web 服務，云開發(fā)絕對是你最好的選擇！

更多資料：

• 云開發(fā)社區(qū)官網(wǎng)
• CMS 內(nèi)容管理系統(tǒng)