Hi,
Problem: I am trying to serve an app (via Docker), which has a Deck.gl map, over https. But the Deck.gl component doesn’t display as soon as SSL cert is supplied or a proxy is set up (Nginx). Unsure whether the problem lies in Pydeck or Panel.
Short question: Does anyone know how to serve a Panel app with a Deck.gl component over https?
Note: Please let me know if you want to see working code and which combination (e.g. nginx + panel or panel using Bokeh’s SSL support), right now I just focused on the parts which might cause the error. Because I tried quite a lot of combinations I thought I would clutter the thread with too much code and thereby make it more confusing.
What I tried:
I started out by first running the app without https and on port 5006, which works fine.
Now, I saw that Bokeh supports supplying SSL certificates with the serve command and therefore I used it on
the Panel serve command. It works except for the Deck.gl map (all other Panel elements show just fine):
panel serve --port=5006 --ssl-certfile cert.pem --ssl-keyfile cert.key --show app.py"]
or
panel serve --port=443 --allow-websocket-origin=localhost --ssl-certfile cert.pem --ssl-keyfile cert.key --show app.py"
With mapping those ports to the same ones or mapping the port 443 on the host to 5006 of the container, in all those cases I see all Panel elements except the Deck.gl map.
Because web deployment is new to me, I thought an alternate method could help, therefore I tried to use Nginx.
I started simple by first creating a proxy without the SSL. Just the http proxy by itself resulted in the same issue of an empty element where the Deck.gl map should be.
I did some tests by serving the following via Nginx (used some examples instead of my own app, just in case):
- Serving a static pydeck html file (using Pydeck’s to html functionality): works.
- Serving this example (examples/gallery/external/deck.gl) as a script not a notebook: works, this one doesn’t use pydeck directly
- Serving this example (examples/gallery/param/deck_gl_global_power_plants) as a script not a notebook: Deck.gl component doesn’t display
For me this isn’t conclusive whether the problem arises in Pydeck or Panel, because the first example is just static and just generates a html file and isn’t using the Pydecks bindings when serving.
For the second example it is the same becaue it also doesn’t use Pydeck directly.
Some snippets which I used for points 2 and 3:
Nginx: proxy.conf:
server {
listen 80;
server_name localhost;location / { proxy_pass http://docker_service_name:5006; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "upgrade"; proxy_http_version 1.1; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host:$server_port; proxy_buffering off; }}
Here I just ported from 80 of the host to 80 of the Nginx container (also tried other combinations but sam results)
Served using:
panel serve --port=5006 --allow-websocket-origin=localhost --use-xheaders --show front_end/panel_frontend.py
Conditions
Browser: Brave (same result in Firefox)
python: 3.8.5
panel version: 0.9.7
pydeck: 0.4.0
SSL certificate type: self signed (for testing)
The error I get:
After applying the formatting in Brave on the minimized js file:
in createDeck
panel.min.js:50 (formatted: 602) Error: Could not parse position string null
at h (dist.min.js:formatted:12318)
at e.value (dist.min.js:formatted:12463)
at e.t (dist.min.js:formatted:12370)
at new MapView (dist.min.js:formatted:22689)
at dist.min.js:formatted:873
at S (dist.min.js:formatted:874)
at dist.min.js:formatted:973
at J (dist.min.js:formatted:974)
at dist.min.js:formatted:950
at Array.map ()