Panel data cannot be visualized when deploying with nginx, but works perfectly when used with Django and Daphne

Panel
1

Hello,

I am using Panel code and embedding it into a Django project. I followed tutorial on web, freeze channels to 2.4.0, and add "settings.resources = ‘inline’ "(Panel regression? (embedding panel in gunicorn+Flask) - #9 by philippjfr), and it works fine when launching with Django runserver:

python manage.py runserver 0:8000

Once I have achieved this I tried launching it with Daphne using ASGI, and works fine displaying panel code inside html in Django App. (mysite is the name of Django project)

daphne -b 0.0.0.0 -p 8000 mysite.asgi:application

Next step I wanted to achieve is to let the app running always in a computer as a server, so I used Nginx and supervisor with Channels infrastructure used with Django and Panel (https://channels.readthedocs.io/en/2.x/deploying.html). However once it is done server with Django project works (MYIP:8000) but all code imported from Panel is not displayed (MYIP:8000/display). I checked browser’s console but it does not appear any error, only thing can be seen is that while trying to load autoload.js with bokeh information of panel code, browser cannot read anything else(image below).

browser_console
browser_console1841×394 60.1 KB

Does anybody experienced anything similar or know what could be leading to panel code not being displayed when deploying with Nginx but if I run Django project manually works perfect?

Just in case somebody wants to dig into this I uploaded to Github a minimal example which has this behaviour (supervisor and nginx conf files are inside conf folder just to document how I have configured both files):

Libraries I am using are:
pyvista
panel
django==3.0.3
channels==2.4.0

Thanks in advance

2

Try to follow this guide:

1 Like
3

I am running panel behind nginx and am not experiencing any issues.

My config:


##
# You should look at the following URL's in order to grasp a solid understanding
# of Nginx configuration files in order to fully unleash the power of Nginx.
# https://www.nginx.com/resources/wiki/start/
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/
# https://wiki.debian.org/Nginx/DirectoryStructure
#
# In most cases, administrators will remove this file from sites-enabled/ and
# leave it as reference inside of sites-available where it will continue to be
# updated by the nginx packaging team.
#
# This file will automatically load configuration files provided by other
# applications, such as Drupal or Wordpress. These applications will be made
# available underneath a path with that package name, such as /drupal8.
#
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples.
##

# Default server configuration
#
server {
	listen 443 default_server;
	listen [::]:443 default_server;
	ssl on;
    ssl_certificate /etc/ssl/certs/cert.pem;
  	ssl_certificate_key /etc/ssl/private/private.key;
	
	# SSL configuration
	#
	# listen 443 ssl default_server;
	# listen [::]:443 ssl default_server;
	#
	# Note: You should disable gzip for SSL traffic.
	# See: https://bugs.debian.org/773332
	#
	# Read up on ssl_ciphers to ensure a secure configuration.
	# See: https://bugs.debian.org/765782
	#
	# Self signed certs generated by the ssl-cert package
	# Don't use them in a production server!
	#
	# include snippets/snakeoil.conf;

	root /var/www/html;

	# Add index.php to the list if you are using PHP
	index index.html index.htm index.nginx-debian.html;

	server_name _;

	location / {
		proxy_pass http://localhost:5008;
		proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host:$server_port;
        proxy_buffering off;
	}

	}
	# pass PHP scripts to FastCGI server
	#
	#location ~ \.php$ {
	#	include snippets/fastcgi-php.conf;
	#
	#	# With php-fpm (or other unix sockets):
	#	fastcgi_pass unix:/var/run/php/php7.0-fpm.sock;
	#	# With php-cgi (or other tcp sockets):
	#	fastcgi_pass 127.0.0.1:9000;
	#}

	# deny access to .htaccess files, if Apache's document root
	# concurs with nginx's one
	#
	#location ~ /\.ht {
	#	deny all;
	#}
}


# Virtual Host configuration for example.com
#
# You can move that to a different file under sites-available/ and symlink that
# to sites-enabled/ to enable it.
#
#server {
#	listen 80;
#	listen [::]:80;
#
#	server_name example.com;
#
#	root /var/www/example.com;
#	index index.html;
#
#	location / {
#		try_files $uri $uri/ =404;
#	}
#}
3 Likes
4

Thanks a lot for your answer.
I tried to adapt your nginx conf file to my situation (I don’t have ssl), looking my nginx conf file like this:

server {
	listen 443 default_server;
	listen [::]:443 default_server;


	server_name _;

	location / {
		proxy_pass http://192.168.199:8000;
		proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_http_version 1.1;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header Host $host:$server_port;
	proxy_buffering off;
	}

	}

But behaviour is still the same as before.

5

Thanks a lot for your indication. I will read it and try to solve with this approach.

6

without SSL, set your listening port to 80 instead of 443

7

It is the same behaviour, no console difference and log have no errors.

8

did you reload nginx after applying the changes?

sudo systemctl reload nginx

btw, the file to change is under

/etc/nginx/sites-enabled/default

9

Yes, every change I update all config files.

10

Hello,

I have tried @Hoxbro approach to make my panel visible inside Django once deployed with nginx. I created 2 servers with 2 different nginx and 2 different supervisor conf files. With this Panel server configuration, both servers seem to be up now, and several components of Bokeh are loaded (previously not) as one can be seen in the following pictures.

display_web_console
display_web_console1851×539 249 KB

display_web_console_1
display_web_console_11858×518 181 KB

I allowed to access Bokeh server from different origins just to debug, and if I enter “http://192.168.199.13:5500/app1” where Panel server is started some modules load but nothing is visible (next picture).

panel_server_console
panel_server_console1857×911 116 KB

The way I have configured nginx conf files is the following:

django.conf

# Default server configuration
#
server {
    listen 80 default_server;
    server_name _;

    access_log  /tmp/bokeh.access.log;
    error_log   /tmp/bokeh.error.log debug;
    
    location = /favicon.ico { access_log off; log_not_found off; }
    
    location / {
        proxy_pass http://192.168.199.13:8000;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host:$server_port;
        proxy_buffering off;
    }
}

panel.conf

# Default server configuration
#
server {
    #listen 80 default_server;
    #server_name _;

    access_log  /tmp/panel.access.log;
    error_log   /tmp/panel.error.log debug;
    
    location = /favicon.ico { access_log off; log_not_found off; }
    
    location /app1/ {
        proxy_pass http://192.168.199.13:5500;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host:$server_port;
        proxy_buffering off;
    }
}

Supervisor config files are:

django.conf

[fcgi-program:asgi]
# Set Django environment variables

# TCP socket used by Nginx backend upstream
socket=tcp://192.168.199.13:8000

# Directory where your site's project files are located
directory=/home/toni/Documentos/071/mysite

# Each process needs to have a separate socket file, so we use process_num
# Make sure to update "mydjangoproject.asgi" to match your project name
command=/home/toni/bin/anaconda3/envs/panel/bin/daphne -u /run/daphne/daphne%(process_num)d.sock --fd 0 --access-log - --proxy-headers mysite.asgi:application

# Number of processes to startup, roughly the number of CPUs you have
numprocs=4

# Give each process a unique name so they can be told apart
process_name=asgi%(process_num)d

# Automatically start and recover processes
autostart=true
autorestart=true

# Choose where you want your log to go
stdout_logfile=/var/log/asgi.log
redirect_stderr=true

panel.conf

[program:panel]

socket=tcp://192.168.199.13:5500

# Directory where your site's project files are located
directory=/home/toni/Documentos/071/mysite/display

# Each process needs to have a separate socket file, so we use process_num
# Make sure to update "mydjangoproject.asgi" to match your project name
#command=/home/toni/bin/web_env/env/bin/panel serve app1.py --address 192.168.199.13 --port 5500 --allow-websocket-origin 192.168.199.13:8000
command=/home/toni/bin/web_env/env/bin/panel serve app1.py --address 192.168.199.13 --port 5500 --allow-websocket-origin='*'


# Automatically start and recover processes
autostart=true
autorestart=true
startretries=3
user=nobody
# Choose where you want your log to go
stdout_logfile=/var/log/panel.log
redirect_stderr=true

Whole project with new changes can be found in:

Does anybody knows what address, socket or item in my configuration is not properly configured?

Thanks in advance

1 Like