官方文档：
验证操作系统：
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。
2476
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
