• Stars
    star
    218
  • Rank 181,805 (Top 4 %)
  • Language
    JavaScript
  • Created about 5 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

基于node的cms系统, 后端采用node+koa+redis,并通过本人封装的redis库实现数据操作,前端采用vue+ts+vuex开发,后台管理系统采用react全家桶开发

XPCMS

XPCMS

XPCMS是一个开源的CMS系统,服务端采用node+koa+redis+json-schema实现.view层管理端使用vue生态,客户端使用react生态。架构如下:

安装

server,client_page,media这三端都可以采用如下安装方式安装依赖:

npm install
// or yarn

开发环境启动

1.安装redis并启动redis服务

具体细节请参考我的文章基于nodeJS从0到1实现一个CMS全栈项目的服务端启动细节

2.启动server后台服务

npm start

3.启动管理后台页面

npm run serve
// or yarn serve

4.启动前台门户页面

npm start

生产环境部署方案

1.打包服务端代码

// server
npm run build

2.打包管理端web代码

// client_page
npm run build

3.打包门户网站代码

// media
npm run build

4.服务器部署

我们可以使用代码管理工具如gitlab或者公司私有仓库管理代码,然后提交到服务器上,如果对git/svn部署不太了解,我们可以将server目录整体发送到web服务器中,安装相关依赖并运行,但这种方式不推荐。

1.pm2做服务端持久化

假设我们服务器上安装好了redis并启动了服务,我们可以使用pm2去做node服务崩溃自动重启:

npm install -g pm2
# 启动node程序
pm2 dist

更多细节我会持续完善。

nginx做静态代理服务器

这里需要先在web服务器中安装nginx,安装过程也很简单,可以去官网查看。 这里给出如何用nginx代理多网站的方案:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   /www/XPXMS/server/static/cmsClient; 
            index  index.html index.htm;
            # 在生产环境vue使用history router的配置
	          try_files $uri $uri/ /index.html;
        }

        error_page  404        /www/XPXMS/server/static/adminManage/index.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        # api的请求代理到node服务器
        location /api {
            proxy_pass http://127.0.0.1:3000;
        }

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        location ~ \.php$ {
            root           html;
            fastcgi_pass   127.0.0.1:9000;
            fastcgi_index  index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root/$fastcgi_script_name;
            include        fastcgi_params;
        }

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    server {
        listen       8000;
       # listen       somename:8080;
        server_name  localhost;

        location / {
            root  /www/XPXMS/server/static/adminManage;
            index  index.html index.htm;
            # 在生产环境react使用history router的配置
	          try_files $uri $uri/ /index.html;
        }

        location /api {
            proxy_pass http://127.0.0.1:3000;
        }

        location /uploads {
            root /www/XPXMS/server/public/;
        }
    }


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

License

MIT http://rem.mit-license.org

More Repositories

1

h5-Dooring

H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
JavaScript
9,019
star
2

frontend-developer-roadmap

前端学习之路, 记录前端小白成长历程, 学习总结, 工具汇总, 打造开箱即用的学习体验
584
star
3

next-admin

An out-of-the-box admin based on NextJS and AntDesign | 一款基于nextjs+antd5.0的中后台系统
TypeScript
478
star
4

pc-Dooring

LowCode, PC Page Maker, PC Editor. Make PC as easy as building blocks. | 让网页制作像搭积木一样简单, 轻松搭建PC页面, Web网站, PC端网站. lowcode(low-code)可视化搭建平台
TypeScript
474
star
5

v6.dooring.public

可视化大屏解决方案, 提供一套可视化编辑引擎, 助力个人或企业轻松定制自己的可视化大屏应用.
TypeScript
454
star
6

xijs

A business - oriented scene Js Library
TypeScript
342
star
7

react-slider-vertify

基于react实现的滑动验证码组件
JavaScript
189
star
8

Nocode-Wep

一款轻量WPS替代品,面向AI,面向未来
TypeScript
176
star
9

rc-drag

An React Component for drag and resize, and supports drag and zoom on mobile devices. | 基于react的轻量级拖拽缩放组件, 且支持移动设备拖拽缩放.
JavaScript
100
star
10

simpleCMS

simpleCMS是一款开源cms系统, 主要为个人/团队快速开发博客或者知识共享平台, 类似于hexo, worldpress, 但是他们往往需要复杂的搭建过程, 我们将复杂度降到最低, 并且有详细的部署教程, 你只需要有一台服务器, 就能轻松拥有一个属于你的博客平台.
TypeScript
80
star
11

xu_ui

基于react的轻量级可扩展组件库
JavaScript
77
star
12

lowcode-cms

基于dooring低代码社区的开源cms系统
JavaScript
75
star
13

vue-slider-vertify

基于vue3的滑动验证码组件
Vue
57
star
14

vue3-drag-demo

基于开源生态的拖拽搭建demo, 支持参考线, 全选合并, 吸附以及撤销重做等
Vue
50
star
15

H5-Stream

基于自然流布局的H5-dooring可视化拖拽搭建平台设计方案
TypeScript
44
star
16

