河图, 是一个 低代码 平台, 通过可视化界面, 快速生成各种后台页面, 极大减少开发成本

 

河图

河图, 是一个 低代码 平台, 通过可视化界面, 快速生成各种后台页面, 极大减少开发成本。

河图是贝壳找房内部孵化项目, 目前已在公司大多数业务线落地, 完成200+项目, 1500+页面。

 

✨ 特性

• 🚴‍♀️ 操作简单、功能强大的可视化编辑器
• 📦 开箱即用、高质量后台管理系统模版
• ⚙️ 开发流程全部线上化，节省沟通、调试、运维成本
• 🛡 使用 React、TypeScript、nodejs、express 开发

🖥 兼容环境

• 现代浏览器、IE11以上。

🔗 链接

• 文档
• 首页

🍼 开发前准备

1. 一台云开发机

用于代码部署

2. 一个邮箱账号

需要开启SMTP服务, 用于发送验证码

3. MySQL数据库

可选择以下两种方式,部署MySQL服务

• 手动部署MySQL数据库
• 购买MySQL云服务

将server/open_hetu.sql文件, 导入到数据库

⚒ 搭建服务

第一步 创建配置文件

在/server/src目录下创建system_config.ini文件, 配置内容如下

[ssh]
ssh_ip = ******     // 云服务器ip 
ssh_user = ******   // 云服务器登录账号 

[client]
cdn_host = ******   // 静态资源CDN, 例如`cdn.beike.plus`

[server]
port = 9536         // node服务启动端口

[mysql]             // mysql配置
host = ****
port = ****
user = ****
password = ****
database = ****

[email]
host = smtp.163.com // SMTP服务域名
port = 364          // 连接端口
user = ****         // 公共邮箱账号
pass = ****         // 授权密码

第二步 部署组件库和文档

• /plugin 目录下的内容为组件库
• /plugin/site 目录下的内容为组件库文档

1. 打包部署

在云服务器上创建文件夹, 用于放静态资源

cd /data/www/

# 创建文件夹, 用于存放静态资源
mkdir hetu-client hetu-doc hetu-plugin hetu-server

# 创建配置文件, 内容见上一步
touch system_config.ini

2. 配置 nginx

如果没有安装nginx, 需要先 安装nginx

# 进入nginx配置目录
cd /etc/nginx/conf.d/

# 创建配置文件
touch hetu-cdn.conf hetu-doc.conf hetu-server.conf

申请3个域名, 例如 河图node服务xxx.com、cdn静态资源服务cdn.xxx.com、文档服务doc.xxx.com, 将这3个域名分别指向前面申请的云开发机ip, 配置如下:

hetu-cdn.conf 配置

server {
    listen      80;
    server_name cdn.xxx.com;
    root  /data/www/;

    gzip                    on;
    gzip_http_version       1.1;
    gzip_buffers            256 64k;
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_proxied            expired no-cache no-store private auth;
    gzip_types              text/plain application/javascript application/x-javascript t
ext/css application/xml text/javascript application/vnd.ms-fontobject font/ttf font/open
type font/x-woff;

    gzip_disable "MSIE 6";

    if ( $request_method !~ GET|POST|HEAD ) {
        return 403;
    }

    location ^~ /hetu-plugin/ {
        add_header 'Access-Control-Allow-Origin'  '*';
        alias /data/www/hetu-plugin/;
    }

    location ^~ /hetu-client/ {
        add_header 'Access-Control-Allow-Origin'  '*';
        alias /data/www/hetu-client/;
    }
}

hetu-doc.conf 配置

server {
    listen      80;
    server_name doc.xxx.com;
    root  /data/www/hetu-doc;

    gzip                    on;
    gzip_http_version       1.1;
    gzip_buffers            256 64k;
    gzip_comp_level         5;
    gzip_min_length         1000;
    gzip_proxied            expired no-cache no-store private auth;
    gzip_types              text/plain application/javascript application/x-javascript t
ext/css application/xml text/javascript application/vnd.ms-fontobject font/ttf font/open
type font/x-woff;

    gzip_disable "MSIE 6";

    if ( $request_method !~ GET|POST|HEAD ) {
        return 403;
    }

    location / {
        index index.html index.htm;
        if (!-f $request_filename) {
            rewrite ^/(.*)$ /index.html?/$1 last;
            break;
        }
    }
}

hetu-server.conf

server {
    listen      80;
    server_name xxx.com;

    location / {
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://127.0.0.1:9536;
    }
}

重启nginx

# 检测配置文件是否正确
nginx -t

# 重启nginx
nginx -s reload

• 打开 http://doc.xxx.com 预览文档服务
• 打开 http://cdn.xxx.com/hetu-plugin/manifest.json 预览静态资源服务

第三步 安装项目依赖

# server
cd ./server && npm install

# client
cd ../client && npm install

第四步 开始开发

# client
cd ./client && npm start
# server
cd server && npm run dev

打开127.0.0.1:1234预览

第五步 打包部署

# 打包 && 部署client 
sh online_client.sh

# 打包 && 部署server
sh online_server.sh

第六步 在云服务器上启动node服务

在centos上安装node.js

EPEL（Extra Packages for Enterprise Linux）企业版Linux的额外软件包，是Fedora小组维护的一个软件仓库项目，为RHEL/CentOS提供他们默认不提供的软件包。

# 先确认系统是否已安装epel-release包
yum info epel-release 

# 若已安装, 则跳过
sudo yum install epel-release

# 安装nodejs
sudo yum install nodejs

# 查看node版本
node -v

使用pm2启动node服务

pm2是node进程管理工具, 利用它可以简化很多node应用管理的繁琐任务，如性能监控、自动重启、负载均衡等。

# 全局安装
sudo npm i -g pm2

# 启动一个名为hetu的node服务, --watch意味着文件变化, 就会重新启动服务
pm2 start dist/app.js --watch --name 'hetu'

# 设置开机启动
pm2 start up

# 保存当前进程状态
pm2 save

# 查看当前node服务进程
pm2 list

版本记录

CHANGELOG

问题咨询

• QQ群 【河图开源交流】 1046702822

主要贡献者

Name	Avatar	Name	Avatar	Name	Avatar	Name	Avatar	Name	Avatar
好爸爸		嘻老师		姚泽源		liaoqixin		般若超

License

MIT

Copyright(c) 2020 Lianjia, Inc. All Rights Reserved