bad use of css in documentation inframe when used behind nginx

[zwergon]

I tried to use a way to show documentation as provided by devpi.

I created and pushed a small python module "db-dwt" and its sphinx documentation using devpi upload.

I create a virtual machine and try to access devpi using nginx as reverse proxy as explained in the example and using the nginx.conf given as an example.

If i navigate in the documentation using local server on the local machine (http://localhost:3141), alabaster.css style of my sphinx documentation is honoured. ( see devpi-localhost.png)

On the contrary if i access from outside at my vm adress (https://devpi-ifpen.francecentral.cloudapp.azure.com), inframe css file is not used.

If i look at the log, i see that in localhost case, i get the following requests

2023-06-09 17:37:06,938 INFO  [req6] GET /+theme-static-4.2.0/style.css
2023-06-09 17:37:08,600 INFO  [req7] GET /ifpen/dev/db-dwt/0.0.1/+d/index.html
2023-06-09 17:37:08,639 INFO  [req8] GET /ifpen/dev/db-dwt/0.0.1/+doc/index.html
2023-06-09 17:37:08,984 INFO  [req9] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/pygments.css
2023-06-09 17:37:08,988 INFO  [req10] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/alabaster.css
2023-06-09 17:37:08,988 INFO  [req11] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/custom.css
2023-06-09 17:37:08,988 INFO  [req12] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/documentation_options.js
2023-06-09 17:37:08,988 INFO  [req13] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/doctools.js
2023-06-09 17:37:08,990 INFO  [req14] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/sphinx_highlight.js
2023-06-09 17:37:09,328 INFO  [req15] GET /ifpen/dev/db-dwt/0.0.1/+doc/_static/basic.css

The requests at /+d/index.html is redirected to /+doc/index.html and the style is read.

If i look at the log using my vm adress, i only got :

2023-06-09 17:50:46,048 INFO  [req17] GET /ifpen/dev/db-dwt/0.0.1/+d/index.html
2023-06-09 17:50:46,081 INFO  [req18] GET /+theme-static-4.2.0/style.css
2023-06-09 17:50:46,091 INFO  [req19] GET /+static-4.2.0/docview.js
2023-06-09 17:50:46,148 INFO  [req20] GET /+theme-static-4.2.0/logo.gif

So the style is not used.

In the example below, i defined my own style, in my own theme, but the results are the same whatever i used --theme option or not.

Is it the reverse proxy that doesn't behave correctly or is it directly the devpi server which causes it ?

Package                Version             
---------------------- --------------------
attrs                  19.3.0              
Automat                0.8.0               
blinker                1.4                 
certifi                2019.11.28          
chardet                3.0.4               
Click                  7.0                 
cloud-init             23.1.2              
colorama               0.4.3               
command-not-found      0.3                 
configobj              5.0.6               
constantly             15.1.0              
cryptography           2.8                 
dbus-python            1.2.16              
distro                 1.4.0               
distro-info            0.23ubuntu1         
entrypoints            0.3                 
httplib2               0.14.0              
hyperlink              19.0.0              
idna                   2.8                 
importlib-metadata     1.5.0               
incremental            16.10.1             
Jinja2                 2.10.1              
jsonpatch              1.22                
jsonpointer            2.0                 
jsonschema             3.2.0               
keyring                18.0.1              
language-selector      0.1                 
launchpadlib           1.10.13             
lazr.restfulclient     0.14.2              
lazr.uri               1.0.3               
MarkupSafe             1.1.0               
more-itertools         4.2.0               
netifaces              0.10.4              
oauthlib               3.1.0               
pexpect                4.6.0               
pip                    20.0.2              
pyasn1                 0.4.2               
pyasn1-modules         0.2.1               
PyGObject              3.36.0              
PyHamcrest             1.9.0               
PyJWT                  1.7.1               
pymacaroons            0.13.0              
PyNaCl                 1.3.0               
pyOpenSSL              19.0.0              
pyparted               3.11.2              
pyrsistent             0.15.5              
pyserial               3.4                 
python-apt             2.0.1+ubuntu0.20.4.1
python-debian          0.1.36ubuntu1       
PyYAML                 5.3.1               
requests               2.22.0              
requests-unixsocket    0.2.0               
SecretStorage          2.3.1               
service-identity       18.1.0              
setuptools             45.2.0              
simplejson             3.16.0              
six                    1.14.0              
sos                    4.4                 
ssh-import-id          5.10                
supervisor             4.1.0               
systemd-python         234                 
Twisted                18.9.0              
ubuntu-advantage-tools 8001                
ufw                    0.36                
unattended-upgrades    0.1                 
urllib3                1.25.8              
wadllib                1.3.3               
WALinuxAgent           2.2.46              
wheel                  0.34.2              
zipp                   1.0.0               
zope.interface         4.7.1  

NAME="Ubuntu"
VERSION="20.04.6 LTS (Focal Fossa)"
ID=ubuntu
ID_LIKE=debian
PRETTY_NAME="Ubuntu 20.04.6 LTS"
VERSION_ID="20.04"
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
VERSION_CODENAME=focal
UBUNTU_CODENAME=focal

[fschulze]

Take a look at the network tab in the debug inspector of your browser. My first thought is, that you have not set X-Outside-URL in your reverse proxy, which causes wrong URLs from devpi-server. It (like many other things) isn't well enough documented: https://devpi.net/docs/devpi/devpi/stable/+d/quickstart-server.html?highlight=outside%2520url#nginx-devpi-conf-nginx-site-config

[zwergon]

Thanks for your answer but X-Outside-URL is set accordingling with the documentation.

My nginx.conf file is the following:

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 768;
        # multi_accept on;
}

http {
map $http_x_forwarded_proto $x_scheme {
    default $scheme;
    http http;
    https https;
}

server {
    server_name devpi-ifpen.francecentral.cloudapp.azure.com;
    gzip             on;
    gzip_min_length  2000;
    gzip_proxied     any;
    # add application/vnd.pypi.simple.v1+json to the gzip_types
    gzip_types  text/plain text/css text/xml
                application/json application/vnd.pypi.simple.v1+json
                application/javascript text/javascript
                application/xml application/xml+rss;

    proxy_read_timeout 60s;
    client_max_body_size 64M;

    # set to where your devpi-server state is on the filesystem
    root /home/lecomtje/.devpi/server;

    # try serving static files directly
    location ~ /\+f/ {
        # workaround to pass non-GET/HEAD requests through to the named location below
        error_page 418 = @proxy_to_app;
        if ($request_method !~ (GET)|(HEAD)) {
            return 418;
        }

        expires max;
        try_files /+files$uri @proxy_to_app;
    }

    # try serving docs directly
    location ~ /\+doc/ {
        # if the --documentation-path option of devpi-web is used,
        # then the root must be set accordingly here
        root /home/lecomtje/.devpi/server;
        try_files $uri @proxy_to_app;
    }

    location / {
        # workaround to pass all requests to / through to the named location below
        error_page 418 = @proxy_to_app;
        return 418;
    }

    location @proxy_to_app {
        proxy_pass http://localhost:3141;
        # the $x_scheme variable is only required if nginx is behind another
        # proxy (often the case in container environments),
        # if your nginx is the only proxy server, the $scheme variable can be
        # used and the map $http_x_forwarded_proto $x_scheme above be removed
        proxy_set_header X-Forwarded-Proto $x_scheme;
        proxy_set_header X-outside-url $x_scheme://$http_host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/devpi-ifpen.francecentral.cloudapp.azure.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/devpi-ifpen.francecentral.cloudapp.azure.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}


server {
    if ($host = devpi-ifpen.francecentral.cloudapp.azure.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    server_name devpi-ifpen.francecentral.cloudapp.azure.com;
    listen 80;
    return 404; # managed by Certbot

}}

I'm not sure what i need to look at in the network tab of my navigator debugger, but it seems that is able to download all js, css stuff.

[fschulze]

Since your instance is public (are you aware of that?), I took a look and got the following error on the (Firefox) console among others:

The stylesheet https://devpi-ifpen.francecentral.cloudapp.azure.com/ifpen/dev/db-dwt/0.0.1/+doc/_static/alabaster.css was not loaded because its MIME type, “text/plain”, is not “text/css”.

So at some point the MIME type is broken, since I can't access devpi-server directly, I can't tell whether it happens there or in the reverse proxy. But you reported it to work when accessing directly, so I suspect something is wrong with the reverse proxy (nginx) config, but I can't see anything obvious right now as the config looks pretty much like the default config from devpi-gen-config.

[fschulze]

Two other things I noticed:

1. why does your pip list not include devpi-server etc?
2. the versions in the footer list devpi-lockdown, but you are not using the generated configuration for it from devpi-gen-config.

[zwergon]

for the pip list i apologize, i use a virtual environment and i did't activate it before doing pip list

Package                       Version   
----------------------------- ----------
aiohttp                       3.8.4     
aiosignal                     1.3.1     
alabaster                     0.7.13    
argon2-cffi                   21.3.0    
argon2-cffi-bindings          21.2.0    
async-timeout                 4.0.2     
attrs                         23.1.0    
Babel                         2.12.1    
beautifulsoup4                4.12.2    
bleach                        6.0.0     
build                         0.10.0    
certifi                       2023.5.7  
cffi                          1.15.1    
Chameleon                     4.0.0     
charset-normalizer            3.1.0     
check-manifest                0.49      
cmarkgfm                      2022.10.27
cryptography                  41.0.1    
defusedxml                    0.7.1     
devpi                         2.2.0     
devpi-client                  6.0.4     
devpi-common                  3.7.2     
devpi-lockdown                2.0.0     
devpi-server                  6.9.0     
devpi-web                     4.2.0     
docutils                      0.20.1    
frozenlist                    1.3.3     
hupper                        1.12      
idna                          3.4       
imagesize                     1.4.1     
importlib-metadata            6.6.0     
importlib-resources           5.12.0    
iniconfig                     2.0.0     
itsdangerous                  2.1.2     
jaraco.classes                3.2.3     
jeepney                       0.8.0     
Jinja2                        3.1.2     
keyring                       23.13.1   
keyrings.alt                  4.2.0     
lazy                          1.5       
markdown-it-py                2.2.0     
MarkupSafe                    2.1.3     
mdurl                         0.1.2     
more-itertools                9.1.0     
multidict                     6.0.4     
packaging                     21.3      
passlib                       1.7.4     
PasteDeploy                   3.0.1     
pep517                        0.13.0    
pip                           20.0.2    
pkg-resources                 0.0.0     
pkginfo                       1.9.6     
plaster                       1.1.2     
plaster-pastedeploy           1.0.1     
platformdirs                  3.5.1     
pluggy                        1.0.0     
py                            1.11.0    
pycparser                     2.21      
Pygments                      2.15.1    
pyparsing                     3.0.9     
pyproject-hooks               1.0.0     
pyramid                       2.0.1     
pyramid-chameleon             0.3       
python-dateutil               2.8.2     
pytz                          2023.3    
readme-renderer               37.3      
repoze.lru                    0.7       
requests                      2.31.0    
requests-toolbelt             1.0.0     
rfc3986                       2.0.0     
rich                          13.4.1    
ruamel.yaml                   0.17.31   
ruamel.yaml.clib              0.2.7     
SecretStorage                 3.3.3     
setuptools                    44.0.0    
simplejson                    3.19.1    
six                           1.16.0    
snowballstemmer               2.2.0     
soupsieve                     2.4.1     
sphinx                        7.0.1     
sphinx-basic-ng               1.0.0b1   
sphinxcontrib-applehelp       1.0.4     
sphinxcontrib-devhelp         1.0.2     
sphinxcontrib-htmlhelp        2.0.1     
sphinxcontrib-jsmath          1.0.1     
sphinxcontrib-qthelp          1.0.3     
sphinxcontrib-serializinghtml 1.1.5     
strictyaml                    1.7.3     
tomli                         2.0.1     
translationstring             1.4       
twine                         4.0.2     
typing-extensions             4.6.3     
urllib3                       2.0.3     
venusian                      3.0.0     
waitress                      2.1.2     
webencodings                  0.5.1     
WebOb                         1.8.7     
Whoosh                        2.7.4     
yarl                          1.9.2     
zipp                          3.15.0    
zope.deprecation              5.0       
zope.interface                6.0