dremio ui 处理上部分直接依赖了location pathname 对于使用默认的/ 的proxy 是没有问题的,但是很多时候我们需要自己配置一个proxy path ,以下简单说明下问题,以及解决方法
环境准备
- docker-compose
version: "3"
services:
nginx:
image: nginx:alpine
ports:
- "80:80"
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
dremio:
image: dremio/dremio-oss:25.0
volumes:
- ./ui/dremio-dac-ui-25.0.0-202404051521110861-ed9515a8.jar:/opt/dremio/jars/dremio-dac-ui-25.0.0-202404051521110861-ed9515a8.jar
ports:
- 9047:9047
- nginx.conf
简单说明: 添加了vlake 路径,因为dremio 对于资源的处理使用了绝对路径,所以还配置了资源的proxy,还有api 接口的,因为重写了location 对于login 部分也进行了处理,确保使用的资源是dremio 的页面
worker_processes 1;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
sendfile on;
keepalive_timeout 65;
gzip on;
real_ip_header X-Forwarded-For;
real_ip_recursive on;
server {
listen 80;
server_name localhost;
charset utf-8;
root /usr/share/nginx/html;
location = /vlake/ {
proxy_pass http://dremio:9047/index.html;
}
location = /vlake/index.html {
proxy_pass http://dremio:9047;
}
location /login {
proxy_pass http://dremio:9047/index.html;
}
location ^~ /static/ {
proxy_pass http://dremio:9047;
}
location /manifest.webmanifest {
return 200;
}
location /apiv2/ {
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_pass http://dremio:9047/apiv2/;
}
location /api/v3/ {
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_pass http://dremio:9047/api/v3/;
}
location ^~ /jobs/ {
proxy_pass http://dremio:9047/index.html;
}
# location ^~ /vlake/new_query/ {
# rewrite ^/(.*)/$ /vlake/$1/index.html break;
# proxy_pass http://dremio:9047;
# }
# location ^~ /new_query/ {
# rewrite ^/(.*)/$ /vlake/$1/index.html break;
# proxy_pass http://dremio:9047;
# }
location ^~ /vs/ {
proxy_pass http://dremio:9047/vs/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
- ui 部分处理
修改了index.html 进行history.pushState 处理改写location
<script >
history.pushState({}, 'default', '/');
</script>
</body>
</html>
内部说明
以上设计已经简单说明了下,dremio 在处理部分ui 查询的时候直接使用了location (实际上不是很好,应该是基于参数)造成自定义path 就会有路径处理上的问题
- performLoadDataset 中loadDataset 的处理
此处就依赖了path,如果添加了其他路径解析上就不对了
const loc = rmProjectBase(location.pathname);
const pathnameParts = loc.split("/");
const parentFullPath = decodeURIComponent(
constructFullPath([pathnameParts[2]]) + "." + pathnameParts[3]
);
let customReference = {};
- 临时解决方法
可以通过修改index.html 对于history.pushState 进行重写,这样url 地址会变为dremio 默认的root 模式,同时不会进行页面刷新(实际上是触发页面的请求)
参考修改,可以结合ui 部分,为了方便使用了jar 修改工具,而不是重新编译
访问效果
- 打开
http://localhost/vlake/
会有进行一次登陆的重定向操作,后续的操作都是基于静态资源的以及proxy 的接口的处理,实际可以自己参考我github 的部署进行体验
说明
以上方案,比较适合的标准版的dremio,对于其他进行了ui修改的不能保障
参考资料
dac/ui/src/sagas/performLoadDataset.js
https://github.com/rongfengliang/nginx-dremio-proxy