当前位置: 首页 > news >正文

html+js+clickhouse环境搭建

  • 实验背景:
    我目前有一台服务器A,和一台主机B,两台设备属于同一局域网,相互之间可以通讯。服务器A中部署着clickhouse,我在主机B中想直接通过javascript代码访问服务器中的clickhouse数据库并获取数据。
    • ClickHouse 服务器:192.168.0.10(局域网 IP)
    • 运行在 Docker,端口默认:8123(HTTP 端口)
    • 浏览器前端页面运行在:192.168.0.11 的某个网页中
    • 你希望用 JS 代码直接执行 SQL 查询,比如获取某个用户轨迹
  • 环境说明:
    • 服务器A(ip:192.168.0.10):通过docker的形式部署了一个clickhouse容器,并开放其8123端口。用户名为Micheal,密码为空。
    • 主机B(ip:192.168.0.11):与A属于同一局域网,可以用DBeaver连接到A中部署的Clickhouse数据库。

操作步骤

step1:校验性工作

  • 校验1:Clickhouse的HTTP接口是否可访问。
    在浏览器中访问:http://192.168.0.10:8123,看到 Ok.即可
    或者在命令行中输入:curl http://192.168.0.10:8123,看到 Ok.即可

    意外情况1:如果A中访问不了,则可能是容器没开启,或者端口号未映射到宿主机上。
    意外情况2:如果A中访问正常,B中访问异常,则可能有以下3个原因:
    1)主机B用了梯子,导致地址与A不在一个局域网了。
    2)Docker没正确映射端口(去核查docker容器,输入:docker ps,查看是否有类似行0.0.0.0:8123->8123/tcp或者192.168.0.10:8123->8123/tcp,如果是127.0.0.1:8123->8123/tcp那么这说明端口只绑定在本地回环地址,局域网访问不了!)
    3)防火墙拦截了请求。(去A中开放它:sudo ufw allow 8123)

  • 校验2: 测试 SQL 查询接口
    curl -X POST "http://192.168.0.10:8123/" --data "SELECT 1"
    应该输出为:1
    如果不通,可能原因:
    问题解决方法
    没有暴露端口启动容器时加上 -p 8123:8123
    防火墙阻止了端口sudo ufw allow 8123 或检查安全组设置
    ClickHouse 没启动或报错docker logs clickhouse 查看日志
    宿主机用的是私有 IP 被隔离确保局域网中其他机器能访问 192.168.0.10

step2:通过nginx设置反向代理(目的:希望前端 JS 通过访问 http://192.168.0.10/clickhouse/ 获取数据)

在A中配置nginx代理

  • 1)创建nginx配置文件(用于支持CORS)

    # 在服务器的某个目录(比如 /xxx/xxx/xxx)中创建:
    mkdir -p /xxx/conf.d# 创建配置文件 clickhouse.conf:
    vim /xxx/conf.d/clickhouse.conf
    

    在clickhouse.conf文件中写入如下内容:(注意,改成你自己的服务器IP地址)

    server {listen 80;server_name localhost;location /clickhouse/ {proxy_pass http://192.168.0.10:8123/;  # 你的服务器IP地址# 屏蔽后端 clickhouse 自带的 CORS 头,避免重复proxy_hide_header Access-Control-Allow-Origin;proxy_hide_header Access-Control-Allow-Methods;proxy_hide_header Access-Control-Allow-Headers;# OPTIONS 预检请求if ($request_method = OPTIONS) {add_header Access-Control-Allow-Origin *;add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";add_header Access-Control-Allow-Headers "Content-Type, Authorization";add_header Access-Control-Max-Age 86400;add_header Content-Length 0;add_header Content-Type text/plain;return 204;}# 正常请求添加 CORS 头add_header Access-Control-Allow-Origin * always;add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always;add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;}
    }
    
  • 2)创建nginx容器,将A中的80端口映射

    docker run -d \--name nginx-clickhouse \-p 80:80 \-v /xxx/conf.d:/etc/nginx/conf.d \nginx
    

    说明:
    -v 把你刚写的配置文件挂载到 nginx 中
    -p 80:80 把 nginx 容器的 80 端口暴露出来

    • 也可以先创建docker容器,然后再创建容器中的配置文件(/etc/nginx/conf.d/clickhouse.conf),并进行修改。
    • 改完以后记得重启nginx(sudo nginx -s reload)或者重启docker容器(docker restart nginx-clickhouse
  • 3)在命令行测试nginx 是否转发成功

    • 测试1)测试 CORS 头是否返回
      再次使用 curl 或浏览器开发者工具测试 CORS 配置是否生效:

      curl -X OPTIONS http://192.168.0.10/clickhouse/ -i
      

      你应该看到类似以下响应头:

      HTTP/1.1 204 No Content
      Server: nginx/1.19.3
      Date: <timestamp>
      Access-Control-Allow-Origin: *
      Access-Control-Allow-Methods: GET, POST, OPTIONS
      Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With
      Access-Control-Max-Age: 1728000
      
    • 测试2)测试代理是否生效
      curl -X POST "http://192.168.0.10/clickhouse/" --data "SELECT 1"
      应返回:1。说明代理和 ClickHouse 通了。

