オープンソースの背景

ローコードビジュアルコミュニティは、 Dooringローコードプラットフォームの設計開発中に私が開発した、ローコードコンテンツを共有するためのナレッジコミュニティです。コンテンツ側では、 SEO対策に優れたSSR技術を用いてページをレンダリングしています。一方、バックエンドサービスはNode.jsを用いて実装されており、コンテンツ側とサーバー側が同一になっています。これは「アイソモーフィック・コンテンツサービス」と呼ばれる概念です。管理側では、最も人気のあるフロントエンド技術であるReactフックを採用しており、技術者だけでなく非技術者でも、簡単な操作で独自のCMSシステムを簡単に導入できます。

オープンソースの精神に基づき、このCMSシステムをオープンソース化し、より多くの技術初心者や非技術者が簡単に独自の Web サイトを展開できるようにしました。

次に、オープンソースのlowcode-CMSシステムの技術的な実装を技術的な観点から共有し、このすぐに使用できるCMSシステムをローカルで実行および展開する方法についても説明します。

システム設計アーキテクチャ

次に、管理側、コンテンツ側、サーバー側の技術アーキテクチャについて詳しく紹介します。

コンテンツ側のアーキテクチャ設計

コンテンツサイドは主に個人または企業のコンテンツ情報を表示するために使用され、基本的にはポータルサイトです。SEO対策として、 HTMLのレンダリングにはテンプレートエンジン（具体的にはkoa-views + pugモード）を使用しました。具体的なインターフェースは以下の通りです。

もちろん、これはホームページモジュールに過ぎません。他にも業界別製品、ベストプラクティス、動画、メモなどのモジュールがありますが、ここでは詳しくは説明しません。プログラミングの知識があれば、独自のモジュールページをカスタマイズすることも可能です。次に、具体的な技術的実装を見ていきましょう。

各レンダリングレイヤーの具体的な実装は、GitHubのサーバーのviewsディレクトリで確認できます。ここでは、 lowcode-cmsで構築したSSRモードを共有します。

1. PUGサポートを設定する

import koa from "koa"; import views from "koa-views"; // ... (此处省略服务端自治的部分代码) // 挂载路由glob.sync(`${config.routerPath}/*.js`).forEach((item) => { require(item).default(router, config.API_VERSION_PATH); }); //使用模版引擎app.use(views(resolve(__dirname, "./views"), { extension: "pug" })); app.use(router.routes()).use(router.allowedMethods());

2. SSRルーティングデータの直接出力

