superset开发环境搭建

本文在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学习

开发环境

依赖安装

系统依赖

sudo apt-get install build-essential libssl-dev libffi-dev python-dev python-pip libsasl2-dev libldap2-dev

node+npm:

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，即得到登录的管理员用户和密码。

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

后续版本如果更新

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下来就行了

git clone https://github.com/airbnb/superset.git

Pycharm中导入项目后，可能一直卡着出现下面的扫描建索引提示：

Scanning file to index

需把assets和static里的node_modules排除在项目外，点右键Mark Directory As-Excluded。

编译前端部分

生成依赖包目录node_modules和js压缩的目录dist，页面最后读取的是dist目录下的压缩之后的js文件。npm run build和dev选择其一即可：

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可以看到：

"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虚拟环境

Setting---Project:superset----Project Interperter----Create VirtualEnv

在ide中，项目superset目录下添加run.py。

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

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

改成国内镜像，举个例子：

sudo pip install superset==0.17.0 -i http://mirrors.aliyun.com/pypi/simple --trusted-host mirrors.aliyun.com

或者建个文件~/.pip/pip.conf

[global]
index-url = http://mirrors.aliyun.com/pypi/simple
[install]
use-mirrors = true
mirrors = http://mirrors.aliyun.com/pypi

npm

npm如果慢的话

--registry=https://registry.npm.taobao.org

或者编辑~/.npmrc,加入

registry = https://registry.npm.taobao.org

或者安装cnpm，后面的npm命令可以改成cnpm：

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

前端编译问题记录

问题1

先卡在78%，然后报错：

78% additional chunk assetsKilled

Exit status 137

这个137错误应该是是虚拟机内存不够，调大虚拟机内存。我的问题是之前开着Pycharm编译前端，把Pycharm关掉就好了。

问题2

先卡在78%，然后报错。

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复制过去，又会有新的错误提示少了东西。

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拷贝过去

rm -rf node_modules/react/lib 
cp -r node_modules/.15.3.2\@react/lib node_modules/react

办法2

这样会缺少前端的组件,改成直接从pip安装好的superset中拷贝下来。static/assets只是一个软连接指向assets

# 先删除assets再拷贝
cp -r /usr/local/lib/python2.7/dist-packages/superset/static/assets/ /home/fyq/coding/PycharmProjects/superset/assets

如果需要修改前端代码，肯定还是只能用方法1，需要重新编译

感谢

开发环境搭建折腾了我很久，特别感谢superset群的月光，共同努力才搭建起来开发环境。

还有公司的前端柱子，给我科普了一下前端，解决了前端的bug。