step3: 编写测试代码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>ClickHouse SQL 查询页面</title><style>body { font-family: sans-serif; padding: 2em; }textarea { width: 100%; height: 100px; }pre { background: #f4f4f4; padding: 1em; white-space: pre-wrap; }</style>
</head>
<body><h2>ClickHouse 查询测试</h2><textarea id="sql">SELECT now(), version()</textarea><br><br><button onclick="query()">执行 SQL</button><h3>结果:</h3><pre id="output">点击按钮开始查询...</pre><script>async function query() {const sql = document.getElementById('sql').value;const output = document.getElementById('output');output.textContent = '查询中...';try {const response = await fetch('http://192.168.0.10/clickhouse/', {  //改成你自己的服务器IP地址method: 'POST',headers: {'Content-Type': 'text/plain','Authorization': 'Basic ' + btoa('user_name:')  // 添加密码(如有): btoa('default:password')},body: sql});const text = await response.text();output.textContent = text;} catch (err) {output.textContent = '请求失败: ' + err;}}</script>
</body>
</html>
http://www.xdnf.cn/news/1927.html

相关文章:

  • Java项目——校园社交网络平台的设计与实现
  • 考研单词笔记 2025.04.17
  • 音视频学习 - ffmpeg 编译与调试
  • 【零基础】基于DeepSeek-R1与Qwen2.5Max的行业洞察自动化平台
  • 记录一次生产中mysql主备延迟问题处理
  • python学习—详解word邮件合并
  • Redis List 的详细介绍
  • 方德桌面操作系统V5.0-G23 vim无法复制粘贴内容
  • Java虚拟机(JVM)平台无关?相关?
  • 在Linux下安装Gitlab
  • 2.深入剖析 Rust+Axum 类型安全路由系统
  • 极狐GitLab GEO 功能介绍
  • DAY 47 leetcode 232--栈与队列.用栈实现队列
  • vue3 element-plus中的国际化在onMounted中的写法
  • docker Windows 存放位置
  • 【web考试系统的设计】
  • 零服务器免备案!用Gitee代理+GitHub Pages搭建个人博客:绕过443端口封锁实战记录
  • 基于Flask的漏洞挖掘知识库系统设计与实现
  • 对抗生成进化:基于DNA算法的AIGC检测绕过——让AI创作真正“隐形“
  • 生物信息学技能树(Bioinformatics)与学习路径
  • 04-libVLC的视频播放器:获取媒体信息
  • 【裁员感想】
  • 关于webpack的知识点
  • 《似锦》:画饼之—你画给我我画给你
  • java 设计模式之代理模式
  • Android Compose Activity 页面跳转动画详解
  • 【Leetcode 每日一题】2176. 统计数组中相等且可以被整除的数对
  • ubuntu磁盘挂载
  • MySQL GTID集合运算函数总结
  • e实例性能测评:Intel Xeon Platinum处理器,经济型入门级服务器