crawel

基于Apify+node+react搭建的有点意思的爬虫平台
JavaScript
42
star
17

react-sign

简单轻量的电子签名组件, 轻松定制可扩展的电子签名.
TypeScript
37
star
18

openCoder

基于程序员的项目,简历,blog管理平台
JavaScript
33
star
19

react-cropper-pro

Lightweight image upload cropping component based on react
TypeScript
33
star
20

t-nav

开箱即用的开源导航项目
TypeScript
32
star
21

react-flow

react-flow中文文档.
TypeScript
31
star
22

best-cps

一套前端多包管理最佳实践,一套前端基础工程规范,一套前端效能组件实践
TypeScript
28
star
23

react-loading

Load animation component library based on react.
Less
24
star
24

timeout_rollup

使用rollup打包开源库并发布到npm
JavaScript
24
star
25

blink

基于react的css故障艺术库
Less
22
star
26

Xquery

实现类似jquery API风格的轻量级可扩展的原生js框架
JavaScript
22
star
27

webpack4.0_cli

基于webpack4.0搭建的脚手架(支持react/vue/typescript/es6+/jquery+less/scss)
JavaScript
20
star
28

WebComponent

基于Web Component实现的原生组件demo
JavaScript
20
star
29

fetchImg

一款提取网页图片数据的浏览器插件
JavaScript
20
star
30

xui

一个基于vue的轻量级可扩展组件库
JavaScript
19
star
31

FP

基于react/vue的表单定制管理平台
JavaScript
16
star
32

smart-node-tpl

支持最新es语法的nodejs开发环境模版,助力于快速搭建nodejs项目
JavaScript
16
star
33

H5-

H5游戏算法和游戏清单
JavaScript
14
star
34

H5-Dooring-Website

基于H5编辑器H5-Dooring开发的一站式宣传网站模版
CSS
14
star
35

h5-dooring-electron-demo

基于electron打包的H5-Dooring编辑器桌面端
JavaScript
14
star
36

xjFile

原生轻量级js文件上传预览组件
JavaScript
13
star
37

fileServer

基于node开发的免费文件服务器
JavaScript
12
star
38

gulp4_multi_pages

gulp4打包多页面应用
JavaScript
12
star
39

doc.v6.dooring

h5-dooring和v6.dooring可视化搭建产品技术文档,答疑,和低代码组件生态
TypeScript
11
star
40

redux_OA

基于react+redux+redux-thunk+xui开发的todoOA管理平台
JavaScript
11
star
41

xdb

基于indexedDB API二次封装的支持过期时间,且采用promise封装的存储库
TypeScript
11
star
42

lowcode_news_mini

lowcode资讯小程序
JavaScript
10
star
43

flowmix

一款流程可视化驱动的AI搭建引擎
10
star
44

ticker

一个基于react的轻量级刻度线可视化组件
TypeScript
9
star
45

vue_muti_cli

基于cli3的集成vuex,element/antd/mint的单/多页面脚手架
JavaScript
9
star
46

angularDemo

基于angular8搭建旅游路线项目
TypeScript
7
star
47

wx-friendcircle

一款基于antd-mobile开发的H5微信朋友圈应用,支持发布朋友圈, 图片无死角查看, 图片动态布局, 内容/图片懒加载等功能
JavaScript
6
star
48

dao.js

基于localStorage封装的可以设置过期时间的库,并可结合vuex/redux做数据持久化
JavaScript
5
star
49

gulp_for_buge

JavaScript
4
star
50

MrXujiang.github.io

coding for your eyes
HTML
4
star
51

dataAndMethods

数据结构与算法
JavaScript
4
star
52

js_tool

前端工具集,方便在前端开发中快速开发应用,拿来即用,从此不再996
JavaScript
3
star
53

canvas_card

HTML
3
star
54

gulp_for_spa

CSS
3
star
55

t_work

Vue
3
star
56

gulp_for_ts

基于gulp的ts构建开发脚手架
JavaScript
3
star
57

imgGall

HTML
2
star
58

flowmix-flowsome

Useful resources for creating apps and working with flow.
2
star
59

e-shop

HTML
2
star
60

zxzk

CSS
2
star
61

m-zxzk

HTML
2
star
62

test

HTML
2
star
63

jalschool

HTML
2
star
64

ts-react

基于typescript+react+redux+react-router的后台项目构建
JavaScript
2
star
65

wxgzh

微信公众号开发
JavaScript
2
star
66

zxzk_service

CSS
2
star
67

ios_H5

HTML
2
star
68

job100

HTML
2
star
69

cssFrame

css相关开源项目汇总
1
star
70

mysite

CSS
1
star
71

qrcode_maker

一款开源的基于qrcode的二维码定制平台
1
star
72

MrXujiang

Committed to front-end engineering, visual direction of research. (WeChat: Mr_xuxiaoxi)
1
star
73

xu-pro-lerna

lerna练习
TypeScript
1
star
74

vblog

小型博客网站模板
JavaScript
1
star