DataEase大屏iframe嵌入自建网站(React)

1、修改dataease 所在的服务器nginx配置

bash 复制代码
server {
    listen 80;
    server_name dataease.ibaiqiu.cn;
    return 307 https://$host$request_uri;
}
server {
    listen       443 ssl;
    server_name  dataease.ibaiqiu.cn;
    client_max_body_size 30M;
    ssl_certificate      /usr/local/nginx/conf/vhost/ibaiqiu.cn.pem;
    ssl_certificate_key  /usr/local/nginx/conf/vhost/ibaiqiu.cn.key;
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.2;
    ssl_prefer_server_ciphers on;
    proxy_set_header Host               $host;
    proxy_set_header X-Real-IP          $remote_addr;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto  $scheme;
    proxy_http_version 1.1;
    proxy_connect_timeout 500s;
    proxy_read_timeout 500s;
    proxy_send_timeout 500s;
    proxy_redirect http:// https://;

    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_request_buffering off;

    error_page 497 https://$host:$server_port$uri$is_args$args;

    location / {
        proxy_pass http://127.0.0.1:8081;
        proxy_pass_header Server;
        access_log  logs/dataease.ibaiqiu.cn.access.log;
        error_log   logs/dataease.ibaiqiu.cn.error.log;
    }
}

如果是docker 安装, web默认端口是80,可以在挂载目录的.env 文件中修改 DE_PORT=8081

2、dataease 上创建公共连接

3、前端代码

javascript 复制代码
import React, {useEffect, useRef} from "react";

const Welcome = () => {

    return (
        <iframe
            src={"https://xxxx.baiqiu.cn/link/WRRi2i6W"}
            width={"100%"}
            height={"100%"}
            style={{
                "border": "none",
                overflow: "auto",
            }}
            sandbox="allow-scripts allow-forms allow-same-origin"
        />
    );
};

export default Welcome;

完成以上步骤,就可以在自建网站中展示dataease 大屏了,非常好用!!!

相关推荐
剑亦未配妥25 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端·javascript
人工智能训练师6 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny076 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy7 小时前
css的基本知识
前端·css
昔人'7 小时前
css `lh`单位
前端·css
Nan_Shu_6149 小时前
Web前端面试题(2)
前端
知识分享小能手9 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队10 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光10 小时前
css之一个元素可以同时应用多个动画效果
前端·css
huangql52011 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js