Jupyter Notebook 、JupyterHub、 nginx、 iframe页面嵌入集成跨域处理、自定义工具栏、动态添加、读取单元格cell内容

1、 iframe页面嵌入Jupyter Notebook跨域处理

采用nginx解决跨域访问问题，nginx.conf配置如下（http://192.168.1.230:9999 为Jupyter Notebook访问地址）：

upstream localhost {
        server localhost:81 weight=1;
    }

server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

# 重点，转发websocket需要的设置；Notebook内核连接方式 ws://192.168.1.230:9999/api/kernels/***/channels?session_id=***
　　　　　　proxy_set_header X-Real_IP $remote_addr;
　　　　　　proxy_set_header Host $host;
　　　　　　proxy_set_header X_Forward_For $proxy_add_x_forwarded_for;
　　　　　　proxy_http_version 1.1;
　　　　　　proxy_set_header Upgrade $http_upgrade;
　　　　　　proxy_set_header Connection 'upgrade';

        location / {
            root   html;
            index  index.html index.htm;
            http://localhost:80;
            proxy_pass http://localhost;
            proxy_connect_timeout 1;
            proxy_send_timeout 5;
            proxy_read_timeout 5;
        }

　　　　#配置转发websocket（ws）请求
　　　　location /ws{
　　　　　　root html;
　　　　　　index index.html index.htm;
　　　　　　proxy_pass http://localhost;
　　　　}

    location /tree{
            proxy_pass http://192.168.1.230:9999/tree;
    }
        
    location /login{
            proxy_pass http://192.168.1.230:9999/login;
    }
        
    location /static{
            proxy_pass http://192.168.1.230:9999/static;
    }
        
    location /api{
            proxy_pass http://192.168.1.230:9999/api;
    }
        
    location /notebooks{
            proxy_pass http://192.168.1.230:9999/notebooks;
    }
        
    location /edit{
            proxy_pass http://192.168.1.230:9999/edit;
    }
        
    location /nbextensions{
            proxy_pass http://192.168.1.230:9999/nbextensions;
    }
        
    location /custom{
            proxy_pass http://192.168.1.230:9999/custom;
    }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
  function mytest(){
      //动态读取Jupyter Notebook单元格cell内容
      var cell =  document.getElementById("myiframe").contentWindow.Jupyter.notebook.get_selected_cell();
      alert(cell.get_text());
      //动态添加Jupyter Notebook单元格cell
      var insertCell = document.getElementById("myiframe").contentWindow.Jupyter.notebook.insert_cell_below('code');
      insertCell.set_text("print("hello  my word")");
      //cell.execute()
  }
</script>
</head>
<body>
<button name="test" type="button" onClick="javascript:void(mytest())"  value="测试">测试</button><br/>
<iframe src="http://localhost/tree" width="100%" height="600px" id="myiframe"/>
</body>
</html>

2、打开jupyter_notebook_config.py文件
找到 c.NotebookApp.allow_origin = '' 将 '' 改为 '*'

3、自定义Jupyter Notebook按钮

windows平台在C:ProgramDatajupyter bextensions 新建 mytoolmytool.js 文件，内容如下：

define(["require", "jquery", "base/js/namespace"], function (require, $, IPython) {
  "use strict";

  var myCallBack = function () {
      alert('测试内容1111');

      //var selectedCell = Jupyter.notebook.get_selected_cell();
      //alert(selectedCell.get_text());

      //调用iframe外部页面的js方法
      //top.mytest();
  };
  
  var test_button = function () {
    if (!IPython.toolbar) {
      $([IPython.events]).on("app_initialized.NotebookApp", test_button);
      return;
    }
    if ($("#test_button").length === 0) {
      IPython.toolbar.add_buttons_group([
        {
          'label'   : '测试按钮',
          'icon'    : 'fa-list',
          'callback': myCallBack,
          'id'      : 'test_button'
        },
      ]);
    }
  };
 
  var load_ipython_extension = function () {
    test_button();
  };

  return {
    load_ipython_extension : load_ipython_extension,
    myCallBack : myCallBack,
    
  };

});

在dos窗口中执行激活扩展项：jupyter nbextension enable mytool/mytool

4、设置Jupyter Notebook在当前页面中打开新页面

windows平台配置C:UsersAdministrator.jupytercustomcustom.js ，内容如下：

define(["require", "jquery", "base/js/namespace"], function (require, $, IPython) {
        IPython._target = '_self';
});

5、其他

启动：jupyter notebook --ip=192.168.1.230

安装扩展项：jupyter nbextension install C:/Users/Administrator/.jupyter/custom.js

//安装成功后，系统自动拷贝文件到 C:/ProgramData/jupyter/nbextensions 目录下

卸载扩展项：jupyter nbextension uninstall C:/ProgramData/jupyter/nbextensions/custom.js

6、jupyterhub nginx代理配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''      close;
    }

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        
        location / {
            proxy_pass http://192.168.110.13:9000;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header Host $host;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

            # websocket headers
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;
            proxy_set_header X-Scheme $scheme;

            proxy_buffering off;
        }
        
        location ~ /.well-known {
            allow all;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }
    
}

7、jupyterhub 用户自动登录

编辑 /home/ssy/Python-3.7.3/share/jupyterhub/templates/login.html 增加如下代码：

李小家