官方文档:
验证操作系统:
ubuntu 14.04
# 创建虚拟环境,并激活
virtualenv --python=/usr/bin/python3 /venv_develop
. /venv_develop/bin/activate
#获取最新的Superset代码
cd /venv_develop
git clone https://github.com/airbnb/superset.git
cd superset
# 安装,setup.py的参数要用develop
#视环境不同,可能需要先安装pandas 和 flask
#pip install pandas==0.xx.y
#pip install flask==0.aa.b
#pip install six
python setup.py develop
#从这一步开始,和正常安装superset的步骤相同
#Create an admin user
fabmanager create-admin --app superset
# Initialize the database
superset db upgrade
# Create default roles and permissions
superset init
# Load some data to play with
superset load_examples
# start a dev web server
superset runserver -d
经过上述操作,superset可以正常启动,但是用浏览器登陆后,一直处在loading状态,在调试窗口中可以看到几个404错误:
安装npm,准备javascript环境
npm常用命令 - haidao的专栏 - 博客频道 - CSDN.NET
--npm常用命令
为了解决上述问题,需要安装npm来将分散在不同位置的js、css文件打包(也就是官方文档中说的Using npm to generate bundled files)
官方指导书的操作应该是基于centos的,ubuntu 14.04的操作步骤如下:
curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
apt-get install nodejs
执行npm --version可以看到,是4.50版本,满足指导书中的版本要求
补充说明:
superset/assets目录,是用npm管理的前端文件集合。Flask Appbuilder自带了打包好的jQuery和bootstrap文件,superset/assets目录需要手工处理bundle过程。
在superset/assets目录下安装依赖包
*确保vpn已连接
cd superset/assets
npm install -d
(P.S. 执行过npm install -d之后,尝试启动superset,浏览器登陆之后,仍然有404错误。看来是下面的npm run命令将bundled files拷贝到了superset的static目录下
npm run dev
------------------------------------------------------
---------------------------------------------------
本文在ubuntu环境下,对druid.io可视化工具superset进行了二次开发。由于是个python新手,前端基本不会,踩了一些坑,记录了一下。
superset整个项目用到的一些技术:
- 后端:整个项目的后端是基于Python的
- Flask AppBuilder(鉴权、CRUD、规则)
- Pandas(分析)
- SqlAlchemy(数据库ORM)
- 前端:用到了npm、react、webpack
- d3 (数据可视化)
- nvd3.org(可重用图表)
为了开发,当然也看了相关的东西,相关博客如下:
- Druid.io可视化调研
- Vmware虚拟机安装Ubuntu
- Java程序员学python3.0–入门篇
- Java程序员学python3.0–面向对象篇
- Python-Web学习-Flask框架初探
- Python-Numpy学习
- Python-Pandas学习
开发环境
依赖安装
系统依赖
1 | sudo apt-get install build-essential libssl-dev libffi-dev python-dev python-pip libsasl2-dev libldap2-dev |
node+npm:
1 2 3 4 5 6 7 | sudo apt install nodejs-legacy #安装node sudo apt install npm #安装npm sudo npm install -g cnpm --registry=https://registry.npm.taobao.org #安装淘宝的 cnpm sudo cnpm install npm -g # npm升级到最新版本,-g全局安装 sudo cnpm install -g n # 安装nodejs的版本管理模块n sudo n latest # nodejs版本升级到最新,参数可换:latest/stable/lts/vx.x.x |
这里用cnpm完全是因为npm用国外镜像速度太慢了。
创建管理员
这里pip安装superset,初始化管理员信息,只是为了得到运行需要的~/.superset/superset.db,即得到登录的管理员用户和密码。
1 2 3 4 5 | sudo -H pip install superset -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com sudo fabmanager create-admin --app superset sudo superset db upgrade # Initialize the database sudo superset load_examples # Load some data to play with sudo superset init # Create default roles and permissions |
后续版本如果更新
1 2 3 4 | superset version pip install superset --upgrade -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com superset db upgrade superset init |
在IDE中运行
直接从github上clone下来就行了
1 | git clone https://github.com/airbnb/superset.git |
Pycharm中导入项目后,可能一直卡着出现下面的扫描建索引提示:
1 | Scanning file to index |
需把assets和static里的node_modules排除在项目外,点右键Mark Directory As-Excluded。
编译前端部分
生成依赖包目录node_modules和js压缩的目录dist,页面最后读取的是dist目录下的压缩之后的js文件。npm run build和dev选择其一即可:
1 2 3 4 | cd superset/assets cnpm install -d //生成依赖包目录node_modules,下载依赖 npm run build //执行webpack打包 npm run dev //监听页面变动并自动打包 |
如果出现问题,可以参考文末的问题记录。
npm命令解释
- npm install:安装依赖到node_modules(-g参数安装到全局,/usr/local),先检查当前目录下node_modules有没有模块,没有的话会从registry中下载。参考
- 发出npm install命令
- npm 向 registry 查询模块压缩包的网址
- 下载压缩包,存放在~/.npm目录
- 解压压缩包到当前项目的node_modules目录
- npm run xxx:执行package.json,xxx可以在”scripts”中找到,build、prod之类的都是自己配的。每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。会生成dist目录,即压缩之后的js文件目录。
从package.json可以看到:
1 2 3 | "dev": "NODE_ENV=dev webpack --watch --colors --progress --debug --output-pathinfo --devtool inline-source-map", "prod": "NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js -p --colors --progress", "build": "NODE_ENV=production webpack --colors --progress", |
其中webpack –watch为监听页面变动并自动打包
后端部分
Pycharm虚拟环境
1 | Setting---Project:superset----Project Interperter----Create VirtualEnv |
在ide中,项目superset目录下添加run.py。
1 2 | from superset import app app.run(debug=True, host='0.0.0.0', port=8088) |
然后运行run.py就可以在浏览器127.0.0.1:8088问到。输入刚才初始化数据库时填的管理员用户和密码进行登录。如果使用的是ubuntu虚拟机,宿主机浏览器可以通过:虚拟机ip:8088访问到。
登录之后,superset连接druid之类的一些设置,可以参考我之前的博客Druid.io可视化调研
开发
到这里,每次改完前端代码需要重新进行npm run build,改完后端python代码会自动重新加载服务。
setup
1 2 | cd $SUPERSET_HOME python setup.py install |
代码提交到github
自己尝试着提了两个小feature,在公司的superset已经用上了。提交pr到github,最开始持续集成travis-ci都跑不过,因为我开发用的python2,有些函数在python3都废除了。现在持续集成跑过了,可能是没写测试用例的原因,感觉很难被merge,以后有时间再搞了。各位可以帮忙顶一下这两个,也可以试着用一下~
tableview的timeshift功能
可以满足类似于本周和上周topN变化百分比的需求
druid直方图特性
支持druid实验特性histogram的显示
附:问题记录
pip
pip安装某些依赖,有些速度太慢了
ReadTimeoutError: HTTPSConnectionPool(host=’pypi.python.org’, port=443): Read timed out
改成国内镜像,举个例子:
1 | sudo pip install superset==0.17.0 -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com |
或者建个文件~/.pip/pip.conf
1 2 3 4 5 | [global] index-url = http://mirrors.aliyun.com/pypi/simple [install] use-mirrors = true mirrors = http://mirrors.aliyun.com/pypi |
npm
npm如果慢的话
1 | --registry=https://registry.npm.taobao.org |
或者编辑~/.npmrc,加入
1 | registry = https://registry.npm.taobao.org |
或者安装cnpm,后面的npm命令可以改成cnpm:
1 | sudo npm install -g cnpm --registry=https://registry.npm.taobao.org |
前端编译问题记录
问题1
先卡在78%,然后报错:
1 2 3 | 78% additional chunk assetsKilled Exit status 137 |
这个137错误应该是是虚拟机内存不够,调大虚拟机内存。我的问题是之前开着Pycharm编译前端,把Pycharm关掉就好了。
问题2
先卡在78%,然后报错。
1 2 3 | ERROR in ./~/.15.3.2@react-dom/index.js Module not found: Error: Cannot resolve module 'react/lib/ReactDOM' in /root/PycharmProjects/superset_2017/superset/assets/node_modules/.15.3.2@react-dom @ ./~/.15.3.2@react-dom/index.js 3:17-46 |
办法1
报错是用了两种版本的react,如果只把他缺少的ReactDOM从0.15.3复制过去,又会有新的错误提示少了东西。
1 2 3 4 5 6 7 | ERROR in ./~/.15.4.2@react/lib/ReactDOM.js Module not found: Error: Cannot resolve 'file' or 'directory' ./ReactDOMComponentTree in /root/PycharmProjects/superset_2017/superset/assets/node_modules/.15.4.2@react/lib @ ./~/.15.4.2@react/lib/ReactDOM.js 16:28-62 //此处省略一万字 ERROR in ./~/.15.4.2@react/lib/ReactDOM.js Module not found: Error: Cannot resolve 'file' or 'directory' ./renderSubtreeIntoContainer in /root/PycharmProjects/superset_2017/superset/assets/node_modules/.15.4.2@react/lib @ ./~/.15.4.2@react/lib/ReactDOM.js 25:33-72 |
先把node_modules/react的lib删掉,然后把.15.3.2\@react的lib拷贝过去
1 2 | rm -rf node_modules/react/lib cp -r node_modules/.15.3.2\@react/lib node_modules/react |
办法2
这样会缺少前端的组件,改成直接从pip安装好的superset中拷贝下来。static/assets只是一个软连接指向assets
1 2 | # 先删除assets再拷贝 cp -r /usr/local/lib/python2.7/dist-packages/superset/static/assets/ /home/fyq/coding/PycharmProjects/superset/assets |
如果需要修改前端代码,肯定还是只能用方法1,需要重新编译
感谢
开发环境搭建折腾了我很久,特别感谢superset群的月光,共同努力才搭建起来开发环境。
还有公司的前端柱子,给我科普了一下前端,解决了前端的bug。