この部分では主に、 PUG が消費するためのユーザーによるリクエストに基づいて、サーバー側でデータをフォーマットします。

 /** * 文章路由* @param {*} router * @param {*} apiPath */ const pageRenderRouter = (router) => { // api路径const api = { // 渲染首页index: "/", // 最佳实践列表bestPractice: "/best-practice", product: "/product", video: "/video", note: "/note", login: "/login", // 其他渲染路由... }; // 内容端导航配置const nav = [ { id: "0", title: "最佳实践", link: "/best-practice" }, { id: "1", title: "行业产品", link: "/product" }, { id: "3", title: "视频", link: "/video" }, { id: "4", title: "手记", link: "/note" }, { id: "5", title: "关于", link: "/about" }, ] const copyright = "版权所有@lowcode可视化社区" // 登录router.get(api.login, async (ctx) => { await ctx.render("login", { url: api.login, title: "登录", description: "新用户?", href: "去注册", firstInput: "邮箱", twoInput: "密码", btnText: "登录", logoText: "Dooring低代码社区", }); }); // 渲染首页router.get(api.index, async (ctx) => { const filePath = `${config.publicPath}/db/homeConfig.json`; const articlesPath = `${config.publicPath}/db/article_index.json`; const productsPath = `${config.publicPath}/db/product_index.json`; const videosPath = `${config.publicPath}/db/video_index.json`; const homeConfig = RF(filePath); const articles = RF(articlesPath); const products = RF(productsPath); const videos = RF(videosPath); await ctx.render("index", { nav, articles: articles.filter(v => v.review === 1).slice(0, 6), products: products.filter(v => v.review === 1).slice(0, 6), videos: videos.filter(v => v.review === 1).slice(0, 6), copyright, ...homeConfig }); // 统计访问量const viewPath = `${config.publicPath}/db/views.json`; const views = RF(viewPath); WF(viewPath, {...views, home: views.home + 1}); }); // 渲染文章详情页router.get(api.articleDetail, async (ctx) => { const id = ctx.query.fid; const articlePath = `${config.publicPath}/db/articles/${id}.json`; const commentPath = `${config.publicPath}/db/comments/${id}.json`; const article = RF(articlePath) || {}; const comments = RF(commentPath) || {}; comments.views = comments.views + 1; await ctx.render("article_detail", { nav, viewTitle: article.title, topImg: article.img, authorInfo: { name: article.author, date: formatTime(article.ct, "-") }, cate: article.cate, val: article.type ? marked(article.val) : article.val, commentInfoList: comments.comments || [], flover: comments.flover, views: comments.views || 0, copyright, }); WF(commentPath, comments); }); // 其他页面渲染服务逻辑... }); }; export default pageRenderRouter;

3. テンプレートの消費

以下に、参考までに私が書いたPugページの例を示します。

興味のある方は、具体的な実装をこちらで参照できます: https://github.com/MrXujiang/lowcode-cms

サーバーサイドアーキテクチャ設計

サーバーは基本的に 2 つの主な機能を実装します。

• コンテンツサイドレンダリング（SSR）
• バックエンドAPIとサードパーティインターフェースサービスの統合

サーバーサイドについては、共通バックエンドサービスMVCパターンを参考に、 koa2をベースにしたシンプルなサーバーサイドMVCモデルを構築しました。以下はサーバーサイドのコードディレクトリ構造です。

実装されている主なコアモジュールは次のとおりです。

• 静的リソースサーバー
• WeChat共有、CDNアップロード、その他のサードパーティサービスモジュール
• APIルーティング
• ミドルウェアモジュール
• リソースアップロードモジュール
• ユーザー権限モジュール
• SSRサービスモジュール

設定に興味がある場合は、 GitHubの特定の実装コードを参照してください: https://github.com/MrXujiang/lowcode-cms

管理システムアーキテクチャ設計

管理インターフェースはUmi + React + Ant Design 4.0を使用して実装されており、リッチテキストエディタ、 Markdownエディタ、ファイルアップロードモジュールなど、多くの成熟したプラグインモジュールも含まれています。ソースコードを研究することで、大きなメリットが得られます。

上の画像は編集モジュールです。Markdownのリアルタイムプレビューとリッチテキスト編集用のモジュールをカプセル化しているので、すぐにお使いいただけます。

ローカルで実行

1. 目次

• サーバーはNode.jsベースのサーバーで、起動後はコンテンツSSR側であるポート3000に直接アクセスできます。
• 管理 CMS 管理バックエンドは、ユーザー管理、コンテンツ モデレーション、コンテンツ公開、データ統計などのモジュールを統合します。

箱から出してすぐに使えます！

2. ローカルスタートアップ

1. サーバー側

# 进入server目录cd server # 安装依赖yarn # 服务端启动yarn start

注: Windows システムの場合は、 `yarn start:win`を実行できます。

2. 管理端末

# 进入admin目录cd admin # 安装依赖yarn # 启动yarn start

アカウントを初期化: super_123 、パスワード: zxzk_123

3. コンテンツ側

ポート3000にアクセスするだけです。

展開とリリース

Node.jsのサービスプロセスの管理には、 pm2の使用をお勧めします。サーバーサイドアプリケーションをサーバーにアップロードし、必要な依存関係をインストールして、 pm2で起動するだけです。

 pm2 start server/dist

PM2関連の問題の詳細については、以前の記事をご覧ください。

github : https://github.com/MrXijiang/lowcode